∞ forever components

Art Nouveau

Vine Grow

An 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 background.

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

Decorative hero backgrounds, botanical or luxury brand tiles, ambient looping displays needing an organic, hand-crafted feel.

When not to

Content-heavy layouts where the looping vine competes with text; contexts requiring a light background (hardcoded dark green).

Working with an AI agent

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

Change the main stem color to deep burgundy (#8b2c3a), increase stroke-width on .an01-s1 to 7, and slow the full cycle to 8s. 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

  • stem colors (stroke on .an01-s1, .an01-s2, .an01-s3)
  • animation duration (5.2s on all animations)
  • bud petal gradient (an01-petal stop colors)
  • leaf fill gradient (an01-leafg stop colors)
  • animation delays per element (--d CSS var)
  • theme tokens (:root dark defaults + [data-theme=light] overrides)

Keep intact

  • stroke-dasharray/dashoffset self-draw pattern on .an01-stem
  • prefers-reduced-motion guard (CSS + JS settle-to-static)
  • visibilitychange pause handler
  • IIFE wrapper
  • theme hook (?theme= bootstrap + forever:theme message listener + theme tokens)

Known limitations

  • Background color hardcoded in CSS (#0e1310) — must change both the body and radialGradient to recolor
  • SVG glow filter applied to the stem group adds compositor cost on older mobile GPUs

art-nouveausvgvineself-drawingbotanicalloopambient

More Art Nouveau components

  • 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…
  • 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.