Command Palette

Search for a command to run...

Hectal
Scene
13
Take
01
Level
Intermediate
Runtime
~2 h

SVG Animation

Turn, draw, follow and morph vector shapes: the transform-origin trap, line drawing, motion along a path, morphing, animated icons, and the logo and route of the launch page.

6 shots13 live examples5 dailies
0/6 · 0%

SVG is a drawing the browser keeps as shapes, so every shape can move, turn, change colour or be drawn line by line. This phase teaches what CSS can animate inside an SVG, and the traps that catch everyone once: the shape that swings around the wrong point, the dash trick that leaves a dot, the path that jumps instead of morphing.

You measure each trick on the Motion Timeline. You draw a route with stroke-dashoffset, send an element along it with offset-path, morph one shape into another, and build icons that stay readable for screen readers and calm for people who ask for less motion. SMIL, the old animation language built into SVG, gets an honest place: where it still fits and what it cannot do.

At the end the Lumen launch page gets its two SVG pieces: a logo that draws itself once, and the Ardenvale test route that draws as you scroll to it. Both stand still, fully drawn, for reduced motion.

▶ Roll: 13.1

Scene 13 · the brief from Lumen

Mei, motion designer at Lumen Bikes

“I drew the logo and the test route as vectors. Please do not turn them into videos: I want them to draw themselves, and stay sharp on every screen.”

Mei hands Kofi two small files: logo.svg, a headlight ring with a bolt inside, and route.svg, the line of the Ardenvale test route from the harbour to the hill. Tomás has one wish: when the page opens, the logo should draw itself, like a signature, once.

Kofi has seen this go wrong before. His first try at turning a square in an SVG sent it flying off the screen. The line trick he copied from a blog left a stray dot on a rounded stroke. And the menu icon he built had no name for Ravi's screen reader.

Ravi's rule stands: with reduced motion the logo and the route must be there, finished. In this phase you learn how SVG motion really works, measure each trick, and give the launch page a logo that draws once and a route that draws as the reader scrolls to it.

In this scene

You will learn

  • Turn and scale SVG shapes around the right point, and know what <use> copies can and cannot do
  • Draw a line with stroke-dasharray, stroke-dashoffset and pathLength, without the dot and the gap traps
  • Move an element along a path with offset-path, and morph shapes with the d property
  • Build animated icons with a name for screen readers, and say where SMIL still fits
  • Add the animated logo and the scroll-drawn route to the launch page

You write code in

In your lumen-motion project (npm run dev) and in the editor on this page

Files you touch

  • src/assets/svg/logo.svg
  • src/assets/svg/route.svg
  • index.html
  • src/styles/components.css
  • src/js/main.js

Shot list · 6 shots, widths by reading time

13.113.213.313.413.513.6
  1. 13.1SVG for MotionAn SVG is a drawing with its own coordinates. CSS can animate its transforms, colours and strokes, but a shape turns around the top-left corner of the drawing unless you set transform-box: fill-box or a pivot point. 22 min 2 live
  2. 13.2Drawing LinesA line draws itself when its stroke is one dash as long as the path and the dash is slid into view with stroke-dashoffset. pathLength="1" makes that length 1 for every path, and three traps (round caps, gaps in the path, dashed strokes) need known fixes. 25 min 3 live
  3. 13.3Motion Along a Pathoffset-path gives an element a track, offset-distance says how far along it is, and offset-rotate turns it to face the way it travels. The path's numbers are in CSS pixels for an HTML element and in user units for an SVG shape. 22 min 2 live
  4. 13.4Morphing ShapesCSS can animate a path's d property, but only between two paths with the same commands in the same order. Anything else does not blend: it jumps at the halfway point. To morph any two shapes, resample both into the same number of points first. 22 min 2 live
  5. 13.5Animated Icons and SMILAn animated icon is a small SVG that changes with a state: a menu becomes a cross, a tick draws. The icon must keep a name for screen readers and stand still for reduced motion. SMIL, SVG's own animation language, still fits where CSS cannot reach, but it is not on the timeline. 23 min 3 live
  6. 13.6Build: The Animated Logo and Route LinebuildAdd logo.svg and route.svg to the launch page, inline. The logo draws itself once on load, the Ardenvale test route draws as you scroll to it, and with reduced motion both are simply there, finished. 24 min 1 live

Dailies · 5 checked exercises

A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.

D01Turn it on the spotThe blue square should spin forever around its own centre. Today it swings round the top-left corner of the drawing and leaves the picture.BeginnerD02Draw the routeThe route line is just there. Make it draw itself once on load, in 1000 ms, linear, using pathLength="1".BeginnerD03Ride the routeA small orange circle sits at the corner of the drawing. Make it ride the route once in 1000 ms with linear, using offset-path and offset-distance.IntermediateD04A menu icon with a nameThe menu button works with a mouse but has no name and no state. Give it the name Menu, hide the picture from screen readers, and toggle aria-expanded on click so the bars become a cross.IntermediateD05The logo draws once (launch page)Part of the launch page: the header logo is a ring and a bolt, each one dash as long as its path. Make the ring draw in 700 ms, then the bolt in 500 ms after a 350 ms delay, once, on load, with ease-out.Intermediate