SVG Path Editor

Path Data (d attribute)

  <span class="svg-presets-label">Shape Presets</span>
  <div class="svg-presets-grid">
    <button class="svg-preset-btn" data-shape="circle">Circle</button>
    <button class="svg-preset-btn" data-shape="star">Star</button>
    <button class="svg-preset-btn" data-shape="heart">Heart</button>
    <button class="svg-preset-btn" data-shape="arrow">Arrow</button>
    <button class="svg-preset-btn" data-shape="checkmark">Checkmark</button>
    <button class="svg-preset-btn" data-shape="xmark">X Mark</button>
    <button class="svg-preset-btn" data-shape="triangle">Triangle</button>
    <button class="svg-preset-btn" data-shape="hexagon">Hexagon</button>
  </div>
</div>

<div class="svg-panel svg-section-sep">
  <p class="svg-panel-title">Stroke &amp; Fill</p>
  <div class="svg-controls-row">
    <div class="svg-control-group">
      <label>Stroke Color</label>
      <input type="color" id="svg-stroke-color" value="#4361ee">
    </div>
    <div class="svg-control-group" style="flex:1;min-width:100px;">
      <label>Stroke Width</label>
      <input type="number" id="svg-stroke-width" value="2" min="0" max="20" step="0.5">
    </div>
    <div class="svg-control-group">
      <label>Fill Color</label>
      <input type="color" id="svg-fill-color" value="#a8c8ff">
    </div>
    <div class="svg-control-group" style="flex:1;min-width:80px;">
      <label>Fill Opacity</label>
      <input type="number" id="svg-fill-opacity" value="0.3" min="0" max="1" step="0.05">
    </div>
  </div>
</div>

<div class="svg-panel svg-section-sep">
  <p class="svg-panel-title">Scale &amp; Translate</p>
  <div class="svg-transform-row">
    <div class="svg-control-group">
      <label>Scale X</label>
      <input type="number" id="svg-scale-x" value="1" min="0.1" max="10" step="0.1">
    </div>
    <div class="svg-control-group">
      <label>Scale Y</label>
      <input type="number" id="svg-scale-y" value="1" min="0.1" max="10" step="0.1">
    </div>
    <div class="svg-control-group">
      <label>Translate X</label>
      <input type="number" id="svg-translate-x" value="0" step="1">
    </div>
    <div class="svg-control-group">
      <label>Translate Y</label>
      <input type="number" id="svg-translate-y" value="0" step="1">
    </div>
  </div>
</div>

Preview

  <div class="svg-info-box">
    <div class="svg-info-grid">
      <div class="svg-info-item">
        <span class="svg-info-key">Commands</span>
        <span class="svg-info-val" id="info-commands">—</span>
      </div>
      <div class="svg-info-item">
        <span class="svg-info-key">Path Length</span>
        <span class="svg-info-val" id="info-length">—</span>
      </div>
      <div class="svg-info-item">
        <span class="svg-info-key">Bounding Box</span>
        <span class="svg-info-val" id="info-bbox">—</span>
      </div>
      <div class="svg-info-item">
        <span class="svg-info-key">Data Size</span>
        <span class="svg-info-val" id="info-size">—</span>
      </div>
    </div>
  </div>
</div>

<div class="svg-panel svg-section-sep">
  <p class="svg-panel-title">Output &amp; Actions</p>
  <div class="svg-actions-row">
    <button class="svg-action-btn" id="svg-btn-minify">Minify Path</button>
    <button class="svg-action-btn" id="svg-btn-prettify">Prettify Path</button>
    <button class="svg-action-btn primary" id="svg-btn-copy-svg">Copy SVG Code</button>
    <button class="svg-action-btn success" id="svg-btn-copy-path">Copy Path Data</button>
    <button class="svg-action-btn" id="svg-btn-reset">Reset</button>
  </div>
  <div class="svg-output-area">
    <div class="svg-output-label">Generated SVG Code</div>
    <textarea id="svg-output-code" readonly></textarea>
  </div>
</div>
Copied!

Generate CSS gradients → CSS Gradient Generator

Build color palettes → Color Palette Generator

Create favicons → Favicon Generator