Drawing Fundamentals

Drawing fundamentals provide foundational knowledge for AI agents that need to construct visual elements from scratch — SVG path syntax, symbol design, canvas coordinate math, and composition principles.

Topics covered

SVG Path Syntax

Understanding SVG path commands for constructing vector shapes:

• Move/Line — M, L, H, V for straight-line geometry
• Curves — C (cubic Bezier), Q (quadratic Bezier), S, T for smooth curves
• Arcs — A for elliptical arc segments
• Close — Z to close the current subpath
• Relative — lowercase commands (m, l, c) for relative coordinates

load_skill({ skill: "drawing-fundamentals" })

Symbol Design

Principles for creating recognizable symbols at small scale:

• Silhouette test — a symbol must be identifiable as a filled silhouette at 32px
• 3 key features — identify the 3 features that make the subject recognizable
• Fill-only paths — stroke-only paths are invisible at small gallery scale
• ViewBox convention — design within 0 0 100 100 coordinate space
• Reference-first — always study real references before drawing paths

Canvas Coordinate Math

Essential math for positioning and transforming elements:

• Coordinate system — origin at top-left, Y increases downward
• Normalization — map values to 0-1 range for resolution independence
• Golden ratio — 1.618033... for natural proportions
• Polar coordinates — (r, θ) → (r*cos(θ), r*sin(θ)) for circular layouts
• Rotation — 2D rotation matrix for rotating points around a center

Composition Principles

Structural composition for generative art:

• Focal hierarchy — primary, secondary, tertiary focus areas
• Visual flow — guide the eye through the composition
• Negative space — empty areas are as important as filled areas
• Edge treatment — how elements relate to the canvas boundary
• Scale variation — mix of large and small elements for visual interest

Related

• Composition skills — detailed composition skills
• Symbols plugin — using symbols in design layers
• Construction plugin — 3D form construction guides