Animated Robot
How do I make an animated robot?
What is a animated robot? How do you make a animated robot? This script and codes were developed by Casey Zumwalt on 07 November 2022, Monday.
Animated Robot - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Robot</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="robot" x="0" y="0" viewBox="0 0 600 800" enable-background="new 0 0 600 800" xml:space="preserve"> <ellipse id="shadow" opacity="0.4" fill="#2C3332" cx="300" cy="703.4" rx="89" ry="30.6"/> <g id="left_arm"> <path fill="#BABEB7" d="M184 430.9c-44-18.9-84.8 18-94.2 44.1 -10.9-3.3-22.1-1.3-28.8 5.5 -1 1-1.8 2-2.6 3.2 -1.9 2.1-4.5 5.2-6.2 8.3 -5.8 10-2.3 23.1 7.7 32.4l3.8-3.7 5.7-7.1 -3.8 3.8c-6.8-6.4-10.6-14.6-10.5-22.3 -0.1 7.7 3.7 15.9 10.5 22.2l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 5.6-3.5 13.8-3.4 21 0.8 8.7 5 13 14.3 10.5 21.7 -2.4 1.5-5.3 2.4-8.4 2.5l-5.7 7.1 0.1 6c8.5 0.8 16.5-1.6 21.7-6.8 1.2-1.2 6.3-7.3 7.2-8.8 0 0 0 0 0-0.1 0.6-0.8 1.1-1.5 1.6-2.4 5.5-9.5 2.6-22.1-6.4-31.2 13.2-12.9 33.1-25.2 48.8-9.1C156.5 477.4 189.1 433.1 184 430.9z"/> <path fill="#DCE0DA" d="M106.3 485c-2.4-2.4-5.2-4.6-8.4-6.5 -2.6-1.5-5.3-2.7-8.1-3.5 -10.9-3.3-22.1-1.3-28.8 5.5 -1.2 1.2-2.3 2.6-3.2 4.1 -5.8 10-2.3 23.3 7.7 32.5l3.8-3.7c-4.8-5.1-6.7-11.7-4.8-17.3 0.3-0.8 0.6-1.6 1.1-2.4 4.1-7.1 14.2-9.2 23.3-5.1 0.8 0.3 1.5 0.7 2.3 1.2 1.9 1.1 3.6 2.4 5.1 3.9 5.9 5.9 7.9 14 4.3 20.2 -1.1 2-2.7 3.5-4.6 4.7 -2.4 1.5-5.3 2.4-8.4 2.5l0.1 6c9.4 0.9 18.2-2.1 23.3-8.7 0.6-0.8 1.1-1.5 1.6-2.4C118.1 506.6 115.2 494.1 106.3 485z"/> </g> <g id="right_arm"> <path fill="#DCE0DA" d="M547.7 492c-1.8-3-4.3-6.1-6.2-8.3 -0.8-1.2-1.6-2.2-2.6-3.2 -6.7-6.8-17.8-8.8-28.8-5.5 -9.3-26.1-50.2-63-94.1-44.1 -5.1 2.2 27.5 46.5 28.9 45 15.6-16.1 35.6-3.8 48.8 9.1 -8.9 9.1-11.9 21.6-6.4 31.2 0.5 0.8 1 1.6 1.6 2.4 0 0 0 0 0 0.1 0.9 1.6 6 7.6 7.2 8.8 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1c-3.1-0.1-6-1-8.4-2.5 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8 1.9 5.6-0.1 12.2-4.8 17.3l3.8 3.7c6.8-6.3 10.6-14.5 10.5-22.2 0.2 7.8-3.6 16-10.5 22.3l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/> <path fill="#BABEB7" d="M547.7 492c-3.1-5.4-8.8-11-8.8-11s0 0 0 0c1.2 1 2.3 2.4 3.2 3.9 5.8 10 2.3 23.1-7.7 32.4l-3.8-3.7 5.7 7 3.8 3.8C550 515.1 553.5 502 547.7 492z"/> <path fill="#BABEB7" d="M489 518.6C489 518.6 489 518.6 489 518.6c0.9 1.6 6 7.7 7.2 8.9 5.2 5.3 13.2 7.7 21.7 6.8l0.1-6 -5.7-7.1 -0.1 6C502.9 528.2 494.1 525.1 489 518.6z"/> <path fill="#BABEB7" d="M534.4 493.8c-4.1-7.1-14.2-9.2-23.3-5.1 -0.8 0.3-1.5 0.7-2.3 1.2 -1.9 1.1-3.6 2.4-5.1 3.9 -5.9 5.9-7.9 14-4.3 20.2 1.1 2 2.7 3.5 4.6 4.7 -2.5-7.5 1.8-16.7 10.5-21.7 7.2-4.2 15.5-4.2 21-0.8C535.2 495.4 534.8 494.6 534.4 493.8z"/> </g> <g id="robot_main"> <g id="body"> <path id="SVGID_3_" fill="#BABEB7" d="M137.4 525.6c0-47.9 60.7-219.3 162.6-219.3 101.9 0 162.6 171.9 162.6 219.3 0 47.5-137.9 56.4-162.6 56.4C275.3 582.1 137.4 573.5 137.4 525.6z"/> <path fill="#DCE0DA" d="M200.8 522.8c0.1-0.4 0.3-0.8 0.4-1.2C201 522 200.9 522.4 200.8 522.8z"/> <path fill="#DCE0DA" d="M200.2 524.6c0.1-0.4 0.2-0.8 0.3-1.1C200.5 523.8 200.3 524.2 200.2 524.6z"/> <path fill="#DCE0DA" d="M201.3 521.1c0.2-0.6 0.4-1.1 0.7-1.6C201.8 520 201.6 520.6 201.3 521.1z"/> <path fill="#DCE0DA" d="M198.9 534.8c0-0.7 0-1.4 0-2C198.9 533.4 198.9 534.1 198.9 534.8z"/> <path fill="#DCE0DA" d="M199.8 526.4c0.1-0.4 0.2-0.8 0.3-1.2C200 525.6 199.9 526 199.8 526.4z"/> <path fill="#DCE0DA" d="M438.8 437.2c-21.1 18.1-64.2 43.3-140.1 43.3 -67.7 0-86.4 14.8-96.7 39.2 -1.9 4.5-3.1 9.7-3.1 15.1 0 13.9 7.7 29.5 29.4 40.2 0 0 0 0 0 0 -0.3 0-0.5 0-0.8 0 0.3 0.1 0.5 0.3 0.8 0.4 31.4 5.2 61.4 6.7 71.7 6.7 24.7 0 162.6-8.9 162.6-56.4C462.6 508.1 454.3 473.7 438.8 437.2z"/> <path fill="#DCE0DA" d="M199 532.7c0-0.6 0.1-1.3 0.1-1.9C199.1 531.4 199 532.1 199 532.7z"/> <path fill="#DCE0DA" d="M199.2 530.3c0.1-0.5 0.1-1 0.2-1.4C199.3 529.4 199.2 529.9 199.2 530.3z"/> <path fill="#DCE0DA" d="M199.4 528.3c0.1-0.4 0.1-0.8 0.2-1.3C199.6 527.5 199.5 527.9 199.4 528.3z"/> <g id="percent_meter"> <path fill="#EAECE8" d="M370.5 535.3c-0.1 0-0.2 0-0.4 0.1 -18 2.8-41.2 5-70 5 -44.7 0-75.9-5.2-95.4-10.1 0 0 0 0 0 0 0 0 0 0 0 0l-5.8 3c0 0 0 0 0 0 20 5.4 53.1 11.5 101.2 11.5 87.8 0 125-20 125-20l-4.5-3C420.7 521.8 405.2 529.8 370.5 535.3z"/> <path fill="#EAECE8" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9 175.2 524.9z"/> <path fill="#EAECE8" d="M175 524.8C175 524.8 175 524.8 175 524.8 175 524.8 175 524.8 175 524.8z"/> <polygon fill="#BABEB7" points="420.5 503.6 416.2 505.2 418.5 513.6 420.7 521.8 425.2 524.8 "/> <polygon fill="#8F918D" points="179.3 504 174.8 524.7 179.3 521.7 182.4 510.3 183.7 505.6 "/> <path fill="#BABEB7" d="M175 524.8c-0.2-0.1-0.2-0.1-0.2-0.1S174.9 524.7 175 524.8z"/> <path fill="#BABEB7" d="M175.2 524.9c1 0.5 3.9 1.9 9 3.8 6.6 2.5 14.6 4.5 14.7 4.6C184.8 529.4 177.1 525.8 175.2 524.9z"/> <path fill="#BABEB7" d="M175.2 524.9c-0.1 0-0.1-0.1-0.2-0.1C175.1 524.8 175.2 524.9 175.2 524.9z"/> <path fill="#BABEB7" d="M175.2 524.9C175.2 524.9 175.2 524.9 175.2 524.9c1.9 0.9 9.5 4.5 23.7 8.4 0 0 0 0 0 0l5.8-3c0 0 0 0 0 0 -0.6-0.1-1.2-0.3-1.7-0.4 -16.2-4.2-23.7-8.1-23.7-8.1l-4.5 2.9c0 0 0.1 0 0.2 0.1 0 0 0 0 0 0C175.1 524.8 175.2 524.9 175.2 524.9z"/> <path fill="#2b8fca" d="M368.7 521.5l-0.4-4.2c-18.5 3.2-41.7 5.8-68.2 5.8 -39.1 0-71.1-5.6-91.6-10.4 -0.5 1.7-0.9 3.2-1.3 4.6 -1.3 5-1.9 8.6-2.6 13 19.5 4.9 50.7 10.1 95.4 10.1 28.8 0 52-2.1 70-5L368.7 521.5z"/> <path fill="#2479b0" d="M203 511.3c-12.4-3.2-19.3-5.8-19.3-5.8l-1.3 4.7 -3.1 11.5c0 0 7.5 3.9 23.7 8.1 0.6 0.1 1.1 0.3 1.7 0.4 0 0 0 0 0 0 0.6-4.4 1.3-8 2.6-13 0.4-1.4 0.8-2.9 1.3-4.6C206.6 512.2 204.8 511.8 203 511.3z"/> <path fill="#4C4C4C" d="M418.5 513.6l-2.3-8.4c0 0-17.5 6.8-47.1 12 -0.2 0-0.5 0.1-0.7 0.1l0.4 4.2 1.4 13.9c0.1 0 0.2 0 0.4-0.1 34.7-5.5 50.2-13.5 50.2-13.5L418.5 513.6z"/> </g> </g> <g id="head"> <path fill="#EAECE8" d="M460.3 268.3c-3-50.9-81.4-57.8-160.3-57.8 -78.8 0-156.6 6.9-160 57.4 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3z"/> <path fill="#9BB2B0" d="M444.4 302.4c-0.1-16.4-0.8-35.6-5.7-44 -1.3-2.3-3.6-6.2-19.4-7 -9.8-0.5-20.2-1-30.7-1.4 -33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -10.5 0.4-20.8 0.9-30.5 1.4 -15.8 0.8-17.9 4.5-19.3 7 -4.7 8.2-5.5 26.8-5.6 43 0.1 46.6 1.8 76.4 17.2 90.4 2.3 2.1 4.9 4.2 7.5 6.2 33.3 24.9 89.7 38.8 119.4 38.8 25.6 0 71.6-10.3 105.3-29 5.1-2.9 10-5.9 14.4-9.1 3-2.2 5.9-4.5 8.5-6.8 6.3-5.7 10.2-14.1 12.6-25.2 2.9-13.5 3.5-31.1 3.7-52.7 0-3.1 0-6.2 0-9.4C444.4 303.7 444.4 303 444.4 302.4z"/> <path fill="#A4BCB9" d="M388.7 249.9c-33.2-1.3-67.8-1.9-88.7-1.9 -20.9 0-55.4 0.7-88.7 1.9 -28.7 17.5-46.9 49.3-46.9 104 0 14.9 7.8 27.4 19.9 37.7 32.3 27.6 94.9 39 115.8 39 17 0 61.7-7.6 95.1-25.3 7.6-4 14.6-8.6 20.6-13.7 12-10.3 19.9-22.7 19.9-37.7C435.6 299.2 417.4 267.5 388.7 249.9z"/> <path fill="#EAECE8" d="M428.2 391.7c-2.6 2.4-5.4 4.6-8.5 6.8 -4.4 3.2-9.3 6.3-14.4 9.1 -33.7 18.7-79.7 29-105.3 29 -29.7 0-86.1-14-119.4-38.8 -2.7-2-5.2-4-7.5-6.2 -15.4-14-17.1-43.8-17.2-90.4 0 1 0 2 0 3 0 50 3.1 81.8 19.2 96.4 0.9 0.8 1.7 1.5 2.6 2.3 32.3 27.2 91.1 41.7 122.3 41.7 28.6 0 80.5-12.2 113.8-35.1 3-2.1 5.8-4.2 8.5-6.4 1-0.8 1.9-1.6 2.9-2.5 7.9-7.2 12.7-18.6 15.6-34.2C438.3 377.5 434.5 385.9 428.2 391.7z"/> <g id="eyes"> <ellipse fill="#2C3332" cx="231" cy="316.7" rx="6.3" ry="17"/> <ellipse fill="#2C3332" cx="369" cy="316.7" rx="6.3" ry="17"/> </g> <path fill="#DCE0DA" d="M460.3 268.3c-4-25.1-14.9-33.6-40-34.9 -41-2.2-92.3-3.3-120.3-3.3 -28 0-79.1 1.2-120.2 3.3 -25 1.3-35.8 9.8-39.8 34.5 -1.6 9.5-2.1 21.5-2.1 36.4 0 53.6 3.2 89.9 25.1 109.7 2 1.8 4.1 3.6 6.3 5.3 37.4 29.4 98.6 43.4 130.7 43.4 32.5 0 93.3-13.9 130.7-43.2 2.3-1.8 4.4-3.6 6.5-5.5 21.9-19.8 25.2-56.1 25.2-109.7C462.4 289.6 461.9 277.7 460.3 268.3zM444.4 313.7c-0.1 21.7-0.8 39.2-3.7 52.7 -2.8 15.6-7.6 27-15.6 34.2 -0.9 0.8-1.9 1.7-2.9 2.5 -2.7 2.2-5.5 4.4-8.5 6.4 -33.3 23-85.2 35.1-113.8 35.1 -31.2 0-90-14.5-122.3-41.7 -0.9-0.8-1.8-1.5-2.6-2.3 -16-14.6-19.2-46.4-19.2-96.4 0-1 0-2 0-3 0.1-16.2 0.9-34.8 5.6-43 1.4-2.5 3.5-6.2 19.3-7 9.7-0.5 20.1-1 30.5-1.4 33.2-1.3 67.8-1.9 88.7-1.9 20.9 0 55.5 0.7 88.7 1.9 10.5 0.4 20.9 0.9 30.7 1.4 15.8 0.8 18.1 4.7 19.4 7 4.8 8.4 5.6 27.6 5.7 44 0 0.7 0 1.3 0 1.9C444.4 307.5 444.4 310.6 444.4 313.7z"/> <g id="Robot_hat"> <path fill="#DCE0DA" d="M354.3 220.3c0-29.9-24.3-54.2-54.2-54.2 -29.9 0-54.2 24.3-54.2 54.2 0 4.7 24.3 4.7 54.2 4.7C330.1 225 354.3 225 354.3 220.3z"/> <circle fill="#F0C419" cx="300.4" cy="207" r="8.1"/> <circle fill="#E64C3C" cx="324.7" cy="206" r="8.1"/> <circle fill="#4EBA64" cx="275.3" cy="206" r="8.1"/> </g> </g> </g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Animated Robot - Script Codes CSS Codes
html, body { height: 100%;
}
body { background: #2a88c5 url(http://zmwlt.com/bucket/cz-20150128-what-color-2-bg.jpg) center center/70%; position: relative;
}
#robot { position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); max-width: 50vw; max-height: 80vh; margin: 0 auto;
}
#body { -webkit-animation: hover 1.1s ease-in-out 0s infinite alternate; animation: hover 1.1s ease-in-out 0s infinite alternate;
}
#head { -webkit-animation: hover 1.1s ease-in-out 0.05s infinite alternate; animation: hover 1.1s ease-in-out 0.05s infinite alternate;
}
#arms { -webkit-animation: hover 1.1s ease-in-out 0.1s infinite alternate; animation: hover 1.1s ease-in-out 0.1s infinite alternate;
}
#left_arm { -webkit-transform-origin: center right; transform-origin: center right; -webkit-animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate; animation: arms_bounce_left 1.1s ease-in-out 0s infinite alternate;
}
#right_arm { -webkit-transform-origin: center left; transform-origin: center left; -webkit-animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate; animation: arms_bounce_right 1.1s ease-in-out 0s infinite alternate;
}
#eyes ellipse { -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: eyes_blink 2s ease-out 0s infinite alternate; animation: eyes_blink 2s ease-out 0s infinite alternate;
}
#shadow { -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation: shadow 1.1s ease-in-out 0s infinite alternate; animation: shadow 1.1s ease-in-out 0s infinite alternate;
}
@-webkit-keyframes hover { 0% { -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } 100% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
}
@keyframes hover { 0% { -webkit-transform: translate3d(0, 80px, 0); transform: translate3d(0, 80px, 0); } 100% { -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0); }
}
@-webkit-keyframes shadow { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1.5, 1.2); transform: translate3d(0, 0, 0) scale(1.5, 1.2); opacity: 0.4; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1, 1); transform: translate3d(0, 0, 0) scale(1, 1); opacity: 0.2; }
}
@keyframes shadow { 0% { -webkit-transform: translate3d(0, 0, 0) scale(1.5, 1.2); transform: translate3d(0, 0, 0) scale(1.5, 1.2); opacity: 0.4; } 100% { -webkit-transform: translate3d(0, 0, 0) scale(1, 1); transform: translate3d(0, 0, 0) scale(1, 1); opacity: 0.2; }
}
@-webkit-keyframes arms_bounce_left { 0% { -webkit-transform: translate3d(0, 80px, 0) rotate(0deg); transform: translate3d(0, 80px, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(0, 30px, 0) rotate(-10deg); transform: translate3d(0, 30px, 0) rotate(-10deg); }
}
@keyframes arms_bounce_left { 0% { -webkit-transform: translate3d(0, 80px, 0) rotate(0deg); transform: translate3d(0, 80px, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(0, 30px, 0) rotate(-10deg); transform: translate3d(0, 30px, 0) rotate(-10deg); }
}
@-webkit-keyframes arms_bounce_right { 0% { -webkit-transform: translate3d(0, 80px, 0) rotate(0deg); transform: translate3d(0, 80px, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(0, 30px, 0) rotate(10deg); transform: translate3d(0, 30px, 0) rotate(10deg); }
}
@keyframes arms_bounce_right { 0% { -webkit-transform: translate3d(0, 80px, 0) rotate(0deg); transform: translate3d(0, 80px, 0) rotate(0deg); } 100% { -webkit-transform: translate3d(0, 30px, 0) rotate(10deg); transform: translate3d(0, 30px, 0) rotate(10deg); }
}
@-webkit-keyframes eyes_blink { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 90% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 95% { -webkit-transform: scale(0.8, 0); transform: scale(0.8, 0); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
@keyframes eyes_blink { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 90% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 95% { -webkit-transform: scale(0.8, 0); transform: scale(0.8, 0); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); }
}
Developer | Casey Zumwalt |
Username | zumwalt |
Uploaded | November 07, 2022 |
Rating | 4.5 |
Size | 5,914 Kb |
Views | 14,168 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple.com style modal window | 5,145 Kb |
Switch | 4,185 Kb |
A Pen by Casey Zumwalt | 3,668 Kb |
Nicer looking native select element | 2,861 Kb |
Search all the things | 5,660 Kb |
Interactive pixel logo | 87,218 Kb |
Vignette - Pure CSS Illustration | 4,210 Kb |
Animate in bugs | 6,867 Kb |
Pure CSS loading animation | 2,517 Kb |
Swiftype Lower Third | 4,796 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
Fellowship of the Ring | Aussieyang | 2,639 Kb |
Awesome | Samarthpd | 2,901 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Canvas snow | Win7killer | 2,572 Kb |
Importable Clearfix | Corysimmons | 1,411 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!