Search for a command to run...
Articles tagged with #html
The Core Insight Same rules apply: Must use same element (<path>) Must have same number of commands Must have same command types in same order You're animating the arguments of each command How It Works Think of path commands as having "slots":...
Core Principle Morph = animate attributes of the SAME element, not between different elements <!-- ❌ Wrong: Different elements --> <circle r="25" /> <rect width="50" height="50" /> <!-- ✅ Right: Same element, animate attributes --> <rect width="50" ...
Core Concept offset-path = places any element along a curved path (like a train on tracks) offset-distance = controls position along the path (0% = start, 100% = end) Basic Syntax .element { offset-path: path("M0 0 Q100 50 200 0"); /* curved path *...
Core Concepts Circumference What it is: The distance around the outside of a circle Formula: circumference = 2 × π × radius Example: Circle with r="6" → 2 × 3.14159 × 6 = 37.7px stroke-dasharray vs stroke-dashoffset dasharray = WHAT the pattern look...
What is viewBox Animation? viewBox = your camera lens <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="20" /> </svg> The circle is always at coordinate (50,50) with radius 20. The circle never moves. But when you animate viewBox, you're chan...
Core Concepts Coordinate vs Display Size Coordinate size (viewBox): The "drawing paper" dimensions -> viewBox="0 0 100 100" Display size (width/height): How many pixels it takes on screen -> width="200px" Key insight: Shapes use viewBox coordinate...
