∞ forever components

Art Nouveau

Dragonfly Glide

A stained-glass-winged dragonfly glides and flutters in a slow figure-eight arc; gold pollen motes rise on a dark botanical ground.

svgmedium complexitysubtle motion

Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited

Live demo — the real component, running in a sandbox. One self-contained HTML file, zero dependencies. Open it on the canvas →
Worth keeping? Votes steer what gets built next — sign in to cast one, free to read

When to use it

Dark-themed hero backgrounds, nature or botanical branding, Art Nouveau aesthetic sections needing ambient motion.

When not to

Light backgrounds (hardcoded dark ground), contexts requiring readable text overlays, or low-contrast UI surrounds.

Working with an AI agent

Every component ships agent-ready metadata. An example instruction for this one:

Change the wing fill from teal/green to deep violet by updating --an09-teal to #4a1d7a and --an09-green to #6b3fa0, then slow the glide cycle to 12s. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.

Safe to edit

  • color palette (CSS custom properties --an09-gold, --an09-teal, --an09-rose, --an09-green)
  • glide duration and arc (an09-glide keyframes + 7.5s)
  • wing flutter speed (2.6s on .an09-wing)
  • pollen mote count and positions (cx/cy on .an09-mote circles)
  • mote rise distance (translateY values in an09-rise)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • IIFE wrapper with visibilitychange pause
  • prefers-reduced-motion guard
  • SVG defs reuse pattern (#an09-wingShape, #an09-vine)
  • transform-box:fill-box on animated groups
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Light re-theme via the [data-theme=light] token block; catalog bg/accent describe the dark default
  • Wing flutter is very subtle (3.4deg rotation) and may be imperceptible on small tiles

dragonflyart-nouveausvgambientstained-glassnatureloop

More Art Nouveau components

  • Vine GrowAn Art Nouveau whiplash vine draws itself upward via stroke-dashoffset; four leaves bloom and three gold buds pop along the S-curves on a dark green…
  • Stained Glass7 organic petal and leaf cells light up in sequence with glowing halos against dark glass, then fade and reblooom. CSS transitions on SVG paths.
  • Whiplash LineFive Catmull-Rom S-curve ribbons in gold, sage, and rose breathe with sinusoidal wobble; five-petal rosette nodes pulse along the curves.
  • Floral BloomRose and gold petals unfold in sequence around a glowing core; corner whiplash vines draw in. The whole bloom sways gently on a loop.
  • Peacock CurlFive peacock-feather plumes unfurl from a central fan, swaying gently in gold and green whiplash lines with jewel-toned iridescent eyes at each tip.
  • Arch TendrilsSeven symmetric whiplash tendrils with curled buds, leaves, and a crown rosette sway gently in a slow sine-wave rotation over a dark stained-glass arch…