SVG from scratch

“SVG from Scratch” title surrounded by shapes: red rounded rectangle, arrow, dashed rectangle, circle marked 0,0 / 50,50 / 100,100, triangle, striped circle, gradient pill, and wavy line.

Carmen Ansio presents SVG not as a file format but as a DOM: every shape is an element, every attribute is a style, that could be selected with CSS, animated with transitions, and targeted with JavaScript. She covers viewBox, the five core shapes (circle, rect, line, polygon, path), stroke-dasharray draw-on animations, <defs>, <clipPath>, and JS helpers like getTotalLength().

carmenansio.com/articles/svg-from-scratch