Draw Frosty Fractal

The Koch snowflake was constructed by Swedish mathematician Helge von Koch in 1904 as the first example of a continuous curve that is nowhere-differentiable (no defined tangent at any point – sharp corners everywhere). Starting from an equilateral triangle, each iteration replaces every straight edge with a 4-segment bumped version (divide into thirds, replace middle third with two sides of an equilateral peak pointing outward). The infinite limit has INFINITE perimeter enclosing a FINITE area = (8/5)·A₀ where A₀ is the original triangle’s area.

Hausdorff dimension is a property of the LIMIT set, not any finite iteration. The number log(4)/log(3) ≈ 1.2619 comes from self-similarity: each edge is replaced with 4 copies at 1/3 scale. Formula: dim = log(N)/log(S) where N copies at scale 1/S. Iter 1’s edge count is 12; iter 7 is 49,152 – but the LIMITING curve they’re approaching has dim 1.2619. We display it as a constant because it doesn’t change with iter – that’s the whole point of fractal dimension.

Each iter multiplies perimeter by 4/3 (each edge becomes 4 edges of 1/3 length). So perimeter = 3 × s × (4/3)^n → infinity as n → infinity. But the AREA added per iter shrinks geometrically: iter 1 adds 3 small triangles totalling (3/9)·A₀, iter 2 adds 12 even-smaller triangles totalling (12/81)·A₀, etc. The geometric series converges to a finite total, so the limiting area is finite (= (8/5)·A₀). This is the famous “infinite perimeter, finite area” paradox.

Solid: ctx.fill() with the closed path. Looks like a clean cut-paper snowflake. Outline: ctx.stroke() only. Shows the geometric structure; useful for studying construction. Gradient: a radial gradient from primary at centre to secondary at edge fills the closed path. Ice crystal: stroke with shadowBlur: 20 + shadowColor = primary + globalAlpha: 0.85 – creates a glowing semi-transparent appearance that looks like backlit ice.

Edge count at iter N is 3 × 4^N. At iter 7: 49,152 edges (49,152 separate lineTo calls in one Canvas path). At iter 8: 196,608. At iter 9: 786,432 – at which point the path data alone exceeds 10 MB and rendering becomes seconds-long. Iter 7 is the comfortable ceiling for desktop (~500 ms). On mobile devices iter 7 may take 1-2 s – hence the loading state.

The initial triangle points DOWNWARD by default (vertex at top, base below). To flip it, set rotation to 180°. Or pick a 30° / 90° rotation for off-axis variations. The snowflake is 6-fold rotationally symmetric, so rotation by any multiple of 60° leaves it visually identical.

Ice mode uses shadowColor = primary. On a white background with light-blue primary, the glow blends into the white – looking washed out. The mode was designed for dark backgrounds (dark-blue default). For white backgrounds, prefer solid or gradient mode. Or pick a darker primary so the glow contrasts. The low-contrast warning toast catches the most extreme cases.

The logical perimeter (sum of all segment lengths in the un-scaled fractal coordinate system) gets multiplied by the rendering scale factor. So if the snowflake is auto-scaled to fit a 600×600 canvas with 5% padding, the displayed perimeter is what you’d measure with a ruler on the rendered image. Iter 7 with default settings: perimeter ≈ 60,000 px on a 600 px canvas – the curve, if straightened, would be 100× the canvas width.

Yes – 100% client-side. Koch curve recursion and Canvas drawing happen in your browser. No parameters or images leave your device. Verify via your browser’s Network tab.