Scene-scale SVG illustration with multiple paths drawing in a choreographed sequence, then optionally filling. Three scenes — a city skyline, a constellation, and a botanical sketch — each authored as a single self-contained SVG.
Hand-curated SVG · Ocean illustrations
12 hand-curated ocean illustration scenes. Each is a self-contained SVG (viewBox 680×430) with embedded @keyframes — drift, shimmer, pulse, cloud, fly, glow — composing layered ambient motion that breathes naturally.
Twilight lagoon · Curved horizons
A twilight lagoon traced in flowing curves. Sky, water, and headland boundaries meet in soft cubic arcs while gentle foam and ripple lines drift across the surface. Palm silhouettes and a small sailboat anchor the scene.
Golden hour · Long light
A large sun rests on the horizon as golden light stretches long across the calm water. The sky transitions yellow → orange → magenta, with a small distant boat lending a warm, contemplative serenity.
Big break · Spray + foam
Daylight at sea — a giant wave curls and breaks, sending white spray scattering in every direction. A distant boat and the broken-foam rhythm carry strong kinetic energy.
Palm silhouette · Tropical dusk
Two palm trees frame the composition while a massive sun hangs on the horizon, its light pouring across the water. Stark palm silhouettes carved against a deep magenta-and-coral sky.
Underwater · Light shafts
Below the surface, sunlight filters down in rays while fish, coral, and rising bubbles share the scene. Cyan-to-deep-blue gradients with delicate light shafts create quiet, living depth.
Moonlit night · Lighthouse beam
Stars twinkle and a lighthouse beam slowly sweeps across a calm sea, with moonlight pooling on the water. Steady deep-indigo tones and pulsing stars give a still, contemplative depth.
Storm · Lightning + rain
Heavy clouds gather and lightning fractures the sky as waves slam into the cliffs and spray erupts upward. Grey-toned sky, sea, rain streaks, and flashing strikes carry tense drama.
Dawn · Soft pastels
First light. Soft pastel hues wash the sky and a glassy sea while beach grass tips into view. Lilac → peach → mint gradients carry a warm, near-silent calm.
Harbor · Sailboats at dusk
Sunset at the harbor — moored sailboats sway against a setting sun while harbor lamps flicker. Pier columns and gently swaying sails keep the scene alive.
Misty cliffs · Layered depth
Layered cliffs recede into a silver haze as still waters reveal a small rocky islet. Drifting mist bands create a strong sense of distance and cool stillness.
Bioluminescent · Glowing waves
Midnight beach — breaking waves and footprints in the sand glow turquoise. A starry sky above and luminous wave lines below build a quiet, mystical mood.
Breaching whale · Splash burst
Clear day, deep blue ocean — a humpback whale breaches the surface as spray bursts in every direction. Detailed whale texture and an explosive splash create the scene's climax.
An animated SVG path illustration scene uses a fixed viewBox, layered vector shapes, and small transform or opacity keyframes so the artwork scales cleanly without losing semantic structure.
1<svg class="path-scene" viewBox="0 0 240 150"2role="img" aria-labelledby="path-scene-title path-scene-desc"><title id="path-scene-title">Animated lagoon scene</title><desc id="path-scene-desc">A calm ocean scene with drifting clouds and wave highlights.</desc><defs><linearGradient id="path-scene-sky" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#312e81" /><stop offset="100%" stop-color="#0f766e" /></linearGradient></defs>11<rect width="240" height="150" fill="url(#path-scene-sky)" /><circle class="path-scene__sun" cx="185" cy="42" r="18" /><path class="path-scene__cloud"d="M28 42c8-12 21-12 29 0 7-6 18-3 21 6H16c2-6 6-9 12-6z" /><path class="path-scene__cliff"d="M0 104c28-18 52-17 74-2 25 17 45 12 71-1 32-16 66-10 95 8v41H0z" /><path class="path-scene__water"18d="M0 92c32 7 56 7 87 0 30-7 58-7 91 0 24 5 43 5 62 0v58H0z" /><path class="path-scene__shine"d="M42 112c27 5 48 5 74 0m36 12c18 4 34 4 52 0" /><path class="path-scene__boat"d="M114 83l13-28 13 28h-26zm-10 3h46l-7 9h-31z" /></svg><style>.path-scene {width: min(100%, 360px);display: block;overflow: visible;border-radius: 12px;background: #0f172a;}.path-scene__sun {fill: #fde68a;opacity: .86;animation: path-scene-sun-pulse 5s ease-in-out infinite;}.path-scene__cloud {fill: rgba(255,255,255,.76);animation: path-scene-cloud-drift 8s ease-in-out infinite alternate;}.path-scene__cliff { fill: #164e63; }.path-scene__water { fill: rgba(14, 165, 233, .72); }.path-scene__shine {fill: none;stroke: rgba(255,255,255,.72);stroke-width: 3;stroke-linecap: round;stroke-dasharray: 40 26;50animation: path-scene-shimmer 4s linear infinite;}.path-scene__boat { fill: #f8fafc; }@keyframes path-scene-cloud-drift {to { transform: translateX(18px); }}@keyframes path-scene-sun-pulse {50% { opacity: 1; transform: scale(1.06); }}@keyframes path-scene-shimmer {to { stroke-dashoffset: -66; }}62@media (prefers-reduced-motion: reduce) {.path-scene__sun,.path-scene__cloud,.path-scene__shine { animation: none; }}</style>
Same set of three paths (sun circle, cliff curve, water curve) authored at 0–240 × 0–150 coordinates. Same CSS rule shrinks the SVG to width: 180px. Without viewBox the browser uses the default 300 × 150 user-space coordinate window — the cliff and water paths drawn far to the right at x=240 fall outside, and the visible area only shows a sliver of the scene. With viewBox="0 0 240 150" the entire 240 × 150 authored region is mapped into the 180 × 112 rendered box, so every path scales together and the composition is preserved at any size.
Author the scene in a stable viewBox and size the root SVG with CSS width. Do not rely on fixed width and height alone; without a viewBox, coordinates do not scale as an intentional illustration system.
Use inline SVG when page CSS needs to target inner paths, provide title/desc, or coordinate motion with the rest of the UI. Use an img when the SVG file is self-contained and you want its internal styles isolated from the page.
Yes, especially if many large paths, filters, masks, or gradients repaint at once. Keep ambient motion on a small number of paths, prefer transform or stroke-dashoffset, and avoid animating heavy blur filters over the full canvas.
Same scene, same three foreground shapes (cliff, water, boat) with identical fills and paths. Only the document order differs. With water authored before cliff, the cliff renders on top of the water — the wave line cuts inland and the boat disappears behind the rock. With cliff first, water and boat after, the water sits in front of the coastline and the boat reads as floating on the sea. SVG has no z-index for this case; document order is the composition.
Yes, especially if many large paths, filters, masks, or gradients repaint at once. Keep ambient motion on a small number of paths, prefer transform or stroke-dashoffset, and avoid animating heavy blur filters over the full canvas.
CSS transforms, opacity, stroke-dashoffset, and filter-free color changes are the safest choices. CSS animation of the path d attribute is still not a dependable cross-browser baseline for production scenes.
Pause decorative drift, pulse, shimmer, and looped path drawing. Keep the final artwork visible and keep any semantic title or surrounding copy unchanged so the reduced-motion state remains equivalent.
Scene-scale SVG illustrations draw multiple paths in a choreographed sequence (e.g. ground → building outlines → details → atmospheric flourishes) with per-path animation-delay values. Each path uses its own stroke-dasharray based on its own length so the draws look hand-paced regardless of path complexity.
Reach for scene draws on landing pages, hero sections, and 404 / 500 error pages where a custom illustration carries the page. Skip it for any decorative scene over 30 paths — the cumulative animation budget will block interactive paint and TTI will suffer.
Each <path> in the scene has its own stroke-dasharray set via its own pathLength attribute, so the per-path draw duration normalizes regardless of path complexity. A shared @keyframes draw rule animates stroke-dashoffset to zero. Per-path animation-delay chains the segments in choreographed order — background first, foreground details last. After the draw, an optional fill phase adds color via fill-opacity transitions on path subgroups for an animated coloring-book effect.
Path counts compound quickly — a moderately detailed scene easily reaches 30+ paths, each with its own keyframe instance. Above ~40 simultaneous animations the browser starts dropping frames on mid-range mobile. Use animation-fill-mode: forwards so each path stays in its final state after the draw completes; this also frees the compositor from holding the animation active. If the scene drives the LCP image, content-visibility: auto on the wrapper will defer paint of off-screen scenes, but verify the first scene is not deferred — misconfigured CV breaks LCP metrics.
Add an SVG <title> describing the illustration for screen readers, and set role="img" on the SVG so it is announced as a single image rather than a collection of path nodes. Under prefers-reduced-motion: reduce set allstroke-dashoffset values to zero (skip the animation entirely) and render the final illustration instantly. Verify the final scene meets standalone contrast against its surface.
Scene drawings need a sequence hierarchy. Animate foreground landmarks, supporting lines, and small accents with deliberate delays so the user sees a composition assemble rather than a pile of unrelated strokes.
Keep all paths inside one SVG when possible. Cross-SVG timing is harder to reason about, and viewBox mismatches create alignment bugs. The reduced-motion state should render the complete illustration without the drawing timeline.
