logo
Hello World!

Generator SVG Squircle

Wygeneruj svg squircle ustawiając dowolne wymiary i poziom zaokrąglenia. Użyj squircle w swoich projektach!

Wynik:

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. Wklej SVG w Figmie, Sketch lub dowolnym innym narzędziu do projektowania.

lub

  1. Użyj SVG bezpośrednio w swoim 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>

lub

  1. Skopiuj ścieżkę i użyj jej jako właściwości css clip-path dla swojego elementu.
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

Jeśli chcesz dowiedzieć się, jak funkcja squircle działa od podszewki lub chcesz użyć jej dla responsywnych elementów w swoim projekcie React, sprawdź mój artykuł:

©2025 BatStack