diff --git a/Amazing multicolor fireworks/index.html b/Amazing multicolor fireworks/index.html
new file mode 100644
index 0000000..a12e108
--- /dev/null
+++ b/Amazing multicolor fireworks/index.html	
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Fireworks</title>
+</head>
+<body>
+    
+    <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>
+</body>
+</html>
diff --git a/Amazing multicolor fireworks/style.css b/Amazing multicolor fireworks/style.css
new file mode 100644
index 0000000..a7d70fe
--- /dev/null
+++ b/Amazing multicolor fireworks/style.css	
@@ -0,0 +1,6 @@
+body{
+  background:#000;
+  margin:0;
+  width:100%;
+  overflow:hidden;
+}
