How to make amezing fireworks by html

By  | In

   In this artical i will show you how to make amezing fireworks by ushing HTML.

HTML Code:

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fireworks</title>
</head>
<body>
     <a href="https://www.codefolder.online/2020/04/how-to-make-amezing-fireworks-by-html.html">Designed By Maxon poll</a>
    <canvas></canvas>

    <script>
    
        var t = 0;
        var c = document.querySelector("canvas");     
        var $ = c.getContext('2d');
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        $.fillStyle = 'hsla(0,0%,0%,1)';

        window.addEventListener('resize', function() {
          c.width = window.innerWidth;
          c.height = window.innerHeight;
        }, false);

        function draw() {
          $.globalCompositeOperation = 'source-over';
          $.fillStyle = 'hsla(0,0%,0%,.1)';
          $.fillRect(0, 0, c.width, c.height);
          var foo, i, j, r;
          foo = Math.sin(t) * 2 * Math.PI;
          for (i=0; i<400; ++i) {
            r = 400 * Math.sin(i * foo);
            $.globalCompositeOperation = '';
            $.fillStyle = 'hsla(' + i + 12 + ',100%, 60%,1)';
            $.beginPath();
            $.arc(Math.sin(i) * r + (c.width / 2), 
                  Math.cos(i) * r + (c.height / 2), 
                  1.5, 0, Math.PI * 2);
            $.fill();

          }
          t += 0.000005;
          return t %= 2 * Math.PI;

        };

        function run() {
          window.requestAnimationFrame(run);
          draw();
        }
        run();
    </script>
  <a href="https://www.codefolder.online/2020/04/how-to-make-amezing-fireworks-by-html.html">Designed By Maxon poll</a>
</body>
</html>

CSS Code:


body{
  background:#000;
  margin:0;
  width:100%;
  overflow:hidden;
}

I hope you liked👍 this article. If you liked 👍it,do share🔗 it and comment📣 how you liked this article?  💗💗💗💗💗

0 Comments:

Post a Comment