How stroke-dasharray and dashoffset work together
A pattern of 10 5 alternates ten units of dash with five units of gap. Its period is fifteen units. At offset zero, a 100-unit subpath contains 70 units of dash centerline and 30 units of gap. A positive offset of five starts five units into the first dash; a negative offset of five wraps to position ten, at the beginning of a gap.
A progress ring without circumference guessing
A radius of 50 has circumference 100π, approximately 314.159265359 SVG units. At 75%, the intended visible centerline is 75π, approximately 235.619449019 units. The exported circle sets pathLength="100", stroke-dasharray="75 100" and stroke-dashoffset="0". The first dash covers 75 normalized units; the following 100-unit gap covers the rest of this 100-unit path. Using the percentage directly preserves tiny positive progress that subtraction from 100 can round away.
Use a real path length when working on a path
This tool does not estimate the length of pasted paths. Obtain the length from your vector editor or the SVG element’s getTotalLength() method, then enter it here in SVG user units. Existing pathLength calibration, nested transforms and percentage-based dash values can change the interpretation; keep those assumptions with the exported report.
Frequently asked questions
Are dasharray percentages percentages of my path?
No. SVG dasharray percentages use the normalized viewport diagonal. This calculator accepts numeric SVG user units for manual patterns. The progress-ring export instead uses pathLength="100" and numeric normalized lengths, so its progress input represents a percentage of the circle centerline.
Why is an odd-length dash list repeated?
SVG repeats an odd list once to create an even number of alternating dash and gap entries. For example, 5 3 2 becomes 5 3 2 5 3 2. All-zero lists behave as a solid stroke; any negative value is invalid.
What do positive and negative dashoffset values mean?
The offset is the distance into the repeated pattern where a subpath starts. Equivalent offsets differ by a whole pattern period. Negative values wrap into the same period. The SVG export uses the calculated normalized offset.
Does the coverage percentage measure painted pixels?
No. It measures the lengths of dash centerlines over one subpath. Round and square caps, stroke width, joins, markers and overlaps can change painted coverage. Pattern previews use butt caps; ring progress is also a centerline percentage.
Why does the 0% ring contain no progress circle?
A zero-length dash can leave a visible dot with round caps. The export omits the progress circle at 0%. At 100% it uses a solid circle, avoiding a dashed seam.
Can I upload or paste an arbitrary SVG path?
Not here. Enter a measured path length or use the circle geometry. The previews and SVG downloads contain only validated numeric values and built-in path or circle shapes. Supplied artwork, scripts and resources are never read or executed.
What are the calculation and preview limits?
Use up to 32 nonnegative dash values. Nonzero lengths must be at least 0.000001; manual path length and offset magnitude are at most 1,000,000. Dash interval arithmetic uses bounded scaled integers before numeric output. A long pattern preview shows at most twelve periods; the calculated coverage still uses the whole entered path.
References: SVG 2 stroke dashing, dasharray percentage units and pathLength calibration.