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.




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






Labels:

Comments

Post a Comment

The Most Populer

How to Generate Barcode || code for Barcode

|| Random Barcode Generator || Barcode on the basis length of text || #CODE :                 Barcode.html ==>        <html>        <head>            <title>Barcode Generator</title>            <link rel="stylesheet" href="Barcode.css">     </head>     <body>         <div>Barcode Generator</div>         <input type="text" placeholder="Type..."/>         <button onclick="generate()">Generate Barcode</button>           <svg id="barcode"></svg>           <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.0/JsBarcode.all.min.js"></script>           <script>               JsBarcode("#barcode","#Hello",{                   background:"#161748",                   lineColor:"#ffffff"               });               function generate(){                   var val = docu
Post a Comment
Read more

Design 3D Block with hover animation

        How To Design The 3D Block With Hover Effect. Here is the code of How to design the 3D block design by using only html and css.                          By using html-css you can make a lots of designs and animations. Few done by me                          and   somewhat expect from you . Try to watch all the videos by codoblog. And stay                                              connected.                 CODE -                         <html>           <head> <style type="text/css"> body{ background-color: black; } .wrap{ margin-top: 150px; perspective:1000px; perspective-origin:50% 50%; } .cube{ margin: auto; position: relative; height: 200px; width: 200px; transform-style:preserve-3d; } .cube > div{ position:absolute; box-sizing:border-box; padding: 10px; height: 100%; width: 100%; opacity: 0.7; background-color: #000; border: solid 1px #eeeeee; color: r
Post a Comment
Read more

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;     top: 10%;     left: 10%;     margin: 4px; } .flash{     width: 20%;     height: 8px;     border-radius: 25% / 30%;     background-color: #ccc;     box-shadow: inset 1px 1px 6px 1px slategrey;     position: absolute;    
Post a Comment
Read more