Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Sierpinski Triangle Example

Public visualization

Viewing a saved revision (read-only)

a51246c057964947be33a30321e21e55

Sierpinski Triangle Example

0 stars0🌍 Public
MMilan Košir
Last edited Dec 12, 2023
Created on Dec 12, 2023

This example shows a Sierpinski triangle fractal rendered as an interactive tree-like structure on a Canvas element. The fractal is drawn with recursive triangle subdivision, and the branching depth changes dynamically based on the mouse position. The code uses the Canvas 2D API with `beginPath`, `moveTo`, `lineTo`, and `fill` methods to draw triangles. It accommodates high pixel density displays by scaling the canvas resolution using `window.devicePixelRatio`. The mouse event listener recalculates the depth from the cursor's horizontal position, then clears and redraws the entire fractal.

AI-generated description

Interactive tree fractal with Canvas.

Move the mouse to change the branching!

Draws from HTML5 Examples.

Extended to use high resolution Canvas for high pixel density displays.