Neural Network Architecture (SVG)
Feed-forward neural network — input → 2 hidden layers → output.
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>