Skip to content
Raw SVG templates

Anatomy Schematic (SVG)

Stylised neuron diagram in SVG.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 240" width="640">
  <style>
    .label { font: 13px Inter, sans-serif; fill: #0f172a; }
    .ttl   { font: 16px Inter, sans-serif; font-weight: 600; fill: #0f172a; }
  </style>
  <text class="ttl" x="260" y="20" text-anchor="middle">Neuron</text>
  <!-- Dendrites -->
  <g stroke="#1f47f5" stroke-width="2" fill="none">
    <path d="M40,140 Q90,80 130,120"/>
    <path d="M40,160 Q90,200 130,140"/>
    <path d="M50,120 Q100,90 130,110"/>
  </g>
  <!-- Soma -->
  <ellipse cx="160" cy="140" rx="35" ry="28" fill="#dbeafe" stroke="#1f47f5" stroke-width="2"/>
  <circle cx="160" cy="140" r="8" fill="#1f47f5"/>
  <!-- Axon -->
  <line x1="195" y1="140" x2="420" y2="140" stroke="#1f47f5" stroke-width="3"/>
  <!-- Myelin sheaths -->
  <g fill="#fde68a" stroke="#b45309">
    <ellipse cx="240" cy="140" rx="20" ry="9"/>
    <ellipse cx="300" cy="140" rx="20" ry="9"/>
    <ellipse cx="360" cy="140" rx="20" ry="9"/>
  </g>
  <!-- Axon terminals -->
  <g stroke="#1f47f5" stroke-width="2" fill="#dbeafe">
    <circle cx="430" cy="120" r="6"/>
    <circle cx="440" cy="140" r="6"/>
    <circle cx="430" cy="160" r="6"/>
  </g>
  <g class="label">
    <text x="40"  y="100">Dendrites</text>
    <text x="140" y="195">Soma</text>
    <text x="285" y="120">Myelin sheath</text>
    <text x="430" y="190">Axon terminals</text>
  </g>
</svg>