OneTaskBy Tim King · Updated
SVG Path Generator
Path Data for Rounded Rectangles, Stars, Arrows and More
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the SVG Path Generator works
This SVG path generator writes path data for common shapes. Choose a shape, set its size and a parameter or two, and the path data appears with a preview
drawn on the spot. The code panel gives the bare d string for pasting into an existing
<path> and a complete SVG element with a matching viewBox for using on its own.
SVG path generator: getting a good result
Most SVG shapes can be written as <rect>, <circle> or <polygon>, but a <path> is what
you need when the shape will be animated, morphed, used as a clip-path, combined into a
single element with others, or edited by hand. Writing the arc and curve commands correctly
from memory is the hard part, and this generator does it.
Rounded rectangle. Four straight edges joined by quarter-circle arcs of the corner radius,
which is capped at half the shorter side so the shape never folds over itself. A radius of
zero gives a plain rectangle. Because it is a path, the corner radius can be animated between
two values, which a <rect> cannot do in all browsers.
Ellipse and polygon. The ellipse is two half arcs, the form needed for a <path> that
draws a circle, since a single arc cannot start and end at the same point. The regular polygon
places its points evenly around an ellipse that fills the width and height, with the first
point at the top; three sides is a triangle, six a hexagon, and sixty is close enough to a
circle to use as one.
Star. Alternates outer points with inner points at a fraction of the radius set by the inner ratio. Fifty percent gives a classic five-pointed star; smaller ratios make sharper spikes and larger ones approach the polygon. Change the point count for four-point sparkles or eight-point badges.
Arrow. A shaft ending in a triangular head. The head size sets how far the head extends
back from the tip, and the shaft thickness is a percentage of the height. Rotate it with a
transform for other directions; the path always points right.
Heart and speech bubble. The heart is two mirrored cubic curves scaled to the box. The
speech bubble is a rounded rectangle with a tail on the bottom left, whose height is set by
the radius field; flip it with transform="scale(-1,1)" for a tail on the right.
Using the output. The preview draws a dashed outline of the width and height box so you
can see how the shape fills it. Paste the d string into a <path> in an existing drawing,
or take the whole SVG. The path visualizer nearby plots every anchor and control point if you
want to edit the result by hand.
FAQ
Why does my path look distorted?
The shape fills the width and height you gave, so a star in a 120 by 80 box is squashed. Give equal width and height for symmetric shapes, or accept the stretch when you actually want an oval or a wide star.
Can I use this for clip-path?
Yes. Use the shape with clip-path: path("…") in CSS, or wrap the path in a <clipPath>
element. Note that CSS path() uses pixel coordinates, so generate the shape at the size of
the element you are clipping, or use the clip-path generator with polygon percentages.
How do I get a triangle or hexagon?
Choose regular polygon and set the sides to 3 or 6. The first point is always at the top; add
transform="rotate(30)" around the centre for a flat-topped hexagon.
Are the numbers absolute or relative commands?
Absolute, with uppercase commands, which are easier to read and edit by hand. The SVG optimizer will convert them to relative form and shorten the numbers if file size matters.
See also: all SVG tools, Images, Audio, Video & Screen, PDF, Simulations & Screensavers, Generative Art, Chart Makers, 3D Model Viewers, Drawing Pads, Mockups & 3D Making, Diagram Makers, 3D Science, Tracker Music.
Related tools
SVG Sprite Generator
Merge SVG icons into one symbol sprite with use snippets.
0–60 Calculator
0–60 mph, 0–100 km/h and quarter mile from power and weight.
1920s Name Generator
Jazz Age names, from Chester Vanderbeck III to Millie Kowalski the flapper.
1940s Name Generator
Popular girls' and boys' names from the 1940s, US and UK.
1950s Name Generator
Post-war names from Linda Sue Patterson to Gary Kowalczyk and Brenda Whitfield.