Fork me on GitHub

Project Notes

SVG Animation

All about SVG for web design and animation.

Notes

Interactive Web Animation with SVG

Interactive web animation with SVG by Cassie Evans CSSCAMP 2019:

clip

My notes from the presentation:

  • create initial artwork, or find existing e.g. with freepik
  • plan out animation with individual artboards/key frames
  • collect all bits or animation into one SVG
  • clean up the SVG code e.g. with svgomg
  • start working on animations - codepen is a good place for this
  • CSS transforms - simple place to start (some browser compatibility issues)
  • animation libraries for more complex
Library Transforms Timelines Size License
anime.js √ √ 6kb MIT
greensock √ √ 9-36kb Mostly Free
velocity.js √ √ 15kb MIT

A Little Test

Original artwork: kraken.svg - made by Freepik.

Step 1: Simple CSS Animation

The kraken.svg only has two paths nicely separated - the eyes, and everything else. So a simple animation task (without having to rip apart the SVG) would be to move the eyes.

The kraken-css-anim.html is an example of doing this with simple transform keyframes. This is a snapshot of a simple coden here.

Note: there are many ways of embedding the SVG from file, but it seem all the standard options do not allow the loaded SGV paths to then be manipulated with CSS. Hence the example has the SVG image inlined.

./kraken-css-anim.html

SVG Paths

See SVG Paths spec

Example:

<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />

All instructions are expressed as one character:

  • M (absolute), m (relative) - moveto - Start a new sub-path at the given (x,y) coordinates
  • Z or z - closepath - ends the current subpath by connecting it back to its initial point
  • L (absolute), l (relative) - lineto - Draw a line from the current point to the given (x,y) coordinate
  • H (absolute), h (relative) - lineto - Draw a horizontal line from the current point to the given (x) coordinate
  • V (absolute), v (relative) - lineto - Draw a vertical line from the current point to the given (y) coordinate
  • C (absolute) c (relative) - curveto - (x1 y1 x2 y2 x y)+ - cubic Bézier curve
  • S (absolute) s (relative) - shorthand/smooth curveto - (x2 y2 x y)+ - cubic Bézier curve
  • Q (absolute) q (relative) - quadratic Bézier curveto (x1 y1 x y)+ Draws a quadratic Bézier curve
  • T (absolute) t (relative) - Shorthand/smooth quadratic Bézier curveto (x y)+ Draws a quadratic Bézier curve
  • A (absolute) a (relative) - elliptical arc (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ Draws an elliptical arc

Credits and References

About LCK#86 CSSSVG
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.