⚡ SVG Shape Viewer ⚡

SVG Code (Edit and click Update):

<svg width="300" height="200" viewBox="-10 -60 160 100" style="background: #0a0a12; font-family: monospace;">
  
  <g stroke="#1a3a5a" stroke-width="0.5" stroke-dasharray="5,5">
    <line x1="-50" y1="0" x2="200" y2="0"/>
    <line x1="0" y1="-100" x2="0" y2="100"/>
    <line x1="-50" y1="-50" x2="200" y2="-50"/>
    <line x1="-50" y1="-25" x2="200" y2="-25"/>
    <line x1="-50" y1="25" x2="200" y2="25"/>
    <line x1="-50" y1="50" x2="200" y2="50"/>
    <line x1="25" y1="-100" x2="25" y2="100"/>
    <line x1="50" y1="-100" x2="50" y2="100"/>
    <line x1="75" y1="-100" x2="75" y2="100"/>
    <line x1="100" y1="-100" x2="100" y2="100"/>
    <line x1="125" y1="-100" x2="125" y2="100"/>
    <line x1="150" y1="-100" x2="150" y2="100"/>
    <line x1="175" y1="-100" x2="175" y2="100"/>
  </g>
  
  
  <line x1="0" y1="0" x2="50" y2="0" stroke="#00f3ff" stroke-width="2"/>
  <line x1="50" y1="0" x2="75" y2="-43.3" stroke="#ffaa00" stroke-width="2"/>
  <line x1="75" y1="-43.3" x2="125" y2="-43.3" stroke="#00f3ff" stroke-width="2"/>
  <line x1="125" y1="-43.3" x2="150" y2="0" stroke="#ff0033" stroke-width="2"/>
  
  
  <circle cx="0" cy="0" r="3" fill="#ffaa00"/>
  <circle cx="50" cy="0" r="3" fill="#00f3ff"/>
  <circle cx="75" cy="-43.3" r="3" fill="#ffaa00"/>
  <circle cx="125" cy="-43.3" r="3" fill="#00f3ff"/>
  <circle cx="150" cy="0" r="3" fill="#ff0033"/>
  
  
  <text x="0" y="10" fill="#ffaa00" font-size="8" text-anchor="middle">(0,0) START</text>
  <text x="50" y="10" fill="#00f3ff" font-size="8" text-anchor="middle">(50,0)</text>
  <text x="75" y="-35" fill="#ffaa00" font-size="8" text-anchor="middle">(75,-43.3)</text>
  <text x="125" y="-35" fill="#00f3ff" font-size="8" text-anchor="middle">(125,-43.3)</text>
  <text x="150" y="10" fill="#ff0033" font-size="8" text-anchor="middle">(150,0) END</text>
  
  
  <text x="25" y="-5" fill="#00f3ff" font-size="10" text-anchor="middle">0°</text>
  <text x="62.5" y="-20" fill="#ffaa00" font-size="10" text-anchor="middle">-60°</text>
  <text x="100" y="-48" fill="#00f3ff" font-size="10" text-anchor="middle">0°</text>
  <text x="137.5" y="-20" fill="#ff0033" font-size="10" text-anchor="middle">60°</text>
</svg>

📝 Quick Guide:

1. Edit the coordinates in the code above

2. Click "Update Display" to see changes

3. Use "Add Line" for a new line template

4. Coordinates are in (x,y) format: <line x1="0" y1="0" x2="50" y2="0"/>

Current shape points: (0,0) → (50,0) → (75,-43.3) → (125,-43.3) → (150,0)