Animated Robot using HTML, CSS and Javascript

What is Robot?

Robot, any automatically operated machine that replaces human effort, though it may not resemble human beings in appearance or perform functions in a humanlike manner. By extension, robotics is the engineering discipline dealing with the design, construction, and operation of robots.

DEMO

Source code for the Robot using html, css and JavaScript. The bellow code in html programming, you can check or run code by clicking Try Yourself through our CTryit-editor

<!DOCTYPE html>
<html>
   <head>
      <title>Robot from codingtaggers.blogspot.com </title>
   </head>
   <body>
      <div class="all">
         <div class="bod">
            <div class="hdd">
               <div class="face" onclick="angry()">
                  <div class="eye1">
</div>
<div class="eye2">
</div>
<div class="nose">
</div>
</div>
<div class="ear1">
</div>
<div class="ear2">
</div>
</div>
<div class="neck">
               <div class="n1">
</div>
<div class="n2">
</div>
<div class="n3">
</div>
</div>
<div class="hand1">
               <div class="ha1">
</div>
<div class="ha2">
</div>
<div class="ha3">
</div>
</div>
<div class="hand2">
               <div class="hb1">
</div>
<div class="hb2">
</div>
<div class="hb3">
</div>
</div>
<svg class="svg1" width="240px" height="260px"   onclick="happy()">
               <polygon points="50 50,210 50,200 180,65 180" fill="silver " stroke="silver" stroke-width="50" stroke-linejoin="round"  ></polygon>
               <polygon points="70 50,190 50,180 80,80 80" fill="#f5f5f5" stroke="#f5f5f5" stroke-width="10" stroke-linejoin="round"></polygon>
               <ellipse cx="45" cy="70" rx="10" ry="20" style="fill:black;" />
               <ellipse cx="215" cy="70" rx="10" ry="20" style="fill:black;" />
            </svg>
            <div class="leg1">
   </div>
<div class ="leg2">
   
            </div>
</div>
<svg class="svg2" width="240px" height="280px">
            <ellipse cx="115" cy="120" rx="80" ry="10" style="fill:gray;" border="2px black" />
         </svg>
         <div class="blog">
            <b style="color:red; font-size:20px; font-weight:bolder;" >© CODING TAGGERS</b><br/>
            <a style="font-size:14px; color:teal;" href="https://codingtaggers.blogspot.com/">
            Click here to go website</a>
         </div>
</div>
</body>
</html>

Try Yourself >>

The bellow code in CSS (Cascading Style Sheets). You want to insert this code within <head>..... </head> tag, using <style>... </style> tag.

body {
  background: -webkit-linear-gradient(50deg, #1760a5 0% 50%, #144f89 50% 100%);
}
.all {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 60%;
  left: 50%;
}
.face {
  width: 200px;
  height: 100px;
  background: silver;
  border: 2px solid black;
  border-radius: 50px;
  position: relative;
}
.hdd {
  z-index: 2;
  position: relative;
}


.eye1 {
  width: 55px;
  height: 55px;
  background-color: green;
  border: 5px solid black;
  border-radius: 50px;
  float: left;
  position: relative;
  top: 18px;
  left: 25px;
}
.eye1:before {
  content: " ";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: white;
  top: 20px;
  left: 20px;
}
.eye1:after {
  content: " ";
  position: absolute;
  width: 45px;
  height: 25px;
  background: -webkit-linear-gradient(
    -80deg,
    white 0px 15px,
    transparent 15px 45px
  );
  top: 0px;
  left: 8px;
  transform: rotate(20deg);
}

.eye2 {
  width: 55px;
  height: 55px;
  background-color: green;
  border: 5px solid black ;
  border-radius: 50px;
  float: right;
  position: relative;
  top: 18px;
  left: -25px;
}
.eye2:before {
  content: " ";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  background-color: white;
  top: 20px;
  left: 20px;
}
.eye2:after {
  content: " ";
  position: absolute;
  width: 45px;
  height: 25px;
  background: -webkit-linear-gradient(
    80deg,
    transparent 0px 15px,
    white 15px 45px
  );
  top: 0px;
  left: 6px;
  transform: rotate(-15deg);
}
.nose {
  width: 18px;
  height: 28px;
  background: white;
  position: absolute;
  border-radius:8px;
  border: 1px solid black;
  top: 70px;
  left: 90px;
}
.ear1 {
  width: 20px;
  height: 55px;
  background: #fbc02d;
  position: absolute;
  border: 2px solid black;
  left: -28px;
  top: 25px;
  border-radius: 25px;
}

.ear1:before {
  content: " ";
  width: 8px;
  height: 26px;
  background: #fbc02d;
  border: 2px solid black;
  position: absolute;
  top: 12px;
  left: -12px;
  border-radius: 10px;
}

.ear1:after {
  content: " ";
  width: 3px;
  height: 50px;
  background-color: whitesmoke;
  position: absolute;
  border: 2px solid black;
  left: -9px;
  top: -43px;
}
.face:before {
  content: " ";
  width: 8px;
  height: 8px;
  background: #f43e57;
  position: absolute;
  border-radius: 8px;
  top: -30px;
  left: -39px;
}


.ear2 {
  width: 20px;
  height: 55px;
  background: #fbc02d;
  position: absolute;
  border: 2px solid black;
  left: 210px;
  top: 25px;
  border-radius: 25px;
}

.ear2:before {
  content: " ";
  width: 9px;
  height: 26px;
  background: #fbc02d;
  border: 2px solid black;
  position: absolute;
  top: 12px;
  left: 23px;
  border-radius: 10px;
}

.ear2:after {
  content: " ";
  width: 3px;
  height: 50px;
  background-color: whitesmoke;
  border: 2px solid black;
  position: absolute;
  left: 25px;
  top: -43px;
}

.face:after {
  content: " ";
  width: 8px;
  height: 8px;
  background: #f43e57;
  position: absolute;
  border-radius: 8px;
  top: -30px;
  left: 233px;
}


.neck {
  width: 100px;
  height: 80px;
  z-index: 1;
  position: relative;
  top: -20px;
  left: 50px;
}
.n1,
.n2,
.n3 {
  width: 100px;
  height: 8px;
  background-color: black;
  position: relative;
  border-radius: 5px;
}
.n1:before,
.n2:before,
.n3:before {
  content: " ";
  width: 100px;
  height: 8px;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  top: 24px;
}
.n1:after,
.n2:after,
.n3:after {
  content: " ";
  width: 100px;
  height: 8px;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  top: 48px;
}
/*---------------------------------svg start here------------*/
.svg1 {
  position: absolute;
  left: -25px;
  top: 105px;
  z-index: 3;
}

.leg1
{
   width: 30px;
    height: 180px;
    background-color:silver;
    border : 1px solid black;
    border-radius:150px;
    position: absolute;
    top:190px;
    left:40px;
    z-index: 2;
    transform: rotate(0deg);
}

.leg1:before

{
 content: "";
 position: absolute;
 width:50px;
 height: 20px;
 background: silver;
 border : 1px solid black;
 position: absolute;
 top:160px;
 left:-12px;
 border-radius: 8px;
}

.leg2
{
   width: 30px;
    height: 180px;
    background-color: silver;
    border : 1px solid black;
    border-radius:150px;
    position:absolute ;
    top:190px;
    right:65px;
    z-index: 2;
    transform: rotate(0deg);
}

.leg2:before

{
 content: "";
 position: absolute;
 width:50px;
 height: 20px;
 background: silver;
 border : 1px solid black;
 position: absolute;
 top:160px;
 right:-10px;
 border-radius: 8px;
}

.hand1 {
  width: 40px;
  height: 70px;
  position: relative;
  /* left: 50px;*/
  top: -20 px;
  transform: rotate(80deg);
  float: left;
  top: -35px;
  left: -40px;
}
.ha1,
.ha2,
.ha3 {
  width: 40px;
  height: 8px;
  background: black;
  border-radius: 10px;
  position: relative;
}
.ha2 {
  width: 39px;
}
.ha3 {
  width: 38px;
}
.ha1:before,
.ha2:before,
.ha3:before {
  content: " ";
  width: 37px;
  height: 8px;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  top: 24px;
}
.ha2:before {
  width: 36px;
}
.ha3:before {
  width: 35px;
}
.ha1:after,
.ha2:after,
.ha3:after {
  content: " ";
  width: 34px;
  height: 8px;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  top: 48px;
}
.ha2:after {
  width: 33px;
}
.ha3:after {
  width: 32px;
}

/*hand 2*/
.hand2 {
  width: 70px;
  height: 70px;
  position: relative;
  float: right;
  transform: rotate(-80deg);
  top: -3px;
  left: 23px;
}
.hb1,
.hb2,
.hb3 {
  width: 40px;
  height: 8px;
  background: black;
  border-radius: 10px;
  position: relative;
  left: 50px;
  transform: flip(1);
}
.hb2 {
  width: 39px;
}
.hb3 {
  width: 38px;
}
.hb1:before,
.hb2:before,
.hb3:before {
  content: " ";
  width: 37px;
  height: 8px;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  top: 24px;
}
.hb2:before {
  width: 36px;
}
.hb3:before {
  width: 35px;
}
.hb1:after,
.hb2:after,
.hb3:after {
  content: " ";
  width: 34px;
  height: 8px;
  background-color: black;
  position: absolute;
  border-radius: 5px;
  top: 48px;
}
.hb2:after {
  width: 33px;
}
.hb3:after {
  width: 32px;
}



/*--------hover effect--------------*/
.bod {
  animation-name: hover;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.blog
{
    width:220px;
    height:50px;
    position:absolute;
    top:420px;
    border-radius:5px;
    background:#F4F0EF;
    text-align:center;
}
a
{
    text-decoration:none;
    font-weight:bolder;
    position:relative;
    top:10%;
    font-family: 'Lobster' ;
    color:#4A235A;
}

The bellow code is in JavaScript. Place the code within <body>....</body> anywhere. Using <script>.... </script> tag.

<script>
  
  alert("Click on the face to make the robot angry 😡 and then on the chest to make it happy😁") ;
function angry() {
  var fa = document.getElementsByClassName("eye1")[0];
  var fb = document.getElementsByClassName("eye2")[0];
  var fc = document.getElementsByClassName("nose")[0];
  fa.style.backgroundColor = "red";
  fb.style.backgroundColor = "red";
  fc.style.backgroundColor = "red";
}

function happy() {
  var fd = document.getElementsByClassName("eye1")[0];
  var fe = document.getElementsByClassName("eye2")[0];
  var ff = document.getElementsByClassName("nose")[0];
  fd.style.backgroundColor = "green";
  fe.style.backgroundColor = "green";
  ff.style.backgroundColor = "green";
}
  
  </script>

Full source code of Robot using html, css and JavaScript. You can copy & run code in CTryit Editor.

{{ main.html }} - Full Source Code

<html>
   <head>
      <title>ROBOT</title>
      <style> 
         body {
         background: -webkit-linear-gradient(50deg, #1760a5 0% 50%, #144f89 50% 100%);
         }
         .all {
         position: absolute;
         transform: translate(-50%, -50%);
         top: 60%;
         left: 50%;
         }
         .face {
         width: 200px;
         height: 100px;
         background: silver;
         border: 2px solid black;
         border-radius: 50px;
         position: relative;
         }
         .hdd {
         z-index: 2;
         position: relative;
         }
         .eye1 {
         width: 55px;
         height: 55px;
         background-color: green;
         border: 5px solid black;
         border-radius: 50px;
         float: left;
         position: relative;
         top: 18px;
         left: 25px;
         }
         .eye1:before {
         content: " ";
         position: absolute;
         width: 15px;
         height: 15px;
         border-radius: 15px;
         background-color: white;
         top: 20px;
         left: 20px;
         }
         .eye1:after {
         content: " ";
         position: absolute;
         width: 45px;
         height: 25px;
         background: -webkit-linear-gradient(
         -80deg,
         white 0px 15px,
         transparent 15px 45px
         );
         top: 0px;
         left: 8px;
         transform: rotate(20deg);
         }
         .eye2 {
         width: 55px;
         height: 55px;
         background-color: green;
         border: 5px solid black ;
         border-radius: 50px;
         float: right;
         position: relative;
         top: 18px;
         left: -25px;
         }
         .eye2:before {
         content: " ";
         position: absolute;
         width: 15px;
         height: 15px;
         border-radius: 15px;
         background-color: white;
         top: 20px;
         left: 20px;
         }
         .eye2:after {
         content: " ";
         position: absolute;
         width: 45px;
         height: 25px;
         background: -webkit-linear-gradient(
         80deg,
         transparent 0px 15px,
         white 15px 45px
         );
         top: 0px;
         left: 6px;
         transform: rotate(-15deg);
         }
         .nose {
         width: 18px;
         height: 28px;
         background: white;
         position: absolute;
         border-radius:8px;
         border: 1px solid black;
         top: 70px;
         left: 90px;
         }
         .ear1 {
         width: 20px;
         height: 55px;
         background: #fbc02d;
         position: absolute;
         border: 2px solid black;
         left: -28px;
         top: 25px;
         border-radius: 25px;
         }
         .ear1:before {
         content: " ";
         width: 8px;
         height: 26px;
         background: #fbc02d;
         border: 2px solid black;
         position: absolute;
         top: 12px;
         left: -12px;
         border-radius: 10px;
         }
         .ear1:after {
         content: " ";
         width: 3px;
         height: 50px;
         background-color: whitesmoke;
         position: absolute;
         border: 2px solid black;
         left: -9px;
         top: -43px;
         }
         .face:before {
         content: " ";
         width: 8px;
         height: 8px;
         background: #f43e57;
         position: absolute;
         border-radius: 8px;
         top: -30px;
         left: -39px;
         }
         .ear2 {
         width: 20px;
         height: 55px;
         background: #fbc02d;
         position: absolute;
         border: 2px solid black;
         left: 210px;
         top: 25px;
         border-radius: 25px;
         }
         .ear2:before {
         content: " ";
         width: 9px;
         height: 26px;
         background: #fbc02d;
         border: 2px solid black;
         position: absolute;
         top: 12px;
         left: 23px;
         border-radius: 10px;
         }
         .ear2:after {
         content: " ";
         width: 3px;
         height: 50px;
         background-color: whitesmoke;
         border: 2px solid black;
         position: absolute;
         left: 25px;
         top: -43px;
         }
         .face:after {
         content: " ";
         width: 8px;
         height: 8px;
         background: #f43e57;
         position: absolute;
         border-radius: 8px;
         top: -30px;
         left: 233px;
         }
         .neck {
         width: 100px;
         height: 80px;
         z-index: 1;
         position: relative;
         top: -20px;
         left: 50px;
         }
         .n1,
         .n2,
         .n3 {
         width: 100px;
         height: 8px;
         background-color: black;
         position: relative;
         border-radius: 5px;
         }
         .n1:before,
         .n2:before,
         .n3:before {
         content: " ";
         width: 100px;
         height: 8px;
         background-color: black;
         position: absolute;
         border-radius: 5px;
         top: 24px;
         }
         .n1:after,
         .n2:after,
         .n3:after {
         content: " ";
         width: 100px;
         height: 8px;
         background-color: black;
         position: absolute;
         border-radius: 5px;
         top: 48px;
         }
         /*---------------------------------svg start here------------*/
         .svg1 {
         position: absolute;
         left: -25px;
         top: 105px;
         z-index: 3;
         }
         .leg1
         {
         width: 30px;
         height: 180px;
         background-color:silver;
         border : 1px solid black;
         border-radius:150px;
         position: absolute;
         top:190px;
         left:40px;
         z-index: 2;
         transform: rotate(0deg);
         }
         .leg1:before
         {
         content: "";
         position: absolute;
         width:50px;
         height: 20px;
         background: silver;
         border : 1px solid black;
         position: absolute;
         top:160px;
         left:-12px;
         border-radius: 8px;
         }
         .leg2
         {
         width: 30px;
         height: 180px;
         background-color: silver;
         border : 1px solid black;
         border-radius:150px;
         position:absolute ;
         top:190px;
         right:65px;
         z-index: 2;
         transform: rotate(0deg);
         }
         .leg2:before
         {
         content: "";
         position: absolute;
         width:50px;
         height: 20px;
         background: silver;
         border : 1px solid black;
         position: absolute;
         top:160px;
         right:-10px;
         border-radius: 8px;
         }
         .hand1 {
         width: 40px;
         height: 70px;
         position: relative;
         /* left: 50px;*/
         top: -20 px;
         transform: rotate(80deg);
         float: left;
         top: -35px;
         left: -40px;
         }
         .ha1,
         .ha2,
         .ha3 {
         width: 40px;
         height: 8px;
         background: black;
         border-radius: 10px;
         position: relative;
         }
         .ha2 {
         width: 39px;
         }
         .ha3 {
         width: 38px;
         }
         .ha1:before,
         .ha2:before,
         .ha3:before {
         content: " ";
         width: 37px;
         height: 8px;
         background-color: black;
         position: absolute;
         border-radius: 5px;
         top: 24px;
         }
         .ha2:before {
         width: 36px;
         }
         .ha3:before {
         width: 35px;
         }
         .ha1:after,
         .ha2:after,
         .ha3:after {
         content: " ";
         width: 34px;
         height: 8px;
         background-color: black;
         position: absolute;
         border-radius: 5px;
         top: 48px;
         }
         .ha2:after {
         width: 33px;
         }
         .ha3:after {
         width: 32px;
         }
         /*hand 2*/
         .hand2 {
         width: 70px;
         height: 70px;
         position: relative;
         float: right;
         transform: rotate(-80deg);
         top: -3px;
         left: 23px;
         }
         .hb1,
         .hb2,
         .hb3 {
         width: 40px;
         height: 8px;
         background: black;
         border-radius: 10px;
         position: relative;
         left: 50px;
         transform: flip(1);
         }
         .hb2 {
         width: 39px;
         }
         .hb3 {
         width: 38px;
         }
         .hb1:before,
         .hb2:before,
         .hb3:before {
         content: " ";
         width: 37px;
         height: 8px;
         background-color: black;
         position: absolute;
         border-radius: 5px;
         top: 24px;
         }
         .hb2:before {
         width: 36px;
         }
         .hb3:before {
         width: 35px;
         }
         .hb1:after,
         .hb2:after,
         .hb3:after {
         content: " ";
         width: 34px;
         height: 8px;
         background-color: black;
         position: absolute;
         border-radius: 5px;
         top: 48px;
         }
         .hb2:after {
         width: 33px;
         }
         .hb3:after {
         width: 32px;
         }
         /*--------hover effect--------------*/
         .bod {
         animation-name: hover;
         animation-timing-function: linear;
         animation-iteration-count: infinite;
         animation-duration: 2s;
         }
         .blog
         {
         width:220px;
         height:50px;
         position:absolute;
         top:420px;
         border-radius:5px;
         background:#F4F0EF;
         text-align:center;
         }
         a
         {
         text-decoration:none;
         font-weight:bolder;
         position:relative;
         top:10%;
         font-family: 'Lobster' ;
         color:#4A235A;
         }
      </style>
   </head>
   <link href="https://fonts.googleapis.com/css2?family=Titan+One&display=swap" rel="stylesheet">
   <body>
      <div class="all">
         <div class="bod">
            <div class="hdd">
               <div class="face" onclick="angry()">
                  <div class="eye1">
</div>
<div class="eye2">
</div>
<div class="nose">
</div>
</div>
<div class="ear1">
</div>
<div class="ear2">
</div>
</div>
<div class="neck">
               <div class="n1">
</div>
<div class="n2">
</div>
<div class="n3">
</div>
</div>
<div class="hand1">
               <div class="ha1">
</div>
<div class="ha2">
</div>
<div class="ha3">
</div>
</div>
<div class="hand2">
               <div class="hb1">
</div>
<div class="hb2">
</div>
<div class="hb3">
</div>
</div>
<svg class="svg1" width="240px" height="260px"   onclick="happy()">
               <polygon points="50 50,210 50,200 180,65 180" fill="silver " stroke="silver" stroke-width="50" stroke-linejoin="round"  ></polygon>
               <polygon points="70 50,190 50,180 80,80 80" fill="#f5f5f5" stroke="#f5f5f5" stroke-width="10" stroke-linejoin="round"></polygon>
               <ellipse cx="45" cy="70" rx="10" ry="20" style="fill:black;" />
               <ellipse cx="215" cy="70" rx="10" ry="20" style="fill:black;" />
            </svg>
            <div class="leg1">
   </div>
<div class ="leg2">
   
            </div>
</div>
<svg class="svg2" width="240px" height="280px">
            <ellipse cx="115" cy="120" rx="80" ry="10" style="fill:gray;" border="2px black" />
         </svg>
         <div class="blog">
            <b style="color:red; font-size:20px; font-weight:bolder;" >© CODING TAGGERS</b><br/>
            <a style="font-size:14px; color:teal;" href="https://codingtaggers.blogspot.com/">
            Click here to go website</a>
         </div>
</div>
<script>
         alert("Click on the face to make the robot angry 😡 and then on the chest to make it happy😁") ;
         function angry() {
         var fa = document.getElementsByClassName("eye1")[0];
         var fb = document.getElementsByClassName("eye2")[0];
         var fc = document.getElementsByClassName("nose")[0];
         fa.style.backgroundColor = "red";
         fb.style.backgroundColor = "red";
         fc.style.backgroundColor = "red";
         }
         
         function happy() {
         var fd = document.getElementsByClassName("eye1")[0];
         var fe = document.getElementsByClassName("eye2")[0];
         var ff = document.getElementsByClassName("nose")[0];
         fd.style.backgroundColor = "green";
         fe.style.backgroundColor = "green";
         ff.style.backgroundColor = "green";
         }
         
      </script>
   </body>
</html>

Try Yourself >>

CODEPEN WINDOW

See the Pen Robot using html, css & JavaScript by Coding Taggers (@codingtaggers) on CodePen.

Coding Taggers

Search this blog

Animated Robot using HTML, CSS and Javascript