Generator wielokątów SVG
Generuj wielokąty SVG: trójkąty, sześciokąty, gwiazdy, kształty nieregularne. Ustaw liczbę wierzchołków, promień, obrót. Kopiuj kod SVG lub pobierz plik. Bezpłatnie.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Podgląd na żywo / Live Preview
Liczba punktów
Boki / ramiona
wg wybranego trybu generowania
Promień
min(szerokość, wysokość)/2 − padding
Pole
Obwód
Rozmiar SVG
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" aria-labelledby="t-title t-desc" role="img"> <title id="t-title">Polygon</title> <desc id="t-desc">Generated with Toolsti SVG Polygon Generator</desc> <polygon points="256,32 449.99,144 449.99,368 256,480 62.01,368 62.01,144" fill="#FA8617" stroke="#111827" stroke-width="8" stroke-linejoin="round" stroke-linecap="round" /> </svg>
CSS clip-path
clip-path: polygon(50% 6.25%, 87.89% 28.13%, 87.89% 71.88%, 50% 93.75%, 12.11% 71.88%, 12.11% 28.13%);
Punkty (points) i CSV
256,32 449.99,144 449.99,368 256,480 62.01,368 62.01,144
Opis trybów odpowiada 1:1 kodowi silnika. Przykłady w tabeli generuje ten sam silnik, który zasila podgląd (ustawienia domyślne: płótno 512 × 512, padding 32, precyzja 2, obrót −90°).
| Tryb | Wzór punktów (z kodu) |
|---|---|
| Foremny | n wierzchołków na okręgu o środku (szerokość/2, wysokość/2) i promieniu r = min(szerokość, wysokość)/2 − padding; kąt i-tego punktu = obrót + 2π·i/n |
| Gwiazda | 2 × liczba ramion wierzchołków co kąt 2π/(2·ramiona); na przemian promień zewnętrzny r i wewnętrzny r × proporcja wewnętrzna |
| Losowy | ziarno uruchamia mt_srand(); kąty rozstawiane co 2π/n z lekkim rozproszeniem (jitter), promień losowany w zakresie zależnym od jittera |
| Własne punkty | pary „x,y” z pola tekstowego; przy włączonej normalizacji przeskalowane do płótna z zachowaniem paddingu i proporcji |
| Liczba boków | Pierwsze punkty (x,y …) |
|---|---|
| n = 3 (trójkąt) | 256,32 449.99,368 62.01,368 … (3 punktów łącznie) |
| n = 6 (sześciokąt) | 256,32 449.99,144 449.99,368 … (6 punktów łącznie) |
| n = 12 (dwunastokąt) | 256,32 368,62.01 449.99,144 … (12 punktów łącznie) |
| Cecha | Foremny (tryb Regular) | Gwiazda (tryb Star) |
|---|---|---|
| Wierzchołki | n boków = n wierzchołków na jednym promieniu | 2 × ramiona wierzchołków, naprzemiennie promień zewnętrzny i wewnętrzny |
| Kształt | zawsze wielokąt wypukły — trójkąt, kwadrat, sześciokąt, … | przy małej proporcji wewnętrznej gwiazda, przy proporcji bliskiej 1 prawie foremny |
| Parametry w formularzu | Liczba boków (3–30) + Obrót | Liczba ramion (3–30) + Proporcja wewnętrzna (0,05–0,95) + Obrót |
Kolejne punkty powstają przez zwiększanie kąta o 2π/n — dlatego wielokąt zawsze jest domknięty i wypukły, a lista points nadaje się bezpośrednio do atrybutu <polygon points="…"> oraz do clip-path: polygon(…) w CSS.
Warto wiedzieć — wielokąty w SVG i CSS
Matematyka za podglądem
Każdy wierzchołek to (środek + promień × cos/sin kąta), gdzie kąt rośnie co 2π/n. Obrót −90° sprawia, że wielokąt startuje „w górę” zamiast w prawo — tak ustawia się go domyślnie w ikonach i diagramach. Silnik przycina współrzędne do granic płótna.
Kiedy gwiazda zamiast foremnego
Gwiazda powstaje z tego samego okręgu: co drugi wierzchołek ląduje bliżej środka (promień × proporcja wewnętrzna). Proporcja 0,45–0,5 daje klasyczną pięcioramienną gwiazdę, powyżej 0,8 kształt prawie zlewa się z foremnym, a poniżej 0,3 ramienie stają się igłami.
SVG a clip-path
Ta sama lista punktów działa dwojako: w SVG jako atrybut points elementu polygon, a w CSS jako procentowe clip-path (narzędzie liczy oba warianty). clip-path przycina istniejący element (zdjęcie, tło), SVG jest samodzielną grafiką skalowalną bez straty jakości.
Dostępność i waga
Ustaw Tytuł i Opis, a SVG dostanie role="img" z aria-labelledby — czytniki ekranu odczytają nazwę kształtu. Bez nich generowany jest aria-hidden dla dekoracji. Kod zwykle waży ułamek KB: jeden polygon bez zagnieżdżonych grup i filtrów.
Oceń to narzędzie:
Powiązane narzędzia
Inne narzędzia, które mogą Ci się przydaćGenerator wielokątów SVG – polygon i gwiazdy bez edytora
Wielokąty (polygon) i gwiazdy (star polygon) to podstawowe kształty SVG używane w ikonografii, dekoracji UI i infografice. Narzędzie oblicza współrzędne wierzchołków regularnych i nieregularnych wielokątów i generuje gotowy element
Typy generowanych kształtów
Wielokąt foremny (regular polygon): trójkąt (3), kwadrat (4), pięciokąt (5), sześciokąt (6)... do 20+ wierzchołków. Gwiazda (star polygon): N wierzchołków zewnętrznych i N wewnętrznych (r1/r2 ratio). Kształt nieregularny: ręczne ustawianie każdego wierzchołka. Zaokrąglone wielokąty: smooth corners przez cubic bezier.
Parametry wielokątów
Liczba wierzchołków (N): 3-20. Promień zewnętrzny (R): rozmiar figury. Promień wewnętrzny (r, tylko gwiazdy): głębokość wgłębień. Obrót (rotation): 0-360°. Środek (cx, cy): pozycja na canvas. Wypełnienie (fill), obrys (stroke), grubość linii (stroke-width).
SVG polygon vs path
Zastosowania w UI/UX
Ikony kształtów (gwiazdki ocen, odznaki). Tła dekoracyjne (honeycomb z sześciokątów). Wykresy radarowe (spider/web chart). Strzałki i wskaźniki kierunku. Maskowanie obrazów (clip-path). Animacje SVG (morph między kształtami).
Jak powstają współrzędne: kąt środkowy i dwa promienie
Każdy wierzchołek foremnego wielokąta leży na okręgu o promieniu R, a odległość kątowa między sąsiednimi wierzchołkami to jeden kąt środkowy, czyli 360° podzielone przez liczbę wierzchołków N. Narzędzie nie mierzy niczego na ekranie — wylicza położenie punktów na okręgu i składa je w listę. Dlatego zmiana N o jeden przebudowuje cały kształt, a promień R działa jak skala: dwukrotne zwiększenie R dwukrotnie odsuwa każdy wierzchołek od środka, nie zmieniając proporcji figury.
Gwiazda wykorzystuje dwa okręgi zamiast jednego. Na tym samym kierunku leży para punktów: zewnętrzny w odległości R i wewnętrzny w odległości r, przy czym punkt wewnętrzny wypada dokładnie w połowie kąta między dwoma punktami zewnętrznymi. Stosunek r do R steruje charakterem figury: wartości bliskie jedności dają kształt zbliżony do wielokąta o podwójnej liczbie boków, a małe r wyciąga ramiona w cienkie igły.
Na końcu lista punktów jest porządkowana, zaokrąglana i zapisywana w atrybucie points dla elementu polygon albo jako ciąg poleceń ruchu i linii dla ścieżki. Kolejność punktów nie jest przypadkowa — idą one zgodnie z kierunkiem obrotu, co ma znaczenie przy wypełnianiu i przy animacjach. Przy zaokrąglonych narożnikach narzędzie skraca każdą krawędź o promień zaokrąglenia i łączy sąsiednie odcinki łukiem, dlatego wariant gładki ma więcej punktów kontrolnych niż samych wierzchołków.
Przykład krok po kroku: sześciokąt foremny o promieniu 100 w środku (150, 150)
- Ustaw typ figury na wielokąt foremny, liczbę wierzchołków N = 6, promień zewnętrzny R = 100, środek cx = 150 i cy = 150, obrót 0°.
- Policz kąt środkowy: 360° / 6 = 60°. Pierwszy wierzchołek ma leżeć na górze, więc jego kierunek to -90°.
- Kolejne kierunki powstają przez dodawanie kąta środkowego: -90°, -30°, 30°, 90°, 150° i 210°.
- Wyznacz współrzędne pierwszego wierzchołka: x = 150 + 100 × cos(-90°) = 150 + 0 = 150, y = 150 + 100 × sin(-90°) = 150 - 100 = 50. Dla drugiego wierzchołka (kąt -30°): x = 150 + 100 × 0,866 = 236,6, y = 150 - 100 × 0,5 = 100.
- Po powtórzeniu rachunku dla wszystkich kierunków lista punktów wygląda tak: P1: x = 150, y = 50; P2: x = 236,6, y = 100; P3: x = 236,6, y = 200; P4: x = 150, y = 250; P5: x = 63,4, y = 200; P6: x = 63,4, y = 100.
- Narzędzie łączy te pary w atrybut points, rozdzielając kolejne wierzchołki spacją. W pliku SVG przecinek pełni rolę separatora między współrzędną poziomą i pionową, więc część dziesiętną zapisuje się tam kropką — wartość 63,4 trafia do kodu jako 63.4. Ustawienie obrotu na 30° przesunęłoby wszystkie kierunki o 30°, czyli obróciło gotową figurę bez zmiany jej kształtu.
Kąty dla typowych liczb wierzchołków
| Liczba wierzchołków (N) | Kąt środkowy między wierzchołkami (360° / N) | Kąt wewnętrzny wielokąta foremnego ((N - 2) × 180° / N) |
|---|---|---|
| 3 | 120° | 60° |
| 4 | 90° | 90° |
| 5 | 72° | 108° |
| 6 | 60° | 120° |
| 8 | 45° | 135° |
| 10 | 36° | 144° |
| 12 | 30° | 150° |
| 20 | 18° | 162° |
Praktyczne wskazówki przy ustawianiu parametrów
- Najpierw środek, potem promień — ustaw cx i cy na połowie szerokości i wysokości docelowego obszaru, a dopiero później dobieraj R. Obrót i zmiana liczby wierzchołków nie wypchną wtedy figury poza widok.
- Rozmiar dopasuj przed ustawieniem r — najpierw ustal R pod miejsce w interfejsie, potem zmniejszaj promień wewnętrzny, aż wgłębienia będą czytelne w docelowej skali. Gwiazda czytelna w dużym podglądzie bywa nieczytelna jako ikona.
- Przy nieparzystym N dół figury to środek krawędzi — przy obrocie 0° górny wierzchołek jest zawsze na miejscu, ale naprzeciw niego, przy N nieparzystym, wypada środek boku. Obrót o 180° / N przestawia układ tak, że wierzchołek pojawia się również na dole.
- Zaokrąglenie dopasuj do długości krawędzi — promień zaokrąglenia nie może przekroczyć połowy najkrótszej krawędzi. Przy dużym N i małym R krawędzie są krótkie, więc zbyt duża wartość pochłonie boki i zniekształci figurę.
- Zostaw zapas na obrys — linia rysowana jest po obu stronach krawędzi, więc przy grubym stroke ostre wierzchołki mogą zostać przycięte przy krawędzi obszaru roboczego. Dodaj margines równy co najmniej połowie grubości linii.
Czego narzędzie nie zrobi
- Nie dzieli przecinających się ramion — w gwiazdach ramiona nachodzą na siebie, a SVG nie rozbija ich na osobne segmenty. Przy wypełnieniu zobaczysz jedną bryłę zależną od reguły wypełnienia, a nie niezależne ramiona do pokolorowania osobno.
- Nie prowadzi edycji po wygenerowaniu — wynikiem jest gotowa lista punktów. Korekta pojedynczego wierzchołka wymaga albo trybu ręcznego, albo poprawienia kodu na zewnątrz.
- Nie wyrównuje do siatki pikseli — współrzędne pochodzą z funkcji trygonometrycznych, więc cienkie krawędzie mogą wypadać między pikselami i wyglądać na rozmyte w małych rozmiarach.
- Nie przelicza jednostek fizycznych — kod operuje na jednostkach układu współrzędnych opisanych przez viewBox, bez odniesienia do milimetrów czy cali. Przeliczenie na wymiar wydruku pozostaje po stronie użytkownika.
Najczęstsze pytania
Jak obliczyć współrzędne wielokąta foremnego?
x[i] = cx + R × cos(2π×i/N - π/2), y[i] = cy + R × sin(2π×i/N - π/2). Dla N=6 (sześciokąt): 6 punktów rozłożonych co 60°. Odejmowanie π/2 obraca kształt tak, by wierzchołek był na górze.
Jak zrobić animację morphingu między wielokątami?
CSS: shape kształtu w clip-path + transition. SMIL:
Dlaczego SVG polygon nie ma zaokrąglonych rogów?
Atrybut rx/ry działa tylko dla
Jak użyć wielokąta jako maski (clip-path) w CSS?
.element { clip-path: polygon(50% 0%, 100% 100%, 0% 100%) } dla trójkąta. Możesz wkleić wygenerowane współrzędne. Wartości procentowe działają na dowolnym elemencie HTML. Animacja clip-path tworzy efekt rozwijania kształtu.
Czy SVG wielokąty są dostępne (accessibility)?
Czyste kształty dekoracyjne: aria-hidden="true". Kształty znaczące (ikony): role="img" aria-label="opis". Kolor wypełnienia powinien spełniać kontrast WCAG gdy niesie informację.
Jak zrobić zaokrąglone narożniki w wielokącie SVG?
Włącz opcję zaokrąglenia — narzędzie zwróci wtedy ścieżkę zamiast wielokąta, bo połączenie prostej krawędzi z łukiem wymaga poleceń krzywych. Pamiętaj, że promień zaokrąglenia musi być mniejszy od połowy najkrótszej krawędzi, inaczej narożniki zleją się ze sobą.
Dlaczego gwiazda SVG wypełnia mi się w środku?
To skutek przecinania się ramion i przyjętej reguły wypełnienia. Przy regule nonzero wspólny środek zostaje wypełniony, a przy evenodd w miejscu przecięcia pojawia się dziura. Wybierz regułę zależnie od tego, czy chcesz pełną sylwetkę, czy efekt obrysu.
Jak obrócić wielokąt SVG bez zmiany współrzędnych?
Zamiast przeliczać punkty, dopisz do elementu atrybut transform z obrotem wokół środka figury. Parametr obrotu w generatorze robi to samo, tylko już na etapie liczenia punktów, więc kształt pozostaje identyczny, a w kodzie nie ma dodatkowej transformacji.
Czy wielokąt SVG traci jakość przy powiększaniu?
Nie, bo kształt jest opisany współrzędnymi, a nie pikselami. Skalowanie przez viewBox albo CSS zmienia tylko rozmiar renderowania, więc krawędzie pozostają ostre niezależnie od powiększenia.
Jak wpisać wielokąt SVG bezpośrednio w HTML?
Wklej element polygon razem z atrybutem points do znacznika svg w dokumencie — nie potrzebujesz osobnego pliku ani obrazka tła. Ustaw też viewBox, żeby kształt skalował się razem z kontenerem.
Powiązane narzędzia: generator wykresów SVG, generator fal SVG i generator SVG blob.