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.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia / Settings

Tryb

Szerokość 512

Wysokość 512

Odstęp wewnętrzny (padding) 32

Precyzja 2

Liczba boków 6

Obrót -90

Wypełnienie

Obrys

Szerokość obrysu 8

Łączenie linii (linejoin)

Zakończenie linii (linecap)

Zamknij ścieżkę Opcja narzędzia

Tytuł

Opis

Podgląd na żywo / Live Preview

Zmień parametry, aby wygenerować SVG.

Wynik / Result SVG

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

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 lub .

generator wielokątów SVG polygon SVG generator kształty SVG gwiazdka SVG kod

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

: prostszy, tylko proste krawędzie. : pełna elastyczność, obsługuje krzywe Beziera. Narzędzie generuje oba warianty – polygon dla prostych kształtów, path dla zaokrąglonych.

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).

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: między dwoma ścieżkami (działa gdy mają tę samą liczbę wierzchołków). GSAP MorphSVG plugin: morphing między dowolnymi ścieżkami SVG.

Dlaczego SVG polygon nie ma zaokrąglonych rogów?

Atrybut rx/ry działa tylko dla . Zaokrąglenia dla polygon wymagają użycia z cubic Bezier curves. Narzędzie oferuje opcję "smooth corners" generującą path zamiast polygon.

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ę.

Powiązane narzędzia: generator wykresów SVG, generator fal SVG i generator SVG blob.