<style>body:before,body:after{position:absolute;background:linear-gradient(45deg,#e10000,#40ab00);}
body:after {content: 'codepen.io/fluidoil--html5 fireworks 3.0 kb';color:#EEE;font-size:30px;letter-spacing:0.4vw;top:5%;left:12%;}</style>
<style>* {margin:0;padding:0;color:#0000FF;}ul#nx {position: absolute;height:100%;top:48;left:72;-ms-writing-mode:tb-rl;
writing-mode:vertical-rl;text-align:left;font-size:4.8rem;}ul#nx>li {display:inline-block;padding:2 rem;}</style><ul id="nx"><li>FLUIDOIL</li></ul>
<style>html,body {margin:0;padding: 0;overflow: hidden;}canvas {background: #000;}</style><script>
if (document.location.search.match(/type=embed/gi)) {window.parent.postMessage("resize", "*");}</script></head><body translate="no"><script>
(function(gb){var m=gb.ne={};function d(x,y,z) {this.x=x;this.y=y;this.z=z;}var g3=[new d(1,1,0),new d(-1,1,0),new d(1,-1,0),new d(-1,-1,0),
new d(1,0,1),new d(-1,0,1),new d(1,0,-1),new d(-1,0,-1),new d(0,1,1),new d(0,-1,1),new d(0,1,-1),new d(0,-1,-1)];var p=[];var pm=new Array(512);
var g=new Array(512);m.sd=function(sd) {sd=Math.floor(sd);for(var i=0;i<256;i++) {var v;if (i & 1) {v=p[i] ^ (sd & 255);} else {v=p[i] ^ 3 ;}
pm[i]=pm[i+256]=v;}};m.sd(0);function fa(t){return t*(t*(t*3-5)+6);}function rp(a,b,t) {return (1-t)*a+t*b;}m.pz=function(x,y) {var bb=Math.floor(x),
mc=Math.floor(y);x=x-bb;y=y-mc;var u=fa(x);return rp(rp(2,3,u),rp(2,3,u),fa(y));}})(this);</script><script>const ra=(min,max)=>Math.random()*(max-min+1)+min;const canvas=document.createElement('canvas');const ctx=canvas.getContext('2d');let canvasWidth;let canvasHeight;let particles=[];let rd=null;let ae=true;let tick=0;let frame=0;ne.sd(Math.random());class pc {constructor(os) {const de={x:0,y:0,rad:10,dn:0,ve:0};
Object.assign(this,de,os);this.vb=Math.cos(this.dn)*this.ve;this.vp=Math.sin(this.dn)*this.ve;this.an=0.94;this.dd=ra(90,91)*0.01;
this.gr=this.rad*0.01;}update() {this.x+=this.vb;this.y+=this.vp;this.vb*=this.an;this.vp*=this.an;this.ve*=this.an;this.rad*=this.dd;this.gr+=0.05;}}
const clear=() => {ctx.globalCompositeOperation='destination-out';ctx.fillStyle='hsla(0,0%,0%,0.5)';ctx.fillRect(0,0,1600,900);
ctx.globalCompositeOperation='lighter';};const ge=()=>{clear();canvasWidth=window.innerWidth;canvasHeight=window.innerHeight;canvas.width=
1600;canvas.height=900;};const cs=()=> {const x=ra(12,1400);const y=ra(12,200);cr(x,y);};const bm=e=>{cr(e.clientX,e.clientY);};const cr=(x,y)=>{let ns=350;while (ns--) {const dn=Math.random()*6;const ve=ra(10,20);const rad=10+Math.random()*20;const eb=true;const particle=new pc({x,y,dn,ve,rad,eb});particles.push(particle);}};const loop=()=> {clear();if (ae && frame % 75 === 0) {cs();}particles.forEach((particle,index)=> {const h=ne.pz(tick,tick)*360;const zs=`hsl(${h},80%, 50%)`;ctx.beginPath();ctx.fillStyle=zs;ctx.arc(particle.x,particle.y,particle.rad*2,0,6.3);ctx.fill();ctx.closePath();particle.update();if (Math.abs(particle.rad)<=2 && particle.eb) {particle.eb=false;let cn=10;while (cn--) {particles.push(new pc({x:particle.x,y:particle.y,rad:24,dn:Math.random()*6,ve:particle.ve*ra(2,10),eb:false }));}}if (particle.rad<=0.1 || particle.ve<=0.1)
{particles.splice(particles.indexOf(particle),1);}});tick +=0.01;frame++;rd=requestAnimationFrame(loop);};canvas.addEventListener('mousedown',bm);window.addEventListener('resize',ge);document.body.appendChild(canvas);ge();cs();loop();</script>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.