Built and fact-checked by the DocNectar team — see our editorial standards
Key Features
Instant Calculation
Get accurate results in real time with our optimized algorithm.
Mobile Friendly
Fully responsive design. Works on all devices & screen sizes.
Privacy Focused
Your data stays on your device. We don't store any inputs.
100% Free
No hidden costs. This tool is completely free forever.
Spiral shapes make an eye-catching decorative element or loading/motion graphic. This tool generates a mathematically precise Archimedean spiral as ready-to-use SVG markup — no design software required.
How it works
Set the number of turns, a starting radius, how much the radius grows with each full turn, and a stroke color. The tool applies the Archimedean spiral formula r(θ) = a + bθ, samples points evenly along the curve, and connects them into a single SVG `<polyline>`.
- Enter number of turns.
- Enter start radius (px).
- Enter radius growth per turn (px).
- Enter stroke color.
- Click Calculate to see your results.
Examples
A tightly-wound spiral
A small radius growth per turn (relative to the start radius) produces a tightly-wound spiral with many closely-spaced loops; a larger growth rate spaces the loops further apart for a looser, more open spiral.
Who should use it
- Decorative background elements and loading/motion graphics.
- Quick placeholder or prototype graphics.
Industry applications
- Web design and front-end development
- UI/UX prototyping and animation design
Advantages
- Instant, copy-paste-ready SVG markup — no design software needed.
- Fully deterministic and easy to regenerate with tweaked parameters.
Limitations
- Produces a single-color stroke outline — filled or multi-color spiral effects need manual editing afterward.
Common mistakes to avoid
- Setting too many turns with too fine a growth rate, producing an extremely large overall SVG that's hard to fit on a page without scaling down.
- Forgetting to set matching `width`/`height` on the surrounding container, causing unexpected scaling.
Best practices
- Preview a few different turn counts and growth rates to find the spiral density that looks right for your use case.
- Use the SVG's built-in `viewBox` to let it scale responsively in your page layout.
Tips
- A tightly-wound spiral (small growth rate) works well as a subtle decorative texture; a loose, open spiral works better as a bold focal graphic.