← All elements
<div class="hp"><span></span></div>About this animation
A hexagon drawn with clip-path whose outline ring pulses outward in a repeating beat.
How it works
A hexagon is made with clip-path polygon. Two pseudo-element copies behind it scale outward while fading, with one started half a cycle later, so rings of the same shape pulse out.
Ways to customise it
- Change #a78bfa.
- Raise the 1.7 scale.
- Slow the 2.2s cycle.
Good to know
clip-path clips outlines and shadows, which is why the glow is drawn as separate scaled copies. Reduced motion hides the rings.
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.