How a Neural Network Processes Input

Click Next Step to walk through the forward pass

Step 0 / 4

The Network at Rest

A neural network has three types of layers: an Input Layer, one or more Hidden Layers, and an Output Layer. Each circle is a neuron, and each line is a weight.

Input neurons

Hidden neurons

Output neuron

* { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f8fafc; } .nn-container { max-width: 900px; margin: 0 auto; padding: 24px 20px 28px; } .title { font-size: 1.5rem; font-weight: 800; color: #0f172a; text-align: center; } .subtitle { text-align: center; color: #475569; font-size: 0.92rem; margin-top: 6px; margin-bottom: 18px; } .step-indicator { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; } .step-dot { width: 12px; height: 12px; border-radius: 50%; background: #cbd5e1; transition: background 0.3s; } .step-dot.active { background: #4A6CF7; transform: scale(1.25); } .step-dot.done { background: #a5b4fc; } .main-layout { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; } .network-wrap { flex: 1 1 320px; background: #0f172a; border-radius: 16px; padding: 12px; min-height: 280px; display: flex; align-items: center; justify-content: center; } #nn-svg { width: 100%; height: auto; } .info-panel { flex: 1 1 240px; background: #fff; border-radius: 16px; border: 1.5px solid #e2e8f0; padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; } .step-badge { display: inline-block; background: #eff6ff; color: #3730a3; font-size: 0.78rem; font-weight: 700; border-radius: 20px; padding: 4px 12px; width: fit-content; } .step-title { font-size: 1.15rem; font-weight: 800; color: #1e293b; } .step-desc { font-size: 0.91rem; color: #334155; line-height: 1.65; } .math-box { background: #1e293b; color: #7dd3fc; font-family: 'Courier New', monospace; font-size: 0.9rem; border-radius: 10px; padding: 12px 16px; border-left: 4px solid #4A6CF7; word-break: break-word; } .legend { display: flex; flex-direction: column; gap: 8px; margin-top: auto; } .legend-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #475569; font-weight: 500; } .dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; } .dot.blue { background: #4A6CF7; } .dot.purple { background: #9333ea; } .dot.green { background: #16a34a; } .controls { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; } .btn { padding: 10px 24px; border-radius: 10px; font-size: 0.95rem; font-weight: 700; cursor: pointer; border: none; transition: all 0.18s; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn.primary { background: #4A6CF7; color: #fff; } .btn.primary:hover:not(:disabled) { background: #3a5ce5; } .btn.secondary { background: #e2e8f0; color: #1e293b; } .btn.secondary:hover:not(:disabled) { background: #cbd5e1; } .btn.reset { background: #fef3c7; color: #92400e; } .btn.reset:hover { background: #fde68a; }