Draw strokes

Reveal a line with trimEnd. To move the view, use a 3D camera.

@version 4
size: (640, 360)

imagine line
  shape: line
  start: (-120, 0)
  end: (120, 0)
  stroke: "#ffffff"
  strokeWidth: 8
  strokeCap: round
  trimStart: 0
  animate trimEnd from 0 to 1 over 2s

create line

Stroke intervals

trimStart and trimEnd are finite numbers measured along the stroke's local length, before object transforms. Zero is the beginning and one is the end. Values are clamped to that range. An interval whose start is greater than or equal to its end is empty. There is no automatic wrap across the end.

Native lines, rectangles, circles, stars and point paths support trimming. The fill remains complete even when the stroke is empty. Bounds stay conservative and include the full authored geometry; they do not shrink to the revealed ink. strokeCap selects round, butt or square at open endpoints. Native joins remain round. Omitted trim properties keep the existing untrimmed drawing path.

A closed contour includes its closing edge. A full closed contour joins at the seam; a partial contour has caps at its cut ends. Multiple contours consume one cumulative interval in source order, separately for each painted SVG stroke. Moving between contours adds no length and draws no connecting segment.

SVG trimming supports solid strokes with stroke-linejoin="round", retaining SVG cap styles and paint order. Dash patterns, other joins and unsupported SVG paints report errors. Fill paint is independent. Trim on replicated source primitives is not supported; use ordinary instances for draw-on strokes.

Lengths are cached from a polyline with at most 0.025 local-pixel chord error. They approximate curve arc length. At high magnification that approximation can be visible. Each painted stroke is limited to 2048 prepared segments; larger paths report an error rather than being truncated. Rendering cost grows with path complexity and its covered pixels.