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

Responsive Radial Gradient Background

  1. function rect(x1, y1, x2, y2, col) {
  2.   const dx = x1 - x2;
  3.   const dy = y1 - y2;
  4.   const dist = Math.sqrt(dx * dx + dy * dy);
  5.   return `radial-gradient(circle at ${x1}% ${y1}%, ${col} 0, ${col} ${dist}%, transparent ${dist +
  6.     0.1}%)`;
  7. }
  8.  
  9. const NUM = 90;
  10. const MAX_SIZE = 20;
  11.  
  12. const rects = [];
  13. const colors = ['rgba(0, 0, 0, 0.2)', 'white', 'black'];
  14.  
  15. for (let i = 0; i < NUM; i++) {
  16.   const x1 = Math.random() * 100; // %
  17.   const y1 = Math.random() * 100;
  18.   const size = Math.random() * Math.random() * MAX_SIZE;
  19.   const idx = Math.random() < 0.3 ? 1 + Math.round(Math.random()) : 0;
  20.   col = colors[idx];
  21.   rects.push(rect(x1, y1, x1 + size,  y1 + size, col));
  22. }
  23.  
  24. document.body.style.backgroundImage = rects.join(', ');
  25.  
  26. document.body.innerHTML += `
  27.   <style>
  28.     body, html {
  29.       height: 100%;
  30.       background-repeat: no-repeat;
  31.     }
  32.   </style>
  33. `;

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

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

Conic Gradient CSS

  1. <div></div>
  2. <style>
  3.   div {
  4.     width: 200px;
  5.     height: 200px;
  6.     background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);
  7.   }
  8. </style>


CSS conic gradient. I got this snippet from CSS Tricks article… 😀

// css // gradients // graphics // html
Newer Posts

Recent

Archive

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