Skip to content
Lab·exploration

Spectral signal

Figma's demo builds this glowing ring of light by layering motion keyframes and shaders. I rebuilt every stage with plain HTML, CSS and SVG filters, with no canvas or WebGL. Every stage is tunable live.

Layers

A number shows only the stages up to it.

Tuners

The stages

  1. 1RingA grey conic gradient, masked to a ring, spins once a second.
  2. 2ConcentricSmaller copies of the ring, each with its highlight offset.
  3. 3Random rotationEach ring eases between seeded random angles and loops without a seam.
  4. 4Color rampA filter maps brightness onto a gradient, so grey turns to color.
  5. 5Lens distortionA small generated displacement map bends the light and splits its channels.
  6. 6Lens distortion 2A second lens, off center, pulls the shape out of round.
  7. 7BloomThe brightest parts get blurred twice and added back as glow.
  8. 8GlassA tiled texture refracts and frosts the light, and its glints take on the light's color.

The original

Explore Shaders and Motion with the Figma agentFigma on Figma, with Brett McMillin

An independent rebuild of the technique with SVG filters, not Figma’s code.