Snippet Zone

Obfuscated Pre

```
b = document.body
```
```
with(b.style) 
```

  fontFamily = 'monospace', fontSize = '2em',

  transform = 'skew(10deg) translateX(40px)'

```
 
```
```
N = '<br>';
```
```
 
```
```
(f=(_='*')=>(
```

  b.innerHTML+=` <b style='opacity:${Math.random()+.2}'>${_}</b>`,f))('<pre>')

```
  (   )(   )(   )(   )(N)
```
```
   ('(')('0')('_')('_')(N)
```
```
    ('-')(   )(   )('-')(N)
```
```
     ('_')('_')('0')(')')(N)
```
```
      ('-')(   )(   )('-')(N)
```
```
       ('(')('0')('_')('_')(N)
```
```
        ('-')(   )(   )('-')(N)
```
```
         ('_')('_')('0')(')')(N)
```
```
          ('-')(   )(   )('-')(N)
```
```
           ('(')('0')('_')('_')(N)
```
```
            (   )(   )(   )(   )
```

Not really sure what this is… just playing around…

October 23, 2021

// codegolf // javascript // obfuscation // speed-coded // strings

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

Older Posts

Newer Posts

Obfuscated Pre

With Style

For Golf Down

Flower of Life Canvas

SVG getScreenCTM

Recent

Archive