SVG Tutorials
A series of tutorials, examples, and exercises exploring the different features and uses of SVG images.
- Drawing
To Do:
- Drawing
- SVG Typography
- SVG Sprites
- Using Symbols, Lines, and Markers: Build a Flow Chart
- Painting
- Different Strokes: currentColor, non-scaling-stroke, dash-array, linecaps
- Making Forms (Using Gradients)
- Patterns (Escher, The Memphis Style)
- Compositing
- Word Art (Glitch, Neon, ...)
- Clouds (Turbulence)
- Lighting Effects
- Making Reference Files (masks.svg, clips.svg, filters.svg, etc.)
- Animating
- Animating the Navigation Icon
- Animated Lines
- Animated Logo
- SMIL
- Animating to a Path
- An SVG Orrery
- Programming
- Programming a Game (Boop-a-Mole)
- Generative Art
- Particles in SVG
SVG Solutions
- SVG Favicons
- CSS Variables and SVG Icons
- Charts
- Gauge and Bullet Graphs
- Bar Graph
- Dot Plot
- Line Graph and Spark Lines
- Scatter Plot
- Box Plot
- Heat Map
- Circle Pack and Tree Maps
- SVG in Canvas
- Using Illustrator for Drawing SVGs
