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 Bubble Perspective

  The Bubble Perspective By CodoBlog                           Here is the bubble perspective video by codoblog. By using the HTML-CSS-JavaScript           we developed a code. In this code you you will teach how to design the animation in the                  canvas like bubbles flowing. Try out this code and explore your knowledge.         CODE -                    <html> <head> <meta charset="utf-8"> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #000; } </style> <script type="text/javascript"> let c,ctx,w,h let frameTime=0,prevTime=null let redrawElapsed=0 let animationScale=2 let redrawDuration = 5 let newCircleDuration = 0 let dots=[] ...

SlideShow

Slideshow Change image every 3 seconds: 1 / 5 World Map 2 / 5 PUBG Show 3 / 5 React Logo 4 / 5 Sidebar Icon 5 / 5 Android Logo

Sidebar Icon | The Icon Interaction

 Sidebar icon with animation || Icon interaction HTML  Here is the code for designing an animation of the sidebar icon. This icon is helpful for the use of sidebar menus . With the effect of rounding opening and closing codoblog brings the video of the icon interaction for you. #CODE :        <!DOCTYPE html> <html> <head> <title>Icon menu</title> <style type="text/css"> body{ height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; font-family: sans-serif; font-weight: bold; flex-direction: column; } p{ font-size: 2.5rem; text-transform: uppercase; } svg{ stroke-linecap: round; stroke-linejoin: round; transition: transform 400ms; cursor: pointer; -webkit-tap-highlight-color:rgba(0,0,0,0); } svg path{ fill: none; stroke: black; stroke-width:2px; transition:stroke-dasharray 400ms,stroke-dashoffs...