Skip to content
Raw SVG templates

Neural Network Architecture (SVG)

Feed-forward neural network — input → 2 hidden layers → output.

Template previewRaw SVG
Rendering…

Make it your own.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 320" width="640">
  <style>
    .layer { font: 12px Inter; fill: #475569; text-anchor: middle; }
    .node  { fill: #dbeafe; stroke: #1f47f5; stroke-width: 1.5; }
    .out   { fill: #fde68a; stroke: #b45309; }
    .in    { fill: #dcfce7; stroke: #16a34a; }
    .edge  { stroke: #94a3b8; stroke-width: 0.6; opacity: 0.5; }
  </style>
  <text class="layer" x="60"  y="20">Input</text>
  <text class="layer" x="220" y="20">Hidden 1</text>
  <text class="layer" x="380" y="20">Hidden 2</text>
  <text class="layer" x="510" y="20">Output</text>
  <g class="edge">
    <line x1="60" y1="60" x2="220" y2="50"/><line x1="60" y1="60" x2="220" y2="120"/><line x1="60" y1="60" x2="220" y2="190"/><line x1="60" y1="60" x2="220" y2="260"/>
    <line x1="60" y1="140" x2="220" y2="50"/><line x1="60" y1="140" x2="220" y2="120"/><line x1="60" y1="140" x2="220" y2="190"/><line x1="60" y1="140" x2="220" y2="260"/>
    <line x1="60" y1="220" x2="220" y2="50"/><line x1="60" y1="220" x2="220" y2="120"/><line x1="60" y1="220" x2="220" y2="190"/><line x1="60" y1="220" x2="220" y2="260"/>
    <line x1="220" y1="50"  x2="380" y2="80"/><line x1="220" y1="50"  x2="380" y2="160"/><line x1="220" y1="50"  x2="380" y2="240"/>
    <line x1="220" y1="120" x2="380" y2="80"/><line x1="220" y1="120" x2="380" y2="160"/><line x1="220" y1="120" x2="380" y2="240"/>
    <line x1="220" y1="190" x2="380" y2="80"/><line x1="220" y1="190" x2="380" y2="160"/><line x1="220" y1="190" x2="380" y2="240"/>
    <line x1="220" y1="260" x2="380" y2="80"/><line x1="220" y1="260" x2="380" y2="160"/><line x1="220" y1="260" x2="380" y2="240"/>
    <line x1="380" y1="80"  x2="510" y2="140"/><line x1="380" y1="80"  x2="510" y2="200"/>
    <line x1="380" y1="160" x2="510" y2="140"/><line x1="380" y1="160" x2="510" y2="200"/>
    <line x1="380" y1="240" x2="510" y2="140"/><line x1="380" y1="240" x2="510" y2="200"/>
  </g>
  <g>
    <circle class="node in"  cx="60"  cy="60"  r="14"/>
    <circle class="node in"  cx="60"  cy="140" r="14"/>
    <circle class="node in"  cx="60"  cy="220" r="14"/>
    <circle class="node"     cx="220" cy="50"  r="14"/>
    <circle class="node"     cx="220" cy="120" r="14"/>
    <circle class="node"     cx="220" cy="190" r="14"/>
    <circle class="node"     cx="220" cy="260" r="14"/>
    <circle class="node"     cx="380" cy="80"  r="14"/>
    <circle class="node"     cx="380" cy="160" r="14"/>
    <circle class="node"     cx="380" cy="240" r="14"/>
    <circle class="node out" cx="510" cy="140" r="14"/>
    <circle class="node out" cx="510" cy="200" r="14"/>
  </g>
</svg>