CREATE Sierpinski Triangle in Javascript

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

Start learning javascript

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);

Result:

Quick Summary

Concept	Meaning
Fractal	Infinite repeating shape
Self-similar	Parts look like whole
Sierpinski triangle	Subdivide triangle forever
JS implementation	Recursion or Chaos Game