Snippet Zone

With Style

```
with(document.body.appendChild(
```
```
      document.createElement('div')
```
```
    ).style) 
```
```
      height = '100px', 
```
```
      background = 'red',
```
```
      border = '3px solid blue',
```
```
      transform = 'rotate(10deg)'
```

Was looking through some old code and saw something like this… people don’t like with and it doesn’t work in “strict mode”… I use it here on Snippet Zone for fun speed-coding stuff…

October 22, 2021

// javascript // speed-coded

For Golf Down

```
for(i=6;i--;)console.log(i)
```

October 21, 2021

// codegolf // javascript

Flower of Life Canvas

```
((
```
```
  d = document,
```
```
  b = d.body,
```
```
  rad = (innerWidth * 1.9) / 6,
```
```
  theta = 0,
```
```
  thetaSpeed = 0.03,
```
```
  cx = innerWidth / 4,
```
```
  cy = innerHeight / 4,
```
```
  ox = 0,
```
```
  oy = 0,
```
```
  offTheta,
```
```
  x, y, ang, step, blur,
```
```
  _
```
```
) => {
```
```
  Object.assign(b.style, {
```
```
    background: 'black',
```
```
    margin: 0
```
```
  }) 
```
```
 
```

  blur = Object.assign(d.createElement`canvas`, {

```
    width: innerWidth * 2,
```
```
    height: innerHeight * 2
```
```
  }).getContext`2d`
```
```
 
```
```
  with (Math) {
```
```
    with (b.appendChild(
```

      Object.assign(d.createElement`canvas`, {

```
        width: innerWidth * 2,
```
```
        height: innerHeight * 2
```
```
      })
```
```
    ).getContext`2d`) {
```
```
      Object.assign(canvas.style, {
```
```
        width: '100%',
```
```
        height: '100%'
```
```
      })
```
```
 
```
```
      onresize = () => {
```

        blur.canvas.width = canvas.width = innerWidth * 2

        blur.canvas.height = canvas.height = innerHeight * 2

```
        rad = (innerWidth * 2.5) / 6
```
```
        cx = innerWidth
```
```
        cy = innerHeight
```
```
        fillStyle = '#000'
```

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

```
      }
```
```
      onresize()
```
```
 
```
```
      step = (PI * 2) / 6
```
```
 
```
```
      _ = t => {
```
```
        ang = ~~(t / 500) % 7
```
```
 
```
```
        globalAlpha = 0.23
```
```
        fillStyle = '#fff'
```
```
 
```
```
        if (ang > 0) {
```
```
          offTheta = step * ang
```
```
          ox = rad * cos(offTheta)
```
```
          oy = rad * sin(offTheta)
```
```
        } else {
```
```
          ox = 0
```
```
          oy = 0
```
```
        }
```
```
 
```
```
        for (i = 0; i < 20; i++) {
```

          x = ox + cx + rad * cos(theta)

          y = oy + cy + rad * sin(theta)

```
          theta += thetaSpeed
```
```
 
```
```
          fillRect(x, y, 4, 4)
```
```
        }
```
```
 
```
```
        blur.drawImage(canvas, 0, 0)
```
```
 
```
```
        globalAlpha = 0.05
```
```
        drawImage(blur.canvas, 0, 2)
```
```
 
```
```
        requestAnimationFrame(_)
```
```
      }
```
```
      _()
```
```
    }
```
```
  }
```
```
})()
```

Speed coded animated flower of life on canvas

October 20, 2021

// animation // canvas // javascript // math // obfuscation // speed-coded

SVG getScreenCTM

```
const el = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```
```
el.innerHTML = `
```

<svg width="200" height="200" viewBox="0 0 200 200">

```
  <rect 
```
```
    class="rect"
```

    transform="translate(50, 50) scale(1.2) rotate(25)"

```
    fill="purple"
```

    x="0" y="0" width="50" height="50" />

```
</svg>
```
```
`;
```
```
 
```
```
const box = document.body.appendChild(
```
```
  document.createElement`div`
```
```
);
```
```
 
```
```
Object.assign(box.style, {
```
```
  position: 'absolute',
```
```
  left: 0, top: 0,
```
```
  width: '50px',
```
```
  height: '50px',
```
```
  transformOrigin: '0 0',
```
```
  outline: '5px solid red'
```
```
});
```
```
 
```

const rect = document.querySelector('.rect');

const {a, b, c, d, e, f} = rect.getScreenCTM()

```
 
```
```
box.style.transform = `
```
```
  matrix(${[a, b, c, d, e, f]})
```
```
`;
```

The transformation matrix of an SVG element can be obtained using getScreenCTM or getCTM. The latter of which will be relative to the SVG coordinate space, vs the coordinate space of the page.

Here we take the matrix data from getScreenCTM and use it on a div to place a border over an SVG rect node. This is great for layering HTML on top of SVG.

October 19, 2021

// dom // javascript // math // matrix // svg // tricks // ui

Wiggly Line on Canvas 2

const canvas = document.body.appendChild(

```
  document.createElement('canvas')
```
```
);
```
```
const c = canvas.getContext('2d');
```
```
document.body.style.margin = 0;
```
```
 
```
```
function resize() {
```
```
  canvas.width = innerWidth * 2;
```
```
  canvas.height = innerHeight * 2;
```

  canvas.style.width = innerWidth + 'px';

  canvas.style.height = innerHeight + 'px';

```
}
```
```
addEventListener('resize', resize);
```
```
resize();
```
```
 
```
```
const PAD = 50;
```
```
const RAD = 2;
```
```
const SPEED = 200;
```
```
const TWO_PI = Math.PI * 2;
```
```
 
```
```
let mode = 'draw';
```
```
 
```
```
let t = Math.random() * TWO_PI, 
```
```
    x = canvas.width / 2, 
```
```
    y = canvas.height / 2,
```
```
    vx = 0, vy = 0, ta = 0;
```
```
 
```
```
let solid = false;
```
```
let dotMod = 3;
```
```
function loop() {
```

  if (Math.random() < .01) solid = !solid;

  if (Math.random() < .01) dotMod = [2, 3, 6][Math.floor(Math.random() * 3)]

```
 
```
```
  for (var i = 0; i < SPEED; i++) {
```
```
    t = Math.sin(ta) * TWO_PI;
```
```
    vx = RAD * Math.cos(t);
```
```
    vy = RAD * Math.sin(t);
```
```
    ta += Math.random() * 0.1 - 0.05;
```
```
    x += vx;
```
```
    y += vy;
```
```
 
```
```
    if (Math.random() < 0.005) {
```
```
      mode = 'no draw';
```
```
    } else if (Math.random() < 0.005) {
```
```
      mode = 'draw';
```
```
    }
```
```
 
```

    if (mode === 'draw' && (solid || i % dotMod === 0)) {

```
      c.fillStyle = 'black';
```
```
      c.fillRect(x, y, 2, 2);
```
```
    }
```
```
 
```
```
    if (x < -PAD) {
```
```
      x = canvas.width + PAD;
```

    } else if (x > canvas.width + PAD) {

```
      x = -PAD;
```
```
    }
```
```
    if (y < -PAD) {
```
```
      y = canvas.height + PAD;
```

    } else if (y > canvas.height + PAD) {

```
      y = -PAD;
```
```
    }
```
```
  }
```
```
 
```
```
  requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

This is a variation on a post from awhile back. I was posting it over on dev.to and realized I wanted it to look a bit different.

October 18, 2021

// animation // canvas // graphics // javascript

Older Posts

Newer Posts

With Style

For Golf Down

Flower of Life Canvas

SVG getScreenCTM

Wiggly Line on Canvas 2

Recent

Archive