Art Nouveau

Floral Bloom

Rose and gold petals unfold in sequence around a glowing core; corner whiplash vines draw in. The whole bloom sways gently on a loop.

svgmedium complexitymoderate 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-theme hero sections, botanical or luxury brand intros, decorative loading screens needing an elegant entrance animation.

When not to

Light backgrounds (hardcoded dark canvas). Contexts where continuous gentle motion competes with readable content.

Working with an AI agent

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

Change outer petal color to deep violet — set --an04-rose to #6b3fa0, update petalG gradient stops to match, then slow the sway from 9s to 14s. 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

petal color (--an04-rose, --an04-gold CSS vars)
sway duration (9s in an04-sway)
petal open delay stagger (.45s increments)
core pulse scale (1.07 in an04-pulse)
vine tendril paths (d= on .an04-tendril)
theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

IIFE wrapper with visibilitychange pause
prefers-reduced-motion guard (CSS + JS svg.pauseAnimations)
transform-box:fill-box on petals (rotation hinge)
filter url(#an04-soft) drop-shadow
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
Visibility pause iterates all descendant nodes which may be slow inside a larger page

art-nouveaufloralsvgstained-glassbloomambientdecorative

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.
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…
Lily PondStylised lilies with radial petals and kidney pads drift over expanding gold ripple rings on a deep green pond, framed by whiplash vine corners.