logo
Hello World!

Squircle SVG Generator

Generate a squircle svg by adjusting size and roundness. Use the squircle instantly in your designs!

Result:

M 0 150 C 0 15.99 10.64 0 125 0 C 239.36 0 250 15.99 250 150 C 250 284.01 239.36 300 125 300 C 10.64 300 0 284.01 0 150 Z
M 0 150 C 0 15.99 10.64 0 125 0 C 239.36 0 250 15.99 250 150 C 250 284.01 239.36 300 125 300 C 10.64 300 0 284.01 0 150 Z
svg
<svg width="250" height="300" viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M 0 150 C 0 15.99 10.64 0 125 0 C 239.36 0 250 15.99 250 150 C 250 284.01 239.36 300 125 300 C 10.64 300 0 284.01 0 150 Z" 
    fill="none" 
  />
</svg>
<svg width="250" height="300" viewBox="0 0 250 300" xmlns="http://www.w3.org/2000/svg">
  <path 
    d="M 0 150 C 0 15.99 10.64 0 125 0 C 239.36 0 250 15.99 250 150 C 250 284.01 239.36 300 125 300 C 10.64 300 0 284.01 0 150 Z" 
    fill="none" 
  />
</svg>

  1. Paste the SVG in Figma, Sketch, or any other design tool.

or

  1. Use the SVG directly in your HTML.
html
<svg 
  width="200px" 
  height="200px" 
  viewBox="0 0 200 200" 
  xmlns="http://www.w3.org/2000/svg"
>
  <path 
    d="M 0 100 C 0 9.62 9.62 0 100 0 C 190.38 0 200 9.62 200 100 C 200 190.38 190.38 200 100 200 C 9.62 200 0 190.38 0 100 Z" 
    fill="#228899" 
  />
</svg>

<svg 
  width="200px" 
  height="200px" 
  viewBox="0 0 200 200" 
  xmlns="http://www.w3.org/2000/svg"
>
  <path 
    d="M 0 100 C 0 9.62 9.62 0 100 0 C 190.38 0 200 9.62 200 100 C 200 190.38 190.38 200 100 200 C 9.62 200 0 190.38 0 100 Z" 
    fill="#228899" 
  />
</svg>

or

  1. Copy the path string and use it as a css property clip-path for your element.
html
<img 
  class="squircle"
  src="http://picsum.photos/200/200" 
  width="200px" 
  height="200px" 
/>

<img 
  class="squircle"
  src="http://picsum.photos/200/200" 
  width="200px" 
  height="200px" 
/>
css
.squircle {
  clip-path: path("M 0 100 C 0 9.62 9.62 0 100 0 C 190.38 0 200 9.62 200 100 C 200 190.38 190.38 200 100 200 C 9.62 200 0 190.38 0 100 Z");
}

.squircle {
  clip-path: path("M 0 100 C 0 9.62 9.62 0 100 0 C 190.38 0 200 9.62 200 100 C 200 190.38 190.38 200 100 200 C 9.62 200 0 190.38 0 100 Z");
}
squircle image

If you want to learn how the squircle function works from the inside out or want to use it for responsive elements in your React project, check out my article:

©2025 BatStack