Squircle SVG

A squircle SVG is a vector superellipse you can scale to any size without blur. It is the most portable form of a squircle — drop it into Figma, Sketch, your code, or use it as a mask or background. This generator builds the exact path and lets you download it as an .svg.

Generate & download SVG →

Set the shape, then click Download .svg — or copy the SVG markup straight into your file.

Why use the SVG version?

Unlike a CSS clip-path, which is tied to a fixed pixel size, an SVG carries a viewBox and scales fluidly. That makes it ideal for responsive layouts, retina assets, design tools, and anywhere you need one shape at many sizes. Because it is vector, it stays crisp at 16px or 1024px.

The markup

The generator produces a clean, single-path SVG like this:

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240">
  <path d="M 240.00 120.00 L … Z" fill="#5b8cff"/>
</svg>

One path, no extra nodes — easy to recolor (change fill), restyle, or animate.

How to use it

In Figma / Sketch

Download the .svg and drag it onto the canvas, or paste the markup. Use it as a shape layer or a mask over an image. See the Figma squircle guide for the masking workflow.

In code (inline)

Paste the SVG directly into your HTML for full control, or reference it as an image: <img src="squircle.svg">.

As a CSS background or mask

.box {
  -webkit-mask: url(squircle.svg) center/contain no-repeat;
          mask: url(squircle.svg) center/contain no-repeat;
}

This masks any content to the squircle and, unlike a pixel clip-path, scales with the element.

SVG vs clip-path — which to use?

Need fluid/responsive scaling, design-tool asset, or a mask? Use the SVG.
Clipping a single fixed-size element in CSS? The clip-path is simpler.

FAQ

Does the SVG scale without losing quality?

Yes — it is vector with a viewBox, so it is crisp at any size.

How do I change the color?

Edit the fill attribute on the path, or set it in the generator before downloading.

Can I use it as an image mask?

Yes — reference it via CSS mask / -webkit-mask to clip any element to the squircle.