LITTLE LEAF: A HERO PLANT WITH A SHORT SWAY

Files for "Animate a Generated SVG Illustration with a Static Alternative"
on svgai.org. Made in October 2026. Little Leaf is a fictional shop.

FILES
index.html, style.css, app.js: The hero example, plus the same animated
file in four places: inline <svg>, <img>, a CSS background and <picture>.
A Replay button restarts the sway.
assets/little-leaf-original.svg: The plant as downloaded from SVG AI on
September 26, 2026 (Ultra, one SVG, transparent background), unchanged.
Its prompt and the hero it was made for:
https://www.svgai.org/blog/svg-hero-illustration-headline-space
assets/little-leaf-proportional.svg: The copy published with that hero:
only preserveAspectRatio changed, from "none" to "xMidYMid meet".
assets/little-leaf-static.svg: The same 62 paths in three groups, by
paint order: back foliage (the first 25 paths), pot, soil and rim (the
next 7), front foliage (the last 30). It renders exactly like the
proportional copy.
assets/little-leaf-sway.svg: The static file plus a <style> that sways
both foliage groups around the stem base (left, right, left, then back to
rest) and stops in the rest pose after 4.8 seconds. The pot stays still.
check-results.json: What was checked, and the results.

THE SWAY
Pivot: the stem base, user point (1020, 800), set with
transform-box: view-box and transform-origin: 1020px 800px.
Keyframes: 0, -1.5 and +1.2 degrees; 2.4 s with ease-in-out; 2 cycles,
the second one backwards (alternate), so it ends where it started.
The animation is inside @media (prefers-reduced-motion: no-preference),
so it runs only when the viewer has not asked for reduced motion.

TO USE IT
As an image: <img src="little-leaf-sway.svg" width="1092" height="1152"
alt="">. To serve the static file to people who ask for reduced motion,
wrap it in <picture> with
<source srcset="little-leaf-static.svg" media="(prefers-reduced-motion: reduce)">.
Keep width and height on the <img>, so the page doesn't shift while the
file loads.

TESTED
Chrome 155 and Edge 155 on Windows 11, from a local web server: the
hero, inline <svg>, <img>, CSS background, <picture> and the file opened
directly, with no motion preference, with DevTools-style emulation of
reduced motion, and with reduced motion forced at browser level with the
--force-prefers-reduced-motion switch (a stand-in for the Windows setting,
which was not changed); which file each <picture> showed; <picture>
switching live; the last frame against the static file; layout at 320, 375
and 1280 px and at 200% and 400% zoom.
Not tested: Firefox, Safari, real phones, the Windows setting itself,
screen readers, and CPU or battery use.
The grouping, the sway, the page and the checks were made by an AI coding
agent.