<div id="a-robot">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="334 -116 1280 1024" style="enable-background:new 334 -116 1280 1024;" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{display:inline;}
.st2{fill:#76CC71;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st3{fill:#7F7FD3;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:#FFFFFF;}
.st5{fill:#498943;}
.st6{fill:#FFFFFF;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:none;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st8{display:inline;fill:#76CC71;stroke:#000000;stroke-width:5;stroke-miterlimit:10;}
.st9{display:inline;fill:#7F7FD3;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st10{display:inline;fill:#76CC71;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st11{display:inline;fill:#7F7FD3;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st12{fill:#76CC71;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st13{fill:#7F7FD3;stroke:#231F20;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g id="voetvoorrechts">
<polygon class="st3" points="1014,557 1050.2,560 1057.8,583.5 1059,599.2 1016,598 1009.8,574 "/>
<polygon class="st2" points="1011,583 1014,612 1067.4,611.5 1062.6,590.8 1058.2,583.5 1058.6,598.8 1016,598 "/>
<path class="st12" d="M1054.6,574c0,5.3-1.4,9.6-3.2,9.6c-1.8,0-3.2-4.3-3.2-9.6s0-14,1.8-14C1051.8,560,1054.6,568.6,1054.6,574z"
/>
</g>
<g id="voetvoorlinks">
<polygon class="st3" points="989.2,557 953,560 945.4,583.5 944.2,599.2 987.2,598 993.4,574 "/>
<polygon class="st2" points="992.2,583 989.2,612 935.8,611.5 940.6,590.8 945,583.5 944.6,598.8 987.2,598 "/>
<path class="st12" d="M948.6,574c0,5.3,1.4,9.6,3.2,9.6s3.2-4.3,3.2-9.6s0-14-1.8-14S948.6,568.6,948.6,574z"/>
</g>
<g id="voetrechts">
<g>
<polygon class="st3" points="1013,594 1130,594 1126,577 1109,574 1098,561 1013,561 "/>
<polygon class="st2" points="1129,590 1129,590 1144,604 1111,604 1008,604 1013,584 1013,583.7 1020,594 "/>
<circle class="st12" cx="1039" cy="577" r="12.5"/>
</g>
<g>
<polygon class="st3" points="1013,594 1130,594 1126,577 1109,574 1098,561 1013,561 "/>
<polygon class="st2" points="1129,590 1129,590 1144,604 1111,604 1008,604 1013,584 1013,583.7 1020,594 "/>
<circle class="st12" cx="1039" cy="577" r="12.5"/>
</g>
</g>
<g id="voetlinks">
<g>
<polygon class="st3" points="990,594 873,594 877,577 894,574 905,561 990,561 "/>
<polygon class="st2" points="874,590 874,590 859,604 892,604 995,604 990,584 990,583.7 983,594 "/>
<circle class="st12" cx="964" cy="577" r="12.5"/>
</g>
<g>
<polygon class="st3" points="990,594 873,594 877,577 894,574 905,561 990,561 "/>
<polygon class="st2" points="874,590 874,590 859,604 892,604 995,604 990,584 990,583.7 983,594 "/>
<circle class="st12" cx="964" cy="577" r="12.5"/>
</g>
</g>
<g id="bovenbeenrechts">
<rect x="1013" y="335" class="st2" width="39" height="58"/>
<rect x="1019" y="393" class="st2" width="26" height="48"/>
</g>
<g id="onderbeenrechts">
<g>
<rect x="1013" y="503" class="st2" width="39" height="58"/>
<rect x="1019" y="455" class="st2" width="26" height="48"/>
<circle class="st3" cx="1031.5" cy="448.5" r="20.5"/>
</g>
</g>
<g id="bovenbeenlinks">
<rect x="951" y="335" class="st2" width="39" height="58"/>
<rect x="958" y="393" class="st2" width="26" height="48"/>
</g>
<g id="onderbeenlinks">
<g>
<rect x="951" y="503" class="st2" width="39" height="58"/>
<rect x="958" y="455" class="st2" width="26" height="48"/>
<circle class="st3" cx="971.5" cy="448.5" r="20.5"/>
</g>
</g>
<g id="armrechts">
<g id="bovenarmrechts">
<rect x="1085" y="144" class="st3" width="33" height="33"/>
<polygon class="st3" points="1061,154 1103,167 1103,125 1061,125 "/>
<rect x="1092" y="172" class="st3" width="33" height="33"/>
<circle class="st2" cx="1092.5" cy="153.5" r="3.5"/>
</g>
<g id="onderarmrechts-hand">
<g id="onderarmrechts">
<g>
<g>
<polygon class="st3" points="1108,247 1125,247 1125,215 1092,215 "/>
<polygon class="st3" points="1108,277 1125,277 1125,245 1105,241 "/>
</g>
</g>
<circle class="st3" cx="1108.5" cy="205.5" r="21.5"/>
</g>
<g id="handrechts">
<g>
<g>
<rect x="1110.7" y="300.8" class="st2" width="7.7" height="21.1"/>
<rect x="1110.6" y="321.9" class="st2" width="7.7" height="14.1"/>
</g>
<g>
<rect x="1094" y="304.6" transform="matrix(-0.5 0.866 -0.866 -0.5 1923.9934 -493.8651)" class="st2" width="21.1" height="7.7"/>
<rect x="1088.7" y="319.8" transform="matrix(-0.5 0.866 -0.866 -0.5 1923.9197 -463.3809)" class="st2" width="14.1" height="7.7"/>
</g>
<g>
<rect x="1088" y="296.3" transform="matrix(-0.6428 0.766 -0.766 -0.6428 2034.5994 -348.3445)" class="st2" width="21.1" height="7.7"/>
<rect x="1083.4" y="306.6" transform="matrix(0.766 0.6428 -0.6428 0.766 456.0049 -625.4946)" class="st2" width="7.7" height="14.1"/>
</g>
<g>
<rect x="1123.3" y="300.8" class="st2" width="7.7" height="21.1"/>
<rect x="1123.2" y="321.9" class="st2" width="7.7" height="14.1"/>
</g>
<circle class="st2" cx="1117" cy="291.8" r="19.8"/>
<g>
<g>
<rect x="1138.8" y="293.1" class="st2" width="19.2" height="10.2"/>
<rect x="1147.8" y="293.1" class="st2" width="10.2" height="16"/>
</g>
<circle class="st2" cx="1134.3" cy="298.2" r="7.7"/>
</g>
</g>
</g>
</g>
</g>
<g id="armlinks">
<g>
<g>
<polygon class="st3" points="891,247 874,247 874,215 907,215 "/>
<polygon class="st3" points="891,277 874,277 874,245 894,241 "/>
</g>
</g>
<circle class="st3" cx="888.5" cy="205.5" r="21.5"/>
</g>
<g id="handlinks">
<g>
<g>
<rect x="880.7" y="300.8" class="st2" width="7.7" height="21.1"/>
<rect x="880.7" y="321.9" class="st2" width="7.7" height="14.1"/>
</g>
<g>
<rect x="890.6" y="297.9" transform="matrix(-0.866 0.5 -0.5 -0.866 1823.2738 128.3152)" class="st2" width="7.7" height="21.1"/>
<rect x="899.4" y="316.6" transform="matrix(-0.866 0.5 -0.5 -0.866 1847.2578 152.299)" class="st2" width="7.7" height="14.1"/>
</g>
<g>
<rect x="896.6" y="289.6" transform="matrix(-0.766 0.6428 -0.6428 -0.766 1783.1064 -48.7322)" class="st2" width="7.7" height="21.1"/>
<rect x="908" y="306.5" transform="matrix(-0.766 0.6428 -0.6428 -0.766 1811.8617 -32.3203)" class="st2" width="7.7" height="14.1"/>
</g>
<g>
<rect x="868.1" y="300.8" class="st2" width="7.7" height="21.1"/>
<rect x="868.1" y="321.9" class="st2" width="7.7" height="14.1"/>
</g>
<circle class="st2" cx="882" cy="291.8" r="19.8"/>
<g>
<g>
<rect x="841" y="293.1" class="st2" width="19.2" height="10.2"/>
<rect x="841" y="293.1" class="st2" width="10.2" height="16"/>
</g>
<circle class="st2" cx="864.7" cy="298.2" r="7.7"/>
</g>
</g>
</g>
<g id="bovenarmlinks">
<rect x="881" y="144" class="st3" width="33" height="33"/>
<polygon class="st3" points="938,154 896,167 896,125 938,125 "/>
<rect x="874" y="172" class="st3" width="33" height="33"/>
<circle class="st2" cx="906.5" cy="153.5" r="3.5"/>
</g>
<g id="onderlichaam">
<polygon class="st3" points="951,311 951,336 989,358 1011,358 1052,334 1052,311 "/>
<path class="st2" d="M1016.9,332.5h-29.4H1016.9c-0.8-7.6-7.1-13.5-14.9-13.5c-8.3,0-15,6.7-15,15s6.7,15,15,15
c7.8,0,14.2-5.9,14.9-13.5h-29.4h29.4c0-0.5,0.1-1,0.1-1.5S1017,333,1016.9,332.5z"/>
</g>
<g id="bovenlichaam">
<polygon class="st2" points="1053,311 950,311 923,128 1079,128 "/>
<path id="tandwiel" class="st13" d="M1041.4,213.1v-10.2h-9.7c-0.1-0.8-0.3-1.7-0.5-2.5l9-3.7l-3.9-9.5l-9,3.7c-0.1-0.1-0.1-0.2-0.2-0.3
c-0.2-0.3-0.3-0.5-0.5-0.8s-0.3-0.5-0.5-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l6.9-6.9l-7.2-7.2l-6.9,6.9c-0.7-0.5-1.4-1-2.1-1.4l3.7-9
l-9.5-3.9l-3.7,9c-0.8-0.2-1.6-0.4-2.5-0.5V166h-10.2v9.8c-0.8,0.1-1.6,0.3-2.4,0.5l-3.8-9.1l-9.5,3.9l3.8,9.2
c-0.7,0.4-1.4,0.9-2,1.4l-7-7l-7.2,7.2l7.1,7.1c-0.5,0.7-0.9,1.3-1.3,2l-9.3-3.9l-3.9,9.5l9.4,3.9c-0.2,0.8-0.3,1.5-0.4,2.3h-10.2
V213H968c0.1,0.8,0.3,1.5,0.5,2.3l-9.5,3.9l3.9,9.5l9.5-4l0,0c0.2,0.3,0.4,0.6,0.6,0.9c0.2,0.3,0.4,0.6,0.6,0.9l0,0l-7.3,7.3
l7.2,7.2l7.3-7.3c0.6,0.5,1.3,0.9,1.9,1.3l-3.9,9.5l9.5,3.9l3.9-9.4c0.8,0.2,1.5,0.3,2.3,0.5v10.2h10.2v-10.1
c0.8-0.1,1.6-0.3,2.3-0.4l3.9,9.3l9.5-3.9l-3.8-9.2c0.7-0.4,1.4-0.9,2-1.3l7,7l7.2-7.2l-7-7c0.5-0.7,1-1.3,1.4-2l9.1,3.8l3.9-9.5
l-9-3.7c0.2-0.8,0.4-1.6,0.5-2.5h9.7V213.1z M1007.4,227.1c-10.7,4.4-23-0.6-27.4-11.4c-3.8-9.3-0.5-19.7,7.4-25.3
c0.1-0.1,0.2-0.1,0.3-0.2s0.2-0.1,0.3-0.2c8.1-5.2,19.1-4.3,26.2,2.8c8.2,8.2,8.2,21.5,0,29.7c-1,1-2,1.8-3.1,2.6
C1009.9,225.9,1008.7,226.6,1007.4,227.1z"/>
</g>
<g id="nek">
<rect x="975" y="106" class="st3" width="49" height="12"/>
<rect x="975" y="116" class="st3" width="49" height="12"/>
</g>
<g id="Hoofd">
<g>
<g>
<path class="st2" d="M931.1,22.3l-8.5-27.7c0,0,46.8-29.2,76.4-29.2c29.6,0,78.8,29.2,78.8,29.2l-37.2,111.6H957l-14.7-47.6
L931,22"/>
<path class="st2" d="M958.4,39.6"/>
</g>
<g>
<path class="-st4" d="M989.6-4.4"/>
</g>
<g>
<path class="st4" d="M923.6-4.4"/>
</g>
<path class="st6" d="M1052.8,36.4"/>
</g>
</g>
<g id="Ogen_en_mond">
<g>
<g>
<path class="st4" d="M989.6-4.4"/>
</g>
<g>
<path class="st4" d="M923.6-4.4"/>
</g>
<g>
<circle cx="962.6" cy="19.8" r="5.5"/>
<g>
<path class="st5" d="M968.1,19.8c0,1.4-0.5,2.9-1.5,4s-2.4,1.9-4,2s-3.3-0.4-4.5-1.5s-2-2.8-2-4.5s0.8-3.4,2-4.5
s2.9-1.7,4.5-1.5c1.6,0.1,3,0.9,4,2C967.6,16.9,968.1,18.3,968.1,19.8z M968.1,19.8c0-1.5-0.7-2.9-1.7-3.8
c-1.1-0.9-2.5-1.4-3.8-1.2c-1.3,0.1-2.5,0.8-3.3,1.7s-1.2,2.1-1.2,3.3s0.4,2.4,1.2,3.3c0.8,0.9,2,1.6,3.3,1.7
c1.3,0.1,2.7-0.3,3.8-1.2C967.4,22.6,968.1,21.2,968.1,19.8z"/>
</g>
</g>
<polygon class="st6" points="976.4,56.8 960.4,56.8 952.4,40.4 964.4,40.4 "/>
<polygon class="st6" points="1000.4,56.8 976.4,56.8 964.4,40.4 1000.4,40.4 "/>
<path class="st6" d="M952.4,40.4c0,0,8.8,8.6,18,8.4"/>
<path class="st6" d="M1052.8,36.4"/>
<g>
<polyline class="st9" points="1008,-41.7 998.8,-27.2 989.6,-41.7 "/>
<path d="M1008-41.7c-1.2,2.6-2.5,5.1-3.9,7.6s-2.9,4.9-4.4,7.3l-0.8,1.3l-0.8-1.3c-1.5-2.4-3-4.8-4.4-7.3s-2.8-5-3.9-7.6
c1.9,2.2,3.6,4.5,5.3,6.8s3.2,4.7,4.8,7.1h-1.7c1.6-2.4,3.1-4.8,4.8-7.1C1004.4-37.2,1006.1-39.5,1008-41.7z"/>
</g>
<polygon class="st6" points="1024.4,56.8 1040.4,56.8 1048.4,40.4 1036.4,40.4 "/>
<polygon class="st6" points="1000.4,56.8 1024.4,56.8 1036.4,40.4 1000.4,40.4 "/>
<path class="st6" d="M1048.4,40.4c0,0-8.8,8.6-18,8.4"/>
<line class="st7" x1="970.4" y1="48.8" x2="1030.4" y2="48.8"/>
<g>
<circle cx="1038.6" cy="19.8" r="5.5"/>
<g>
<path class="st5" d="M1044.1,19.8c0,1.4-0.5,2.9-1.5,4s-2.4,1.9-4,2s-3.3-0.4-4.5-1.5s-2-2.8-2-4.5s0.8-3.4,2-4.5
s2.9-1.7,4.5-1.5c1.6,0.1,3,0.9,4,2C1043.6,16.9,1044.1,18.3,1044.1,19.8z M1044.1,19.8c0-1.5-0.7-2.9-1.7-3.8
c-1.1-0.9-2.5-1.4-3.8-1.2c-1.3,0.1-2.5,0.8-3.3,1.7c-0.8,0.9-1.2,2.1-1.2,3.3s0.4,2.4,1.2,3.3c0.8,0.9,2,1.6,3.3,1.7
c1.3,0.1,2.7-0.3,3.8-1.2C1043.4,22.6,1044.1,21.2,1044.1,19.8z"/>
</g>
</g>
</g>
</g>
</svg>
</div>
<ul id="buttons">
<li><button id="robot-button">Robot</button></li>
<li><button id="head-button">Head</button></li>
<li><button id="arms-button">Arm</button></li>
<li><button id="hands-button">Hand</button></li>
<li><button id="body-button">Body</button></li>
<li><button id="restart-button">Restart</button></li>
</ul>:root {
--primary: #fff;
--secondary: #333;
--bg: #ccc;
--highlight:#7F7FD3;
}
* {
box-sizing:border-box;
}
html {
font:100% / 250% "Helvetica";
padding:0;
margin:0;
height:100%;
}
body {
font-size: 1.5em;
padding:0;
margin:0;
overflow:hidden;
background-color: #000;
display:flex;
justify-content:center;
flex-direction:column;
}
ul {
list-style:none;
margin:0;
display:flex;
}
body > ul {
box-shadow:inset 0 0 3px rgba(0,0,0,.2);
padding:.5em;
justify-content: center;
position:absolute;
bottom:0;
width:100%;
background-color: var(--highlight);
}
body > div,
svg {
width:100vw;
height:100vh;
}
li {
margin-right:.5em
}
button {
font-size: .7em;
border-radius:.25em;
padding:.15em .5em;
box-shadow: 0 0 1px rgba(0,0,0,.6);
background-color: var(--primary);
color:var(--secondary);
border:none;
}
button.paused {
background-color: var(--secondary);
color: var(--primary)
}
ul li:last-of-type {
margin-left:auto
}// timelines
var tlRobot = new TimelineMax({ repeat: -1, paused: true, yoyo: true });
var tlHands = new TimelineMax({ repeat: -1, paused: true, yoyo: true });
var tlArms = new TimelineMax({ repeat: -1, paused: true, yoyo: true });
var tlHead = new TimelineMax({ repeat: -1, paused: true, yoyo: true });
var tlBody = new TimelineMax({ repeat: -1, paused: true, yoyo: true });
// robot elements
var robot = $('svg');
var robotParts = $$('svg > *');
var rightHand = $('#handrechts');
var rightArm = $('#armrechts');
var head = $('#Hoofd');
var rightBottomArmHand = $('#onderarmrechts-hand');
var body = $('#bovenlichaam');
var gear = $('#tandwiel');
// buttons
var robotBtn = $('#robot-button');
var headBtn = $('#head-button');
var armsBtn = $('#arms-button');
var handsBtn = $('#hands-button');
var bodyBtn = $('#body-button');
var restartBtn = $('#restart-button');
var buttons = $$('button');
// animate robot
tlRobot.staggerTo(
robotParts,
.25,
{
//scale: 1.5,
//rotation: 360,
opacity: 0,
transformOrigin: '50% 50%',
ease: Elastic.easeOut.config(1, 0.3)
},
.05
);
// animate hands
tlHands
.to(rightHand, 0.125, {
rotation: 30,
transformOrigin: '50% 50%'
})
.to(rightHand, 0.125, {
rotation: -30,
transformOrigin: '50% 50%'
});
// animate arms
tlArms
.to(rightArm, 0.25, {
rotation: -90,
transformOrigin: '15% 0'
})
.to(rightBottomArmHand, 0.25, {
rotation: -90,
transformOrigin: '50% 10%'
});
// animate head
tlHead
.to(head, 0.25, {
rotation: 360,
transformOrigin: 'center, center'
})
.to(head, 0.25, {
x: -20,
transformOrigin: 'center, center',
ease: Back.easeOut.config(1.7)
});
// animate body
tlBody
.to(body, 0.25, {
scale: 1.3,
transformOrigin: 'center, center'
})
.to(body, 0.25, {
y: -20,
transformOrigin: 'center, center',
ease: Back.easeOut.config(1.7)
})
.to(
gear,
0.75,
{
rotation: 360,
y: 30,
transformOrigin: '50% 50%',
ease: Elastic.easeOut.config(1, 0.3)
},
'-=0.5'
);
// button events
robotBtn.addEventListener('click', function() {
tlRobot.paused(!tlRobot.paused());
this.classList.toggle('paused');
});
headBtn.addEventListener('click', function() {
tlHead.paused(!tlHead.paused());
this.classList.toggle('paused');
});
armsBtn.addEventListener('click', function() {
tlArms.paused(!tlArms.paused());
this.classList.toggle('paused');
});
handsBtn.addEventListener('click', function() {
tlHands.paused(!tlHands.paused());
this.classList.toggle('paused');
});
bodyBtn.addEventListener('click', function() {
tlBody.paused(!tlBody.paused());
this.classList.toggle('paused');
});
restartBtn.addEventListener('click', function() {
buttons.forEach(function(button){
button.classList.remove('paused');
});
tlRobot.restart().stop();
tlHead.restart().stop();
tlArms.restart().stop();
tlHands.restart().stop();
tlBody.restart().stop();
});
// helper functions
function $(el) {
return document.querySelector(el);
}
function $$(els) {
return document.querySelectorAll(els);
}
External CSS
This Pen doesn't use any external CSS resources.