"use strict"; let c, ctx, W, H, lastTimeCalled, fps, addSpeed, lines, linesInside; const random = (max=1, min=0) => Math.random() * (max - min) + min; const clear = () => { ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0, 0, W, H); }; const calcFPS = () => { let timeDiff = Date.now() - lastTimeCalled; lastTimeCalled = Date.now(); fps.innerText = "fps: " + Math.round(1000/timeDiff); }; window.onload = () => { c = document.getElementById("canvas"); ctx = c.getContext("2d"); W = c.width = window.innerWidth; H = c.height = window.innerHeight; lastTimeCalled = Date.now(); fps = document.getElementById("Fps"); lines = []; linesInside = []; addSpeed = 1; eventUser(); createLine(); animate(); }; class Line { constructor(angle, rad, radMax, color, speed, add1, add2) { this.angle = angle; this.rad = rad; this.radMax = radMax; this.color = color; this.add1 = add1; this.add2 = add2; this.startX = W/2+(this.rad*Math.cos(this.angle)); this.startY = H/2+(this.rad*Math.sin(this.angle)); this.x = W/2+(this.rad*Math.cos(this.angle+this.add1)); this.y = H/2+(this.rad*Math.sin(this.angle+this.add1)); this.endX = W/2+(this.rad*Math.cos(this.angle+this.add2)); this.endY = H/2+(this.rad*Math.sin(this.angle+this.add2)); this.speed = speed; this.direction = 1; this.speedMaxX1 = W/2+(this.radMax*Math.cos(this.angle+this.add1)); this.speedMinX1 = W/2+(this.rad*Math.cos(this.angle+this.add1)); this.speedMaxY2 = H/2+(this.radMax*Math.sin(this.angle+this.add1)); this.speedMinY2 = H/2+(this.rad*Math.sin(this.angle+this.add1)); } draw() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.moveTo(this.startX, this.startY); ctx.quadraticCurveTo(this.x, this.y, this.endX, this.endY); ctx.fill(); } update() { this.x = this.x+(this.speed*addSpeed*this.direction*Math.cos(this.angle+this.add1)); this.y = this.y+(this.speed*addSpeed*this.direction*Math.sin(this.angle+this.add1)); this.draw(); } } const createGoogle = () => { ctx.beginPath(); ctx.fillStyle = '#df001f'; ctx.arc(W/2, H/2, 150, 0, 2 * Math.PI, false); ctx.fill(); ctx.beginPath(); ctx.strokeStyle = '#000'; ctx.fillStyle = '#fdeb01'; ctx.moveTo(W/2+35,H/2-60); ctx.arc(W/2, H/2, 150.3, 0, 2, false); ctx.lineTo(W/2+35, H/2+60); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = '#3ab43b'; ctx.strokeStyle = '#000'; ctx.lineWidth = 3; ctx.moveTo(W/2+35, H/2+60); ctx.arc(W/2, H/2, 150.3, 2, 4.1, false); ctx.lineTo(W/2-68, H/2); ctx.fill(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle = 'white'; ctx.arc(W/2, H/2, 70.3, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle = '#1968a0'; ctx.arc(W/2, H/2, 55.3, 0, 2 * Math.PI); ctx.fill(); }; const createLine = () => { for(let a=0; a<6.27; a+=0.03){ let color; let rad = 147; let radMax = random(220, 170); let speed = random(2, 1); if(a<=1.98)color = "#fdeb01"; if(a>1.98&&a<=4.075)color ="#3ab43b"; if(a>4.075)color = "#df001f"; lines.push(new Line(a,rad, radMax, color, speed, 0.02, 0.03)); } for(let b=0; b<6.23; b+=0.06){ let radWhite = 70; let radWhiteMax = random(110, 90); let radBlue = 55; let radBlueMax = random(80, 70); let speed = random(1.5, 0.5); linesInside.push(new Line(b , radWhite, radWhiteMax, "white", speed, 0.03, 0.06)); linesInside.push(new Line(b, radBlue, radBlueMax, "#1968a0", speed, 0.03, 0.06)); } }; const eventUser = () => { c.addEventListener("mousedown", function(event){ addSpeed = 3; }); c.addEventListener("mouseup", function(event){ addSpeed = 1; }); c.addEventListener("touchstart", function(event){ addSpeed = 3; }); c.addEventListener("touchend", function(event){ addSpeed = 1; }); }; const animate = () => { clear(); calcFPS(); createGoogle(); for(let i=0; ilines[i].speedMaxX1||lines[i].y>lines[i].speedMaxY1)lines[i].direction*=-1; if(lines[i].xlinesInside[j].speedMaxX1||linesInside[j].y>linesInside[j].speedMaxY1)linesInside[j].direction*=-1; if(linesInside[j].x

Canvas logo Google animated