Icons, SVG and Diagrams

Create and animate clean SVG, and decide when a diagram helps.

2 modules · 7 episodes · 1 h0/7

Season 1

SVG and icons

Create, clean and animate SVG icons and illustrations.

11. An SVG is markup, not a picture7 minSpot the problems in a generated SVG and get an agent to return a clean one that scales, recolors with the theme and can be read by a screen reader. Read Watch
22. Making SVG move8 minChoose the right animation engine for where an SVG lives, draw a line on with two CSS properties, and stop rotations from orbiting the corner. Read Watch
33. Morphing shapes, and when not to7 minAuthor two paths that really morph into each other, recognise the ones that never will, and know when a simple icon swap is the better answer. Read Watch
44. Stickers and mascots9 minBuild an isometric sticker that reads as a made object, and turn a flat animated clip into one editable, recolorable SVG. Read Watch

Season 2

Decide whether a picture helps, then draw one that shows the real mechanism.

11. Should you draw it?6 minDecide whether a picture beats a sentence or a table, then pick where the picture should live by who touches it next. Read Watch
22. Drawing the real mechanism8 minDraw a figure that shows how the thing actually works, with one accent, right-angle connectors, readable labels and an SVG a screen reader can describe. Read Watch
33. Editable canvases6 minBuild a whiteboard your team can keep editing, with arrows that stay attached, cards that hold their own words, and an agent that follows comments. Read Watch