← All elements
<div class="hc"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>About this animation
Seven hexagons packed in a honeycomb flower that light up one at a time in a ring.
How it works
Seven hexagons are positioned by hand into a flower around a centre piece. Six outer cells share one keyframe that lights each briefly, with delays stepping around the ring.
Ways to customise it
- Change the lit colour #fbbf24.
- Light the cells in the other direction by reversing delays.
- Scale the whole cluster.
Good to know
It is decorative and stops under reduced motion. The positions are fixed pixel values, so scale it with transform rather than editing each one.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.