CREATE Sierpinski Triangle in Javascript

A Sierpinski Triangle is a famous mathematical fractal — a shape made by repeating a pattern inside itself forever.

What it looks like

Start with a triangle ➜ remove the triangle in the middle ➜ repeat the removal process on every remaining triangle forever.

It creates a beautiful, self-similar pattern:

▲
▲ ▲
▲   ▲
▲ ▲ ▲ ▲

Key Ideas Behind It

Self-similarity: smaller triangles look like the whole big triangle
Infinite recursion: pattern continues as deep as you zoom
Fractal dimension: ~1.585 (between a line (1D) and plane (2D))

Two Main Ways to Create It in JavaScript

Method	How it works	Pros
Recursive Draw	Keep dividing triangle into smaller triangles	Clean math, simple to understand
Chaos Game	Plot points randomly that converge to fractal	Fast, visually surprising

Method 1: Recursive JavaScript Sierpinski Triangle

<canvas id="canvas" width="600" height="500"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

function drawTriangle(x1, y1, x2, y2, x3, y3) {
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.closePath();
  ctx.fill();
}

function sierpinski(x1, y1, x2, y2, x3, y3, depth) {
  if (depth === 0) {
    drawTriangle(x1, y1, x2, y2, x3, y3);
    return;
  }

  let ax = (x1 + x2) / 2;
  let ay = (y1 + y2) / 2;
  let bx = (x2 + x3) / 2;
  let by = (y2 + y3) / 2;
  let cx = (x3 + x1) / 2;
  let cy = (y3 + y1) / 2;

  sierpinski(x1, y1, ax, ay, cx, cy, depth - 1);
  sierpinski(ax, ay, x2, y2, bx, by, depth - 1);
  sierpinski(cx, cy, bx, by, x3, y3, depth - 1);
}

// Starter triangle
ctx.fillStyle = "black";
sierpinski(300, 20, 50, 480, 550, 480, 6); 
</script>

Result:

Try changing the last number (6) → recursion depth
Higher depth = more detail but slower.

Method 2: Chaos Game Version (Fun Random Method)

const c = document.getElementById("canvas");
const ctx = c.getContext("2d");

const vertices = [
  {x:300, y:20},
  {x:50, y:480},
  {x:550, y:480}
];

let x = 300, y = 200;

function chaosGame() {
  for (let i = 0; i < 5000; i++) {
    const v = vertices[Math.floor(Math.random()*3)];
    x = (x + v.x) / 2;
    y = (y + v.y) / 2;

    ctx.fillRect(x, y, 1, 1);
  }
}

setInterval(chaosGame, 10);