Skip to content
Motif
All tracks

Track 7

3D & graphics for UI

SVG, illustration, WebGL and WebGPU — graphics techniques that stay friendly to use.

  1. Lesson 1:
    Beginner15 min

    SVG essentials

    SVG draws in resolution-independent user units inside a viewBox, so one graphic stays crisp at any size. Learn the coordinate system, paths, and currentColor.

  2. Lesson 2:
    Beginner14 min

    Scalable icon systems

    Build icons as a set: a shared grid, one stroke width, currentColor, and an accessible Icon component. One vector beats an icon font at every size.

  3. Lesson 3:
    Advanced16 min

    WebGL & WebGPU

    Past SVG and Canvas 2D lies the GPU: WebGL and WebGPU. Learn the rendering ladder, when each rung is worth it, and the accessibility fallback you always owe.