SVG thinking

This is in the works! Would you like to help flesh it out? Let's do it!

You're on a small screen! Some modules like CodePen examples will behave differently here. You'll need to toggle through their tabs to see all the code. For the best experience, consider using a bigger screen.

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

(for some reason, a default SVG will have 300×150 viewBox)

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Make sure you’re really really clear on how the viewBox works. It’s your cropped view – of an infinite canvas.

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

For simple things, it’s fun to know how to write them by hand.

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.