Place text along SVG paths (circles, waves, custom curves) with offset and spacing controls.
Point a block of text at an SVG path and it stops sitting on a straight baseline: it follows the curve. Choose a circle, a wave, or paste your own path data, and the tool writes the path plus a textPath element that rides along it, with start-offset and letter-spacing controls for positioning and spread. Two things surprise most first-time users. First, each glyph is rotated to follow the path's direction, so along the underside of a circle the letters come out upside down. Second, nothing wraps: text longer than the path simply runs off the end.
A concrete input and expected output from the current implementation.
Input
Text: SVG CIRCLE TEXT Path (d attribute): M250,150 A100,100 0 1 1 50,150 A100,100 0 1 1 250,150 Start offset: 50% Letter spacing: 2
Expected output
<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<path id="path1" d="M250,150 A100,100 0 1 1 50,150 A100,100 0 1 1 250,150" fill="none" stroke="#ccc"/>
<text font-size="24" fill="#111">
<textPath href="#path1" startOffset="50%" letter-spacing="2">SVG CIRCLE TEXT</textPath>
</text>
</svg> The two arcs each sweep 180 degrees, so the circle's circumference is 2 x pi x 100, about 628 units, and 50% of that is about 314 units, exactly half: the text starts at (50,150), the leftmost point, diametrically opposite the path start at (250,150). Because sweep flag 1 runs the path clockwise, the letters are upright as they pass over the top of the circle and inverted along the bottom, where the path travels right to left.
The output is two elements: a <path> carrying an id, and a <text> whose <textPath href="#id"> points at it. At render time the browser resolves that reference, measures the path, and lays the glyphs along it. Delete the path or rename its id in an exported file and the text silently vanishes. The text stays live text, not converted to outlines, so the result is editable and font-dependent.
The offset control writes startOffset, measured along the path from its starting point: a plain number is user units of distance, a percentage is relative to the path's total length, so 50% lands exactly halfway no matter how large the path is. The spacing control writes letter-spacing, added to every glyph's advance along the curve. Each glyph rotates to the path's tangent, which is why the text follows the path's direction rather than the page's.
Each letter is rotated so its baseline matches the path's tangent, so wherever the path runs right-to-left the letters flip over, as on the bottom half of a clockwise circle. Reverse the direction of the path data to flip which half is inverted. The SVG 2 spec adds side="right" on textPath for exactly this case, but support varies, so reversing the path is the dependable fix.
Yes. Copy the d attribute, the coordinate string after d= in the other file, into the custom-curve field and the text will follow it. The text runs from the path's start point, so check which end of the curve is the start before you fine-tune: the offset control is how you skip ahead along the path.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.
Preview how screen colors translate to print with CMYK simulation and proofing.
Preview any Google Font at various sizes, weights, and with custom sample text.
Create linear, radial, and conic CSS gradients with a visual editor and code output.
Generate harmonious color palettes from a base color using color theory rules.
Simulate how colors appear to people with various types of color vision deficiency.