Two-panel, green-on-black blocky visualization of SVMs: (left) input space with the maximum-margin separating hyperplane and its ±1 margin lines (canonical scaling, margin = 1/||w||), highlighting that only support vectors (α_i>0) touch/define the margin; (right) the dual/kernelized decision function showing a nonlinear boundary produced by an RBF kernel K(x,x'). The animation morphs from linear to kernel behavior while pulsing the active (nonzero α) points to emphasize sparsity.
Self-contained Canvas2D draw function. Uses a small synthetic dataset and pre-chosen sparse dual coefficients to illustrate support vectors. Computes w = Σ α_i y_i x_i for linear margin lines and renders a blocky decision field by sampling f(x) on a coarse grid; smoothly mixes linear score with kernel score over a ~4.2s cycle. RBF kernel K(x,x')=exp(-γ||x-x'||^2) with mildly animated γ for intuition. Grid snapping and rect-based “pixel” circles create the retro block aesthetic; responsive scaling via scale=Math.min(w,h)/baseSize.