Documentation
Playground GitHub

<Path>

SVG path data, drawn.

<Path d={curve} viewBox="0 0 100 60" stroke="primary" strokeWidth={2} class="w-full h-120" />
<Path d="M10,10 L90,10 L50,80 Z" fill="accent" cap="round" dash={[6, 4]} drawn={progress} />

Why this exists

Compose can draw a path, but has no declarative way to reach it. <Path> is that primitive, with SVG's grammar. Path data is text, so it crosses any boundary as one value: a screen's native module can compute four hundred points and return a String, and the markup draws it.

Props

PropMeaning
dSVG path data, as SVG writes it
viewBox"minX minY width height": the path's own coordinate space, mapped onto the element
strokeA color, in the color grammar
fillA color; "none" draws no fill
strokeWidthIn dp, and not scaled by viewBox
capbutt, round or square
joinmiter, round or bevel
dashA list of on/off lengths: dash={[6, 4]}
drawnThe fraction of the path drawn, 0 to 1
stretchFill the element on both axes instead of keeping the aspect ratio

cap, join and dash are SVG's stroke-linecap, stroke-linejoin and stroke-dasharray, spelled without hyphens because a prop is not hyphenated. An unknown cap or join is a build error naming SVG's three.

The prop that draws progress is drawn, not pathLength. In SVG, pathLength is the author's declared total length, used to calibrate dashes; a 0 to 1 progress under that name would be a redefinition. The language reference currently lists pathLength; the compiler accepts drawn.

Stroke or fill

A path with no stroke and no fill draws nothing, so it is a build error. stroke="none" and fill="none" count as absent, as in SVG, so a path that sets both to none is the same error.

The stroke is not scaled

viewBox transforms the path's geometry, not the canvas. A canvas scale would multiply the stroke width, so a chart 300dp wide and 60dp tall would draw its line thicker horizontally than vertically. With the geometry transformed, strokeWidth={2} means two dp. Half the stroke falls outside the path's own bounds, so the path is inset by half the stroke and a line that touches its maximum is not clipped.

Why there is no <Chart>

A chart is a component with opinions: axes, legends, interaction. A path is a primitive. With a path, every chart, dial, ring and sparkline is markup in the app that wants one, and the app decides what it looks like.

Try it

Path.wh 
<Path
  d="M0,50 L20,30 L40,40 L60,10 L80,25 L100,5"
  viewBox="0 0 100 60"
  stroke="primary"
  strokeWidth={2}
  cap="round"
  join="round"
  class="w-full h-120"
/>
Kotlin waiting
Scroll into view to compile.

d is SVG path data. viewBox maps the path's own coordinates onto the element; strokeWidth stays in dp whatever the viewBox is.

See Also