SVG Sandbox

Upload or paste custom SVG paths to inspect, style, and export code.

Upload SVG file

Drag & drop or click to browse

Paste SVG Paths

Interactive Node Attributes

<polygon />Node #1

points

<circle />Node #2

SVG Morphing Generator

Start Icon

End Icon

MORPHING CSS KEYFRAMES

@keyframes morph-icon {
  0% { d: path(""); }
  100% { d: path(""); }
}

.morph-active {
  animation: morph-icon 1s ease-in-out infinite alternate;
}

Size (48px)

Stroke (2)

Color

Styled Output Code

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <polygon points="12 2 19 8 19 16 12 22 5 16 5 8" />
<circle cx="12" cy="12" r="3" />
</svg>