Snippet Zone

Animate to Target

function box(x, y, col = 'red', cursor){

  const box = document.body.appendChild(

```
    document.createElement`div`
```
```
  )
```
```
  box.classList.add(col + '-box')
```
```
  Object.assign(box.style, {
```
```
    position: 'absolute', 
```
```
    left: `${x}%`,
```
```
    top: `${y}%`,
```
```
    width: '30px',
```
```
    height: '30px',
```
```
    background: col,
```
```
    cursor: cursor || 'pointer',
```
```
    color: 'white'
```
```
  })
```
```
  return box
```
```
}
```
```
 
```
```
const NUM = 10;
```
```
for (let i = 0; i < NUM; i++) 
```
```
  box(
```
```
    Math.random() * 100, 
```
```
    Math.random() * 100)
```
```
 
```
```
 
```
```
let destX = destY = x = y = 0;
```

const blue = box(destX, destY, 'blue', 'default')

```
const info = box(0, 30, 'gray')
```
```
info.innerHTML = 'click the red boxes'
```
```
Object.assign(info.style, {
```
```
  width: '100%', 
```
```
  padding: '.5em',
```
```
  fontFamily: 'sans-serif'
```
```
})
```
```
 
```

document.addEventListener('click', e => {

```
  const curr = e.target
```

  if (curr.classList.contains('red-box')) {

```
    destX = curr.offsetLeft
```
```
    destY = curr.offsetTop
```
```
    curr.style.background = 'black'
```

    setTimeout(() => curr.style.background = 'red', 700)

```
    if (info.parentNode != null) { 
```

      info.parentNode.removeChild(info);

```
    }
```
```
  }
```
```
})
```
```
 
```
```
function loop() {
```
```
  x += (destX - x) / 12
```
```
  y += (destY - y) / 12
```

  blue.style.transform = `translate3d(${x}px, ${y}px, 0)`

```
  requestAnimationFrame(loop)
```
```
}
```
```
loop()
```

Click a red box, watch the blue box animate…

November 27, 2021

// animation // dom // html // javascript

Obfuscated Pseudo-typed Globals

```
number:age = 33;
```
```
number:height = 6;
```
```
string:name = 'joe';
```
```
object:person = { name, age, height };
```
```
console.log(person);
```

WARNING: do not use this

This one is bad enough that I feel the need to put a warning. This is some weird obfuscation… I’ve put labels before global variable definitions so they look like type declarations.

It’s funny, monaco says lots of stuff about this one if you hit the Try it out… button you can see…

November 26, 2021

// humor // javascript // obfuscation

Oscillating Canvas Wave

```
const c = document.body
```

  .appendChild(document.createElement('canvas'))

```
  .getContext('2d');
```
```
 
```
```
Object.assign(document.body.style, {
```
```
  margin: 0,
```
```
  height: '100%'
```
```
});
```
```
 
```
```
Object.assign(c.canvas.style, {
```
```
  position: 'absolute',
```
```
  left: 0,
```
```
  top: 0,
```
```
  width: '100%',
```
```
  height: '100%'
```
```
});
```
```
 
```
```
let t = 0;
```
```
 
```
```
function resize() {
```
```
  c.canvas.width = innerWidth * 2;
```
```
  c.canvas.height = innerHeight * 2;
```
```
  draw();
```
```
}
```

window.addEventListener('resize', resize);

```
resize();
```
```
 
```
```
function draw() {
```
```
  const {
```
```
    canvas: { width, height }
```
```
  } = c;
```
```
 
```

  c.fillStyle = 'rgba(155, 155, 155, .4)';

```
  c.fillRect(0, 0, width, height);
```
```
  c.fillStyle = '#000';
```
```
 
```
```
  let x = innerWidth;
```
```
  let y = 0;
```
```
 
```
```
  t += 0.05;
```

  for (let i = 0; i < innerHeight; i++) {

    x += 2 * Math.cos(t + i * 0.1 * Math.cos(i / 200));

```
    y += 2;
```
```
    c.fillRect(x, y, 100, 1);
```
```
  }
```
```
}
```
```
 
```
```
function loop() {
```
```
  draw();
```
```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop();
```

Speed coded oscillating wave on canvas… Looks better in fullscreen.

November 25, 2021

// animation // canvas // javascript // speed-coded

CSS Color Picker Gradient

```
const col = document.body.appendChild(
```
```
  document.createElement('div')
```
```
);
```
```
Object.assign(col.style, {
```
```
  position: 'absolute',
```
```
  left: 0, top: 0,
```
```
  width: '100%',
```
```
  height: '200px',
```

  background: 'linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'

```
});
```

CSS gradient that cycles hue – useful for a colorpicker. This is the main part of the snippet:

linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)

November 24, 2021

// color // css // dom // javascript

SVG Isometric Box

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

  <svg id="svg" width="100%" height="100%" viewBox="0 0 550 500">

```
    ${(() => {
```
```
      let str = ''
```
```
      let c = 10;
```
```
      let num = 200;
```
```
      let colStep = 225 / num
```
```
      for (let i = 0; i < num; i++) {
```
```
        c += colStep;
```
```
        col = `rgb(${c}, ${c}, ${c})`;
```
```
        str += `<rect 
```
```
          fill="${col}" 
```
```
          x="0" y="0" 
```
```
          width="200" height="200" 
```

          transform="translate(275, ${250 - i}) scale(1, .5) rotate(45)" />`

```
      }
```
```
      return str
```
```
    })()}
```
```
  </svg>
```
```
  <style>
```
```
    svg, div, body, html {
```
```
      overflow: visible; 
```
```
      height: 100%; 
```
```
      width: 100%;
```
```
      margin: 0; padding: 0;
```
```
      background: gray;
```
```
    }
```
```
  </style>
```
```
  `;
```

Draw a shaded isometric box in SVG.

November 23, 2021

// dom // javascript // strings // svg

Older Posts

Newer Posts

Animate to Target

Obfuscated Pseudo-typed Globals

Oscillating Canvas Wave

CSS Color Picker Gradient

SVG Isometric Box

Recent

Archive