console
<div class="star-container">
<svg xmlns="http://www.w3.org/2000/svg" class="star" viewBox="0 0 200 200" version="1.1">
<defs>
<filter id="blurHighlight" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="7" />
</filter>
<filter id="blurMids" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="8" />
</filter>
</defs>
<path id="main-shape" d="m 197.98149,74.01862 c -10.24378,17.92265 -27.46864,35.55182 -43.60206,46.61261 6.79447,18.96546 8.87595,41.26102 4.57712,67.12932 -26.89648,-6.2726 -41.80502,-14.2304 -57.80501,-27.064 -15.761293,10.9492 -39.70716,21.1389 -62.429293,25.0972 -2.576006,-20.1275 -1.080137,-43.18596 7.876597,-63.33908 C 29.195908,111.53682 12.220095,91.93035 3.4382987,70.83632 23.387994,63.08643 45.847847,59.31655 66.111313,58.75461 c 6.325068,-19.16089 20.577644,-42.15745 35.754617,-56.99907 13.36341,14.88266 24.30707,36.56496 30.85746,55.87212 20.81138,-0.31145 44.76047,5.45595 65.2581,16.39096 z" fill="#ffcc00" stroke="#181818" stroke-width="5" />
<path id="lighting-mids" d="m 177.62024,78.359873 c -8.09951,14.171015 -21.7188,28.109987 -34.47511,36.855487 5.37222,14.99554 7.018,32.62411 3.61902,53.07756 -21.26641,-4.95959 -33.05424,-11.25164 -45.70506,-21.39886 -12.462077,8.65727 -31.395507,16.71403 -49.36136,19.84376 -2.036787,-15.91434 -0.854039,-34.14611 6.227839,-50.08071 C 44.165479,108.02463 30.743106,92.522254 23.799548,75.843703 39.573299,69.716049 57.331773,66.735294 73.353616,66.290981 78.354698,51.140919 89.623872,32.958084 101.62394,21.223166 c 10.56614,11.767367 19.21903,28.911048 24.39827,44.176763 16.45506,-0.246256 35.39104,4.31389 51.59803,12.959944 z" fill="#ffdd55" filter="url(#blurMids)" />
<path id="lighting-highlights" d="m 154.60694,83.266573 c -5.67595,9.930729 -15.22005,19.698857 -24.15938,25.827497 3.76473,10.50854 4.91805,22.86225 2.53612,37.19557 -14.90302,-3.47557 -23.16367,-7.8849 -32.02907,-14.99585 -8.733148,6.06683 -22.001272,11.71282 -34.591339,13.90607 -1.427335,-11.15242 -0.598491,-23.92883 4.36433,-35.09544 -9.642762,-6.04944 -19.048861,-16.913169 -23.91475,-28.601123 11.053891,-4.294123 23.498631,-6.382969 34.72638,-6.694333 3.504646,-10.616825 11.40183,-23.358947 19.811209,-31.582515 7.40451,8.246307 13.46826,20.260214 17.09776,30.958084 11.53133,-0.172569 24.80125,3.023078 36.15874,9.082039 z" fill="#ffeeaa" filter="url(#blurHighlight)" />
<g id="face">
<ellipse cx="88.341545" cy="88.505753" rx="4.9261084" ry="11.165846" fill="#181818" />
<ellipse cx="115.59934" cy="88.505753" rx="4.9261084" ry="11.165846" fill="#181818" />
<path d="m 93.267651,116.25616 c 4.926108,-2.46736 11.494249,-2.96022 17.077169,-1.31363 -1.64203,5.58292 -4.29252,9.7255 -8.21018,10.50903 -4.926102,0.98522 -7.55336,-3.94089 -8.866989,-9.1954 z" fill="#181818" />
</g>
</svg>
</div>
<div class="cta">Hover me!</div>
$star-size: 200px;
$wobble-amount: 0.1;
$wobble-timing: cubic-bezier(0.445, 0.050, 0.550, 0.950);
$teeter-amount: 10deg;
$teeter-timing-in: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$teeter-timing-out: cubic-bezier(0.390, 0.575, 0.565, 1.000);
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
body {
background: #000;
}
.cta {
position: absolute;
left: 50%;
top: 50%;
color: #fff;
font-family: 'Raleway', sans-serif;
font-size: 30px;
letter-spacing: 1px;
text-transform: uppercase;
transform: translate(-50%, -50%) translateY($star-size * 0.75);
}
.star-container {
position: absolute;
left: 50%;
top: 50%;
width: $star-size;
height: $star-size;
transform: translate(-50%, -50%);
}
.star {
animation: teeter 4000ms infinite;
&:hover {
animation-timing-function: $wobble-timing;
animation: wobble 600ms 1;
}
}
@keyframes wobble {
0% { transform: scaleX(1.0) scaleY(1.0); }
06.25% { transform: scaleX(1.0+($wobble-amount*2)) scaleY(1.0-($wobble-amount*2)); }
18.75% { transform: scaleX(1.0-($wobble-amount*2)) scaleY(1.0+($wobble-amount*2)); }
31.25% { transform: scaleX(1.0+$wobble-amount) scaleY(1.0-$wobble-amount); }
43.75% { transform: scaleX(1.0-$wobble-amount) scaleY(1.0+$wobble-amount); }
62.50% { transform: scaleX(1.0+($wobble-amount/2)) scaleY(1.0-($wobble-amount/2)); }
81.25% { transform: scaleX(1.0-($wobble-amount/2)) scaleY(1.0+($wobble-amount/2)); }
100% { transform: scaleX(1.0) scaleY(1.0); }
}
@keyframes teeter {
0% {
animation-timing-function: $teeter-timing-out;
transform: rotate(0*$teeter-amount);
}
25% {
animation-timing-function: $teeter-timing-in;
transform: rotate(-1*$teeter-amount);
}
50% {
animation-timing-function: $teeter-timing-out;
transform: rotate(0*$teeter-amount);
}
75% {
animation-timing-function: $teeter-timing-in;
transform: rotate(1*$teeter-amount);
}
100% {
transform: rotate(0*$teeter-amount);
}
}