Lines that draw themselves

A signature draws itself, one stroke after another. pathLength="1" makes a path measure its own length as 1, so stroke-dasharray: 1 gives it one dash as long as the path and a gap as long again. A strokeDashoffset track from 1 to 0 shifts the dash along the path, so the stroke appears from start to end.

<div id="stage" data-composition-id="sign"     data-start="0" data-duration="3" data-width="1280" data-height="720" data-fps="30">
    <div class="layer" data-component="sign" data-start="0" data-duration="3">
        <svg class="layer" viewBox="0 0 1280 720" width="1280" height="720">
            <path class="stroke" pathLength="1" d="M 200 400 C 300 200 450 200 520 380" data-bind-style="s1"></path>
            <path class="stroke" pathLength="1" d="M 560 380 L 640 220 L 720 380" data-bind-style="s2"></path>
            <path class="stroke" pathLength="1" d="M 760 300 C 860 200 980 420 1080 300" data-bind-style="s3"></path>
        </svg>
    </div>
</div>

const { scene } = wildflower.kinetic;

const draw = (from, to) => ({ strokeDashoffset: { at: [from, to], to: [1, 0], ease: 'power2.inOut' } });

scene('sign', {
    keyframes: { s1: draw(0.2, 1.2), s2: draw(0.8, 1.8), s3: draw(1.4, 2.4) },
});

html, body { margin: 0; background: #0a0b10; }

#stage { position: relative; overflow: hidden; background: #14122a; }

.layer { position: absolute; inset: 0; }

.stroke { fill: none; stroke: #f5c542; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; }

[data-composition-id]:not([data-kinetic-ready]) { visibility: hidden; }

A path with several subpaths draws them all at once, at the same rate, so strokes that draw in turn are separate paths with staggered tracks. pathLength works the same way on circle, rect, ellipse, line and polygon.

With stroke-linecap: round, the first frame after the offset leaves 1 shows a dot at the start of the stroke, which is the round cap.

The dash draws a stroke only. For a fill drawn partway, such as a band, or for the part as a shape a canvas or three.js draws, use trimPath().

A closed shape, such as a rect, a polygon, a path ending in Z or a shape(), meets its own start when fully drawn. The dashed stroke has two ends there and no join, so the default flat ends leave a notch, even once the shape is complete.

• Round caps with round joins fill the corner as the stroke arrives, at any angle.
• Square caps do the same for a shape whose corners are right angles, such as a rectangle, and leave its corners sharp.

.box  { fill: none; stroke: #ff7a59; stroke-width: 10; stroke-dasharray: 1; stroke-linecap: square; }
.star { fill: none; stroke: #ff7a59; stroke-width: 10; stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; }