Snippet Zone

Base36 Alphabet Animated

const canvas = document.createElement('canvas')

```
canvas.width = innerWidth * .5
```
```
canvas.height = innerHeight * .5
```
```
canvas.style.transformOrigin = '0 0'
```
```
canvas.style.transform = 'scale(2, 2)'
```

canvas.style.imageRendering = 'pixelated'

```
 
```
```
document.body.append(canvas)
```
```
const c = canvas.getContext('2d')
```
```
 
```
```
// letters defined in base36
```

const alphabet = ['', '67erkgi', 'e3j6dss', '75rue4u', 'c5ltok8', '75s2tji',

  '75s2tjk', '75rugj2', '95yfnf6', '21blls4', '10nt5xo', '973it1u',

  '85aef4u', '59lu6nl', 'cnz0hbn', '67ej51o', '67eq49c', '67ej53e',

  '67eq7gy', '66978m4', '6ywdqpw', '95y780c', '53b00as', '8nmdpyi',

```
  '5374thm', '53avnus', '6xsfdam'
```
```
]
```
```
 
```
```
function drawBase36(num, xp, yp) {
```
```
  num = alphabet[num]
```
```
 
```

  let binaryString = parseInt(num, 36).toString(2).padStart(35, '0');

```
 
```
```
  for (let i = 0; i < 35; i++) {
```

    if (binaryString.charAt(i) === '1') {

```
      const x = (i % 5) + xp;
```
```
      const y = Math.floor(i / 5) + yp;
```
```
      c.fillRect(x, y, 1, 1); 
```
```
    }
```
```
  }
```
```
}
```
```
 
```

function letter(char, col, x, y, scale = 1, rotation = 0) {

```
  c.fillStyle = col
```
```
  c.translate(x, y)
```
```
  c.scale(scale, scale)
```
```
  c.rotate(rotation)
```
```
 
```
```
  drawBase36(char, 0, 0);
```
```
  c.setTransform(1, 0, 0, 1, 0, 0)
```
```
}
```
```
 
```
```
let NUM = 100
```
```
let ps = []
```
```
for (let i = 0; i < NUM; i++) {
```

  let hr = 180 + Math.random() * 50 - 25;

```
  let ss = 100
```
```
  let bb = 50
```
```
  if (Math.random() < .5) {
```
```
    hr = 30 + Math.random() * 50 - 25;
```
```
    ss = 100
```
```
    bb = 40
```
```
  }
```

  const col = `hsl(${hr}, ${ss}%, ${bb}%)`;

```
  const p = [
```

    1 + ~~(Math.random() * alphabet.length),

```
    col,
```
```
    Math.random() * canvas.height, 
```

    Math.random() * (canvas.width + 200),

    1 + Math.random() * Math.random() * 10, Math.random() * 7

```
  ]
```
```
  p.props = { 
```
```
    vx: Math.random() * 1 - .5,
```
```
    r: .01 * Math.random() - 0.005
```
```
  }
```
```
  letter(...p)
```
```
  ps.push(p)
```
```
}
```
```
 
```
```
function draw() {
```
```
  c.fillStyle = 'rgba(91, 34, 0, .05)'
```

  c.fillRect(0, 0, canvas.width, canvas.height)

```
 
```
```
  for (let i = 0; i < NUM; i++) {
```
```
    const p = ps[i]
```
```
    p[2] += p.props.vx;
```
```
    p[5] += p.props.r
```
```
    letter(...p)
```
```
  } 
```
```
 
```
```
  c.fillStyle = 'rgba(0, 255, 255, 1)'
```
```
  c.scale(1, 1)
```
```
 
```

  for (let i = 0; i < alphabet.length; i++) {

```
    drawBase36(i, i * 10, 10);
```
```
  }
```
```
  c.setTransform(1, 0, 0, 1, 0, 0)
```
```
 
```
```
  requestAnimationFrame(draw)
```
```
}
```
```
draw()
```

This alphabet is something I drew manually in the 2000s – then at some point wrote this snippet on actionsnippet. Basically each letter is a 5×7 binary number and I store these in base36 for no particular reason 😀

August 9, 2025

// animation // canvas // drawing // graphics // hacks // javascript // math // random // tricks

Flun Draw

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth * 2
```
```
canvas.height = innerHeight * 2
```
```
document.body.append(canvas)
```
```
canvas.style.width = innerWidth + 'px'
```

canvas.style.height = innerHeight + 'px'

```
c.fillStyle = 'white'
```

c.fillRect(0, 0, canvas.width, canvas.height)

```
 
```
```
const flun = (
```
```
  ax = innerWidth,
```
```
  ay = innerHeight,
```
```
  r = 0,
```
```
  x = 0, y = 0,
```
```
  t = 0,
```
```
  dt = 0,
```
```
  spin = 0,
```
```
  spinc = .1,
```
```
  rinc = 0,
```
```
  col = 'black',
```
```
  hist = []
```
```
) => {
```
```
 
```
```
  const init = () => {
```
```
    dt = Math.random() * Math.PI * 2
```
```
    r = 0
```
```
    rinc = Math.random() * 1
```
```
    spinc = Math.random() * .01 - .005
```

    col = ['black', 'white', 'rgba(0, 0, 0, 0.2)']

```
      [~~(Math.random() * 3)]
```
```
  }
```
```
  init()
```
```
 
```
```
  return () => {
```
```
 
```
```
    spin += spinc
```
```
    if (Math.random() < .005) {
```
```
      init()
```
```
    } else {
```
```
      r += rinc
```
```
    }
```
```
 
```
```
    if (Math.random() < .01) {
```
```
      ax = x
```
```
      ay = y
```
```
      const inside = ax > 0 &&
```
```
        ax < canvas.width &&
```
```
        ay > 0 &&
```
```
        ay < canvas.height
```
```
      if (!inside) {
```

        const p = hist[~~(Math.random() * hist.length)]

```
        ax = p[0]
```
```
        ay = p[1]
```
```
      }
```
```
      init()
```
```
    } 
```
```
 
```
```
    t += (dt - t) / 22
```
```
 
```
```
    x = ax + Math.cos(t + spin) * r
```
```
    y = ay + Math.sin(t + spin) * r
```
```
 
```
```
    if (x > 0 && x < canvas.width &&
```
```
      y > 0 && y < canvas.height) {
```
```
      hist.push([x, y])
```
```
    }
```
```
 
```
```
    c.fillStyle = col
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
 
```
```
const f = flun()
```
```
 
```
```
setInterval(() => {
```
```
  for (let i = 0; i < 20; i++) f()
```
```
}, 16)
```

Just randomly coded this one morning for a short – simple – but never did this exact motion before. It looks surprisingly organic and occasionally draws things that look like faces and other objects

August 7, 2025

// animation // canvas // drawing // golfed // graphics // javascript // math // random

T Plant

```
const { PI } = Math
```

const canvas = document.createElement('canvas')

```
const c = canvas.getContext('2d')
```
```
 
```
```
canvas.width = innerWidth * 2
```
```
canvas.height = innerHeight * 2
```
```
canvas.style.scale = '.5 .5'
```
```
canvas.style.transformOrigin = '0 0'
```
```
document.body.append(canvas)
```
```
let o = -PI / 2
```
```
 
```
```
const r = (n = 1) => Math.random() * n
```
```
 
```
```
function branch(x, y, ang = o, f) {
```
```
  let vx, vy
```
```
  let life = 0
```
```
  let dead
```
```
  let vv = 1 + r(2)
```
```
  let ll = r(200)
```
```
  let a = 1;
```
```
  if (f) a = 0
```
```
 
```
```
  return () => {
```
```
    if (dead) return
```
```
    if (life > 200 + ll) {
```
```
      dead = true;
```
```
      let n = 10 + r(20)
```
```
      for (let i = 0; i < n; i++) {
```
```
 
```
```
        let dest = {
```
```
          x,
```
```
          y: y + r(30) - 15
```
```
        }
```
```
        bs.push(leafPart(x, y, dest))
```
```
      }
```
```
    }
```
```
 
```
```
    life++
```

    if (life > 10 && a >= 1 && Math.random() < .02 && bs.length < 20) {

```
      if (r() < .3) {
```
```
        dead = true
```
```
        bs.push(
```

          branch(x, y, ang + r(PI / 4)))

```
        branch(x, y, ang + r(-PI / 4))
```
```
        return
```
```
      }
```
```
      bs.push(
```
```
        branch(x, y, o + r(2) - 1))
```
```
    }
```
```
    vx = Math.cos(ang)
```
```
    vy = Math.sin(ang) * vv
```
```
    ang += r(.1) - .05
```
```
 
```
```
    x += vx
```
```
    y += vy
```

    c.fillStyle = `rgba(255, 255, 255, ${a})`

```
    if (f) {
```
```
      a += .01
```
```
    }
```
```
 
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
 
```
```
function leafPart(x, y, dest) {
```
```
  let ang = r(7)
```
```
  let rr = r(1) + .5
```
```
  let vv = -r(3)
```
```
  let life = 0
```
```
  let maxLife = 40 + r(200)
```
```
  let vx
```
```
  let vy
```
```
  let CC = 190 + r(30)
```
```
 
```
```
  return () => {
```
```
    life++
```
```
    if (life < maxLife) {
```
```
      vx = Math.cos(ang) * rr
```
```
      vy = Math.sin(ang) * rr + vv
```
```
      x += vx
```
```
      y += vy
```
```
      ang += r(.4) - .2
```

      c.fillStyle = 'rgba(255, 255, 255, .1)'

```
    } else {
```

      c.fillStyle = `rgba(255, ${CC}, ${CC}, .25)`

```
      x += (dest.x - x) / 42
```
```
      y += (dest.y - y) / 12
```
```
    }
```
```
 
```
```
    c.fillRect(x, y, 4, 4)
```
```
  }
```
```
}
```
```
let bs = []
```
```
let lf = []
```
```
 
```
```
bs.push(
```

  branch(innerWidth, innerHeight * 1.9, o, true)

```
)
```
```
 
```
```
function loop() {
```
```
  bs.forEach(b => b())
```
```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Been pretty consistently posting speed-coded youtube shorts. This is a recent one. Magic numbers, nonsense variable names, and strange noops 😀

See the short here…

August 2, 2025

// animation // canvas // codegolf // color // curves // graphics // hacks // javascript // random // speed-coded // speedcoding // tricks

Swrls

const canvas = document.createElement("canvas");

```
const c = canvas.getContext("2d");
```
```
 
```
```
canvas.width = innerWidth;
```
```
canvas.height = innerHeight;
```
```
document.body.append(canvas); 
```
```
 
```
```
const TWO_PI = 2 * Math.PI;
```
```
 
```
```
class Dot {
```

  constructor(id, x, y, theta, parent) {

```
    this.x = x;
```
```
    this.y = y;
```
```
    this.t = theta;
```

    this.vx = Math.cos(this.t) * Math.random() * 2;

    this.vy = Math.sin(this.t) * Math.random() * 2;

```
    this.life = 30;
```
```
    this.col = parent.col;
```
```
 
```

    if (Math.random() < 0.005) this.other = true;

```
    if (this.other) {
```
```
      this.life = 1000;
```
```
      this.t = Math.random() * 7;
```

      this.vx = Math.cos(this.t) * Math.random() * 2;

      this.vy = Math.sin(this.t) * Math.random() * 2;

```
      this.col = "black";
```
```
    }
```
```
    this.iter = 0;
```
```
    this.parent = parent;
```
```
    this.id = id;
```
```
    this.alpha = 0.25;
```
```
 
```

    if (Math.random() < 0.3) this.alpha = 0.25;

```
  }
```
```
 
```
```
  draw() {
```
```
    this.x += this.vx;
```
```
    this.y += this.vy;
```
```
    this.iter++;
```
```
    if (this.iter > this.life) {
```
```
      delete this.parent.dots[this.id];
```
```
    }
```
```
    c.fillStyle = this.col;
```
```
    c.globalAlpha = this.alpha;
```

    if (!this.no) this.alpha -= 0.00125;

    c.fillRect(this.x, this.y, this.parent.size, this.parent.size);

```
  }
```
```
}
```
```
 
```
```
class Stain {
```

  constructor(x = innerWidth, y = innerHeight) {

```
    this.x = x / 2;
```
```
    this.y = y / 2;
```
```
    this.num = 1;
```
```
    this.step = TWO_PI / this.num;
```
```
 
```

    this.size = 1 + Math.random() * Math.random() * 2;

```
    this.rad = Math.random() * 300;
```
```
    this.dots = {};
```
```
    this.dotId = 0;
```

    this.col = Math.random() < 0.8 ? "white" : "black";

```
    this.to = Math.random() * 7;
```
```
    this.S = 20 + Math.random() * 50;
```
```
    this.R = 100 + Math.random() * 300;
```
```
    this.rr = 50 + Math.random() * 300;
```

    this.dir = Math.random() < 0.6 ? 1 : Math.random() * 10 - 5;

```
    this.v = 1;
```
```
    this.tt = 0;
```

    if (Math.random() * 0.25) this.v = Math.random() * 5;

```
  }
```
```
 
```
```
  draw() { 
```
```
    const circ = this.rad * TWO_PI;
```
```
    this.rad -= this.v;
```
```
 
```
```
    this.step = TWO_PI / circ;
```
```
 
```
```
    if (this.rad > 0) {
```

      for (let i = 1; i <= this.R; i += this.S) {

        let t = (i * this.step + this.to) * this.dir;

        let x = this.x + this.rad * Math.cos(t);

        let y = this.y + this.rad * Math.sin(t);

        this.dots[this.dotId] = new Dot(this.dotId, x, y, t, this);

```
        this.dotId++;
```
```
      }
```
```
    }
```
```
    for (let i in this.dots) {
```

      if (this.dots[i]) this.dots[i].draw();

```
    }
```
```
  }
```
```
}
```
```
 
```
```
onresize = e => {
```
```
  canvas.width = innerWidth;
```
```
  canvas.height = innerHeight;
```
```
  c.fillStyle = "black";
```

  c.fillRect(0, 0, innerWidth, innerHeight)

```
}
```
```
 
```
```
onresize()
```
```
 
```
```
let ss = [new Stain()];
```
```
 
```
```
function loop() {
```
```
  if (Math.random() < 0.05) {
```
```
    ss.push(
```

      new Stain(Math.random() * innerWidth * 2, Math.random() * innerHeight * 2)

```
    );
```
```
  }
```
```
  ss.forEach((s) => s.draw());
```
```
  c.globalAlpha = 0.05;
```

  c.drawImage(canvas, 0, 3, canvas.width + 0.2, canvas.height - 6);

```
  c.globalAlpha = 1;
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Speed coding for some recent youtube shorts…

July 7, 2024

// animation // canvas // color // curves // graphics // hacks // javascript // math // random // speed-coded // speedcoding // tricks

Golfed Codepen – 3D Spiral Thing

// sort of golfed version of https://www.instagram.com/p/C1uv6Kqv19T/

```
// by @mewtru
```
```
b = document.body
```
```
a = Object.assign
```

a(b.style, { background:'#000', color:'#fff'})

w = 'snippet.zone snippet.zone'.toUpperCase().split``

```
F = (n, O = 0, C, S, o, t) => { 
```

  b.innerHTML += `<div id=${n} style='position:absolute;left:50%;top:50%;translate:-50% -50%;width:100% text-align:center;white-space:nowrap'></div>`

  w.map(l => this[n].innerHTML += `<span style='display:inline-block;margin-right:5px;font-size:28px'>${l}</span>`)

```
  t = O
```
```
  setInterval(_ => {
```
```
    t += .005
```

    ;[...this[n].children].map((e, i) => {

```
      T = t + i / 2.7
```
```
      a(e.style, {
```

        translate: `0 ${Math.sin(T) * 100}px`,

```
        scale: Math.cos(T) * .5 + .5})
```
```
    }, 16)
```
```
  })
```
```
}
```
```
F('Z') 
```
```
F('X', 3)
```

“Very cool” pen by Lucas Fernando that comes from @mewtru
I decided to do a speed-coded semi-golfed version… can definitely be way more golfed 😀

January 10, 2024

// 3d // animation // codegolf // css // dom // golfed // hacks // javascript // math // speed-coded // speedcoding // strings

Older Posts

Base36 Alphabet Animated

Flun Draw

T Plant

Swrls

Golfed Codepen – 3D Spiral Thing

Recent

Archive