Javascript FireCracker Animation

|| FireCracker Animation Using JavaScript ||

#CODE :

<!DOCTYPE html>
<html>
<head>
<title>JavaScript FireDesign</title>
<style type="text/css">
body{
background: #000;
margin: 0;
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
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>

#OUTPUT:

Comments

The Most Populer

Random Captcha Generator

How to generate random captcha || JAVASCRIPT techinc Here, you will going to teach how to generate random captcha by javascript #CODE: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <canvas width=150 height=70 style="border:1px solid black;"></canvas><br> <button style="width:150px; height:40px; color: red; -webkit-tap-highlight-color:rgba(0,0,0,0);" onclick="generateCaptcha()">Generate Captcha</button> <style type="text/css"> body{ ...

The World Map

The World Map Here is the code of Designing the WORLD MAP by using Html-Css-Js only.Google Map provide you the option that is Map for Developer. So, CodoBlog provide you the code for how to design the map. CODE - <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet'/> <link rel="stylesheet" type="text/css" href=""> <title>The World Map</title> <style> *{ margin: 0; padding: 0; } #map{ width: 100vw; height: 100vh; } </style> </head> <body> <div id='map'></div> </body> <script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script> <script> mapboxgl.accessTok...

Code for icon design | camera icon code | html-css code

Camera ICON creation || Code for the camera icon Here is the code for camera icon design..try with your efforts..! ICON #CODE : >> <!DOCTYPE html> <html> <head> <title>Camera Icon Creation</title> <style type="text/css"> body{ margin:0; background-color: lightblue; } .outer{ width: 50%; height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0 auto; } .body{ background-color: white; border-radius: 30%; width: 11rem; height: 11rem; position: relative; box-shadow: 1px 1px 6px 1px slategrey; } .red{ border-radius: 50%; background-color: crimson; width: 10px; height: 10px; position: absolute; ...

Search This Blog