)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Make a Debugging Dot

  1. function dot(x, y, radius, color) {
  2.   const el = document.createElement('div');
  3.   const size = `${radius * 2}px`;
  4.   Object.assign(el.style, {
  5.     position: 'absolute', 
  6.     left: `${x}px`,
  7.     top: `${y}px`,
  8.     width: size,
  9.     height: size,
  10.     transform: `translate(${-radius}px, ${-radius}px)`,
  11.     borderRadius: '50%',
  12.     background: color
  13.   });
  14.   el.classList.add('dot');
  15.   document.body.appendChild(el);
  16.   return el;
  17. }
  18.  
  19. dot(100, 100, 10, 'red');
  20. dot(200, 100, 5, 'blue');
  21.  
  22. for (let i = 0; i < 20; i++) {
  23.   dot(20 + i * 12, 200, 5, `hsl(${i * 10}deg, 60%, 50%)`)
  24. }

Draw a dot – good for visualizing things when doing animation and positioning logic.

// css // graphics // javascript // tricks
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}