HTML
<div class="main">
<div class="wrap">
<svg id="shruggie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 100">
<defs>
<style>
.shrug {
stroke: #fff;
stroke-width: 2;
fill: none;
}
.smile {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
}
</style>
</defs>
<line x1="25" y1="32" x2="50" y2="32" class="shrug hand-l"/>
<line x1="55" y1="30" x2="65" y2="60" class="shrug forearm-l"/>
<line x1="70" y1="65" x2="95" y2="65" class="shrug shoulder-l"/>
<path d="M100,23 Q80,43 100,65" class="shrug head"/>
<path d="M105,25 Q107,30 108,35" class="shrug head eye-l"/>
<path d="M119,25 Q120,30 119,35" class="shrug head eye-r"/>
<path d="M110,60 Q135,60 135,33" class="shrug smile"/>
<path d="M135,23 Q155,43 135,65" class="shrug head"/>
<line x1="140" y1="65" x2="165" y2="65" class="shrug shoulder-r"/>
<line x1="170" y1="60" x2="180" y2="30" class="shrug forearm-r"/>
<line x1="185" y1="32" x2="210" y2="32" class="shrug hand-r"/>
</svg>
</div>
</div>
CSS
body {
background: #333;
}
.main {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.wrap {
width: 100vw;
height: 250vw;
max-height: 100vh;
max-width: 250vh;
margin: 0 auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
#shruggie {
width: 100%;
height: 100%;
position: relative;
}
.shrug {
opacity: 0;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-animation-duration: 0.25s;
animation-duration: 0.25s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes shoulder-l {
from {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shoulder-l {
from {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes shoulder-r {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes shoulder-r {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes forearm-l {
from {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes forearm-l {
from {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes forearm-r {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes forearm-r {
from {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes hand-l {
from {
-webkit-transform: rotate(260deg);
transform: rotate(260deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes hand-l {
from {
-webkit-transform: rotate(260deg);
transform: rotate(260deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes hand-r {
from {
-webkit-transform: rotate(-260deg);
transform: rotate(-260deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@keyframes hand-r {
from {
-webkit-transform: rotate(-260deg);
transform: rotate(-260deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
@-webkit-keyframes smile {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes smile {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.head {
-webkit-animation-name: fadein;
animation-name: fadein;
}
.shoulder-l {
-webkit-transform-origin: center right;
transform-origin: center right;
-webkit-animation-name: shoulder-l, fadein;
animation-name: shoulder-l, fadein;
-webkit-animation-delay: 0.125s;
animation-delay: 0.125s;
}
.shoulder-r {
-webkit-transform-origin: center left;
transform-origin: center left;
-webkit-animation-name: shoulder-r, fadein;
animation-name: shoulder-r, fadein;
-webkit-animation-delay: 0.125s;
animation-delay: 0.125s;
}
.forearm-l {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: forearm-l, fadein;
animation-name: forearm-l, fadein;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.forearm-r {
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-animation-name: forearm-r, fadein;
animation-name: forearm-r, fadein;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.hand-l {
-webkit-transform-origin: center right;
transform-origin: center right;
-webkit-animation-name: hand-l, fadein;
animation-name: hand-l, fadein;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.hand-r {
-webkit-transform-origin: center left;
transform-origin: center left;
-webkit-animation-name: hand-r, fadein;
animation-name: hand-r, fadein;
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.smile {
opacity: 1;
-webkit-animation-name: smile;
animation-name: smile;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
-webkit-animation-duration: 4.5s;
animation-duration: 4.5s;
}
