← Back to miito.dev

Digital Garden

October 21
Garden HubAutomotiveTypeScriptTestingSVGSQLSecurityReactPerformanceNode.jsModdingJavaScriptGame DevDevOpsDesignCSSCommunication
miito.dev
© Brian Dinh (miito.dev)
✕
✕
§ GARDEN · SVG · CLASS OPEN
NODE FILE · ENTRY

Mastering SVG Path Commands

FILED UNDER · SVG
①Read
②Meta

Demystifying the d attribute — M, L, C, A and the invisible coordinate system behind every vector.

The SVG path element's d attribute is a mini programming language. Each letter is a command, each number is a coordinate. Once you internalize the grammar, you can read and write vector shapes by hand — which makes procedural generation, animation, and debugging vastly easier.

The Core Commands

M moves the pen. L draws a line. C draws a cubic Bézier curve with two control points. A draws an elliptical arc. Z closes the path. Lowercase versions use relative coordinates. That's the entire alphabet you need for 90% of SVG work.

DTNRWORKSHOP ARMAMENTSSN 2012.OTT.0176