Skip to main content

React LOGO

How to Design React LOGO || React Logo with Animation || Html-Css-Js


Here is the code by using we can design the react LOGO with the animation effect. 
         This logo we can use in our websites. Don't hasitate, Just do the code.
And Keep Loving CodoBlog.

#CODE


<!DOCTYPE html>
<html>
<head>
<title>Logo React</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
}
#canvas{
background-color: black;
}
</style>
<script type="text/javascript">
"use strict";
var W,H,c,ctx;
var circles=[];

const random = (max=1,min=0)=> Math.random()* (max-min)+min;
const util={
drawCircle(x,y,r,c){
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x+W/2, y+H/2,r,0,2*Math.PI);
ctx.fill();
ctx.closePath();
},
drawCircleRotate(x,y,r,c,a){
ctx.beginPath();
ctx.save();
ctx.fillStyle = c;
ctx.translate(x+W/2, y+H/2);
ctx.rotate(a);
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
ctx.closePath();
ctx.restore();
}
};
class Circle{
constructor(color,angle,rad,radX,radY,a,rotate,speed){
this.color=color;
this.angle=angle;
this.rad= rad;
this.radY = radX;
this.radX = radY;
this.a=a;
this.rotate=rotate;
}
draw(){
this.rotate?util.drawCircleRotate(this.x,this.y,this.rad,this.color,this.a):util.drawCircle(this.x,this.y,this.rad,this.color,this.a);
}
update(){
this.angle += 0.007;
this.x = this.radX * Math.cos(this.angle);
this.y = this.radY * Math.sin(this.angle);
this.draw();
}
}
const createCircles = () =>{
for(let i=0; i<400; i++){
let color = 'hsl('+random(220,180)+',100%,50%)';
let angle = random(Math.PI*2);
let rad = random(1.5,1);
let radX=random(40,30);
let radY = random(130,120);
let a = null;
let speed = 0.01
circles.push(new Circle(color,angle,rad,radX,radY,a,false,speed));

}
for(let i=0;i<250;i++){
let color = 'hsl('+random(220,180)+',100%,50%)';
let angle = random(Math.PI*2);
let rad = random(1,0.5);
let radX=random(25,0);
let radY = random(25,0);
let a = null;
circles.push(new Circle(color,angle,rad,radX,radY,a,false));
}
for(let i=0;i<800;i++){
let color = 'hsl('+random(220,180)+',100%,50%)';
let angle = random(Math.PI*2);
let rad = random(1.5,0.5);
let radX=random(40,30);
let radY = random(120,110);
let a = i%2===0 ? 2 : -2;
circles.push(new Circle(color,angle,rad,radX,radY,a,true));
}
};
const textReact = ()=>{
ctx.beginPath();
ctx.fillStyle='hsl(200,100%,50%)';
ctx.font = "50px Arial";
ctx.fillText("React",W/2,H/2+170);
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.closePath();
};
const animate = () =>{
ctx.clearRect(0,0,W,H);
circles.forEach(x => x.update());
textReact();
requestAnimationFrame(animate);
};
const init=()=>{
c= document.getElementById("canvas");
c.width = W = window.innerWidth;
c.height = H = window.innerHeight;
ctx = c.getContext("2d");
createCircles();
requestAnimationFrame(animate);
};
onload = init;
</script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>


#OUTPUT : 

                    



                                                This LOGO is with Animation Effect.




---------------------------------------------------------------------------------------------------------------------------






Comments

The Most Populer

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...