Plus UI Design · Practical guides

Create and export an SVG squircle

Adjust curvature, rotation and appearance to make a shape that fits your composition.

Compare curvature deliberately

Start with the default shape and move the curvature control gradually. Compare a few values at the intended size instead of choosing only from a large preview. A squircle has a different corner transition from a conventional rounded rectangle.

Set the appearance

Choose a fill, adjust the available stroke controls and rotate the shape if the composition calls for it. Keep an unrotated reference nearby when comparing shapes. Check the result against the background on which it will be used.

Export and inspect

Use Download SVG or the code controls to take the result into your design or website. Preserve its viewBox and aspect ratio. Open the exported file at the destination size before treating the preview as the finished asset.