Snippet Zone

Responsive Radial Gradient Animation

function rect(x1, y1, x2, y2, col, blur=.1) {

```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    blur}%)`;
```
```
}
```
```
 
```
```
const NUM = 8; 
```
```
 
```
```
let rects = [];
```

const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];

```
 
```
```
let x = 0;
```
```
let y = 0;
```
```
let t = 8;
```
```
function loop() { 
```
```
  rects = [];
```
```
 
```
```
  for (let i = 0; i < NUM; i++) { 
```
```
    x = 50 + 30 * Math.sin(t + i / 2);
```

    y = 50 + 30 * Math.cos(t * 1.5 * i / 10);

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(255, 255, 255, 1)', 1));

    rects.push(rect(x, y, x + 5, y + 5, 'rgba(0, 0, 0, 0.4)',

```
      8 + 6 * Math.cos(y / 10)));
```
```
  }
```
```
  t += .04;
```

  document.body.style.backgroundImage = rects.join(', ');

```
  window.requestAnimationFrame(loop);
```
```
}
```
```
loop()
```
```
 
```
```
document.body.innerHTML += `
```
```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background: #ccc;
```
```
      margin: 0;
```
```
      background-repeat: no-repeat;
```
```
      width: 100%;
```
```
    }
```
```
  </style>
```
```
`;
```

Animated variation on yesterdays post – many animating circles with no divs or canvas, just radial-gradients…

December 7, 2021

// animation // css // dom // graphics // hacks // javascript // math

Responsive Radial Gradient Background

```
function rect(x1, y1, x2, y2, col) {
```
```
  const dx = x1 - x2;
```
```
  const dy = y1 - y2;
```

  const dist = Math.sqrt(dx * dx + dy * dy);

  return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +

```
    0.1}%)`;
```
```
}
```
```
 
```
```
const NUM = 90;
```
```
const MAX_SIZE = 20;
```
```
 
```
```
const rects = [];
```

const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];

```
 
```
```
for (let i = 0; i < NUM; i++) {
```
```
  const x1 = Math.random() * 100; // %
```
```
  const y1 = Math.random() * 100;
```

  const size = Math.random() * Math.random() * MAX_SIZE;

  const idx = Math.random() < 0.3 ? 1 + Math.round(Math.random()) : 0;

```
  col = colors[idx];
```

  rects.push(rect(x1, y1, x1 + size,  y1 + size, col));

```
}
```
```
 
```

document.body.style.backgroundImage = rects.join(', ');

```
 
```
```
document.body.innerHTML += `
```
```
  <style>
```
```
    body, html {
```
```
      height: 100%;
```
```
      background-repeat: no-repeat;
```
```
    }
```
```
  </style>
```
```
`;
```

Many circles with no divs or canvas, just radial-gradients…

December 6, 2021

// css // dom // gradients // graphics // hacks // javascript

Single Div Box Shadow CSS

```
<div></div>
```
```
<style>
```
```
  div {
```
```
    position: absolute;
```
```
    left: 0; top: 0;
```
```
    width: 1px; height: 1px;
```
```
    box-shadow: 
```
```
      140px 90px 0px 4px white,
```

      140px 90px 0px 30px rgba(255, 0, 0, 0.2),

```
      140px 90px 0px 10px teal,
```
```
      90px 80px 0px 4px white,
```

      90px 80px 0px 30px rgba(255, 0, 0, 0.2),

```
      90px 80px 0px 10px teal,
```
```
      70px 60px 0px 20px orange,
```
```
      60px 50px 0px 20px blue,
```
```
      50px 40px 0px 20px red,
```
```
      40px 30px 0px 20px black;
```
```
  }
```
```
</style>
```

Many box shadows on a single div.

December 5, 2021

// css

Find preventDefault or stopPropagation JavaScript

Event.prototype.preventDefault = () => {

```
  debugger;  
```
```
};
```
```
 
```

// @NOTE `stopPropagation` or `stopImmediatePropagation` could also be

```
// preventing events 
```
```
 
```

// Event.prototype.stopPropagation = () => {

```
//   debugger;  
```
```
// };
```

This is a real life saver – especially for large confusing legacy projects with lots of event logic. You can use this to track down an unwanted preventDefault and/or stopPropagation. I needed this recently to see which of many calls to preventDefault was preventing my touch events from working in a certain area.

I usually pop this into the console and step through things. If you’ve never seen debugger before read about it here…

December 4, 2021

// events // javascript

Track Mouse and Touch Events

```
const evts = [
```

  'touchstart', 'touchmove', 'touchend',

```
  'mousedown', 'mousemove', 'mouseup', 
```
```
  'click', 'mousenter', 'mouseleave'
```
```
]
```
```
evts.forEach(type => {
```

  document.addEventListener(type, e => {

```
    console.log('event: ', type)
```
```
  })
```
```
})
```

See which mouse events are able to fire on the document.

I used this recently when fixing some issues with Android Talkback. Screenreaders will swallow mouse events in some cases.

You can add pointer events too if you need them…

December 3, 2021

// accessibility // events // javascript

Older Posts

Newer Posts

Responsive Radial Gradient Animation

Responsive Radial Gradient Background

Single Div Box Shadow CSS

Find preventDefault or stopPropagation JavaScript

Track Mouse and Touch Events

Recent

Archive