console
(function() {
var openComment, styles, time, writeStyleChar, writeStyles;
styles = `
/*
pre {
position: fixed;
top: 30px; bottom: 30px; right: 2%;
transition: left 500ms;overflow: auto;
background-color: #313744; color: #a6c3d4;border: 1px solid rgba(0,0,0,0.2);
padding: 24px 12px;box-sizing: border-box;
width: 48%;
border-radius: 3px;box-shadow: 0px 4px 0px 2px rgba(0,0,0,0.1);
}
pre em:not(.comment) {font-style:normal; }
.comment{ color: #707e84; }
.selector{ color: #c66c75; }
.selector .key { color: #c66c75; }
.key{ color: #c7ccd4; }
.value{ color: #d5927b; }
.code{text-align: right; }
.code img {width: 50px;vertical-align: top; }
*/
pre {
display:none
}
.container {position: relative;margin:240px auto 0;width: 240px;height: 425px;}
/* HEAD
========================================================================== */
.hold-head {
position: relative;
height: 200px; }
.hold-head .head {
position: relative;
margin: 0 auto;
background-color: #ffe000;
border: solid 4px #000; }
.hold-head .head-up {
border-bottom: 4px solid #ffe000;
border-radius: 110px 110px 110px 110px;
height: 195px;
left: 8px;
position: absolute;
top: 2px;
width: 218px;
z-index: 1; }
.hold-head .head-down {
border-radius: 50%;
height: 154px;
left: 2px;
top: 65px;
width: 234px; }
.hold-head .head-middle {
position: absolute;
z-index: 2;
top: 76px;
left: 8px;
height: 123px;
width: 230px;
border: medium none;
border-radius: 50%; }
.hold-head .ear {
position: absolute;
background: none repeat scroll 0 0 #ffe000;
border: 5px solid #000;
overflow: hidden; }
.hold-head .ear-left {
left: -35px;
top: -65px;
width: 100px;
height: 110px;
border-radius: 5px 125% 0px 125%;
transform: rotate(-26deg) skewX(25deg) skewY(0deg);
transform-origin: 100% 100%;
/* animation */
animation: ear_left 4.5s infinite linear 0s; }
.hold-head .ear-left:before {
background-color: #000;
content: "";
height: 60px;
left: -32px;
position: absolute;
top: -5px;
width: 60px;
transform: rotate(18deg); }
.hold-head .ear-right {
width: 140px;
height: 80px;
right: -77px;
top: 70px;
border-radius: 10px 125% 10px 125%;
box-shadow: 11px -9px 0 2px rgba(0, 0, 0, 0.2) inset;
transform: rotate(-90deg) skewX(27deg) skewY(0deg);
transform-origin: 0 0;
/* animation */
animation: ear_right 3s infinite linear 0s; }
.hold-head .ear-right:before {
background-color: #000;
content: "";
height: 60px;
position: absolute;
right: -5px;
top: 62px;
width: 65px;
transform: rotate(-15deg); }
.hold-head .hold-face {
position: absolute;
z-index: 3;
height: 222px;
width: 238px; }
.hold-face {
/* EYES */
/* NOSE */
/* CHEEK */
/* MOUTH */ }
.hold-face .eye {
background-color: #000;
border-radius: 50%;
height: 42px;
overflow: hidden;
position: absolute;
top: 84px;
width: 42px; }
.hold-face .eye .iris {
background-color: #fff;
border-radius: 50%;
height: 16px;
position: absolute;
top: 7px;
width: 16px; }
.hold-face .eye .iris-small {
width: 6px;
height: 11px; }
.hold-face .eye-left {
left: 36px; }
.hold-face .eye-left .iris-small {
left: 7px;
top: 32px;
transform: rotate(27deg); }
.hold-face .eye-left .iris-left {
right: 7px;
/* animation */
animation: pisca 3s infinite step-start 0s; }
.hold-face .eye-right {
right: 36px; }
.hold-face .eye-right .iris-small {
left: 25px;
top: 33px;
transform: rotate(-25deg); }
.hold-face .eye-right .iris-right {
left: 7px;
/* animation */
animation: pisca 3s infinite step-start 0s; }
.hold-face .eyebrow {
width: 45px;
height: 2px;
background: #000;
position: absolute;
top: 85px;
z-index: 2;
opacity: 0;
/* animation */
animation: angry 5s infinite step-start 2s; }
.hold-face .eyebrow:before {
background: #ffe000;
height: 20px;
width: 50px;
content: '';
position: absolute;
top: -20px; }
.hold-face .eyebrow-left {
left: 35px;
transform: rotate(22deg); }
.hold-face .eyebrow-right {
right: 35px;
transform: rotate(-22deg); }
.hold-face .nose {
position: absolute;
top: 125px;
left: 111px;
width: 17px;
height: 15px; }
.hold-face .nose .nose-top {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
height: 2px;
background-color: #000;
border-radius: 34% 34% 22% 22%; }
.hold-face .nose .hold-nose-bottom {
position: absolute;
top: 1px;
z-index: 1;
height: 10px;
width: 17px;
overflow: hidden; }
.hold-face .nose .hold-nose-bottom .nose-bottom {
position: absolute;
top: -10px;
height: 17px;
width: 16px;
background-color: #000;
border-radius: 34% 33% 33% 33%;
transform: rotate(135deg); }
.hold-face .cheek {
background-color: #f00;
border: 2px solid #000;
border-radius: 50%;
height: 50px;
position: absolute;
top: 126px;
width: 50px; }
.hold-face .cheek .hold-thunder {
height: 35px;
position: absolute;
width: 30px;
z-index: 1;
opacity: 0;
/* animation */
animation: light 5s infinite step-start 0s; }
.hold-face .cheek .hold-thunder .thunder {
position: absolute;
background: #fff;
height: 1px; }
.hold-face .cheek .hold-thunder .thunder1 {
width: 10px;
left: 15px;
top: 28px; }
.hold-face .cheek .hold-thunder .thunder2 {
left: 8px;
top: 25px;
width: 10px;
transform: rotate(41deg); }
.hold-face .cheek .hold-thunder .thunder3 {
left: 3px;
top: 24px;
width: 8px;
transform: rotate(-40deg); }
.hold-face .cheek .hold-thunder1 {
left: 0px;
top: -4px; }
.hold-face .cheek .hold-thunder2 {
left: 25px;
top: 4px;
transform: rotate(111deg); }
.hold-face .cheek .hold-thunder3 {
left: 25px;
top: 4px;
transform: rotate(25deg); }
.hold-face .cheek-left {
left: 4px; }
.hold-face .cheek-right {
right: -3px; }
.hold-face .light {
position: absolute;
top: 88px;
width: 130px;
height: 130px;
background-image:
-webkit-gradient(radial, 50% 50%, 2, 50% 50%, 30, from(#fff), color-stop(0.1, rgba(255, 240, 174, 0.5)), to(rgba(255, 255, 253, 0.1))),
-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 30, from(#fff), color-stop(0.1, rgba(255, 186, 170, 0.4)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 1,50% 50%, 40, from(rgba(255, 255, 255, 0.9)), color-stop(0.05, rgba(251, 255, 186, 0.3)), to(transparent)),
-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 30,from(rgba(255, 255, 255, 0.4)), color-stop(0.03, rgba(253, 255, 219, 0.2)), to(transparent));
opacity: 0;
/* animation */
animation: light 5s infinite step-start 0s;
}
.hold-face .light-left {
left: -35px; }
.hold-face .light-right {
right: -43px; }
.hold-face .hold-mouth {
position: relative;
top: 150px;
left: 70px;
height: 9px;
width: 100px;
overflow: hidden; }
.hold-face .hold-mouth .mouth {
position: absolute;
border: solid 2px #000;
border-radius: 20px; }
.hold-face .hold-mouth .mouth-left {
height: 40px;
left: 16px;
top: -35px;
width: 30px; }
.hold-face .hold-mouth .mouth-right {
height: 40px;
right: 16px;
top: -35px;
width: 30px; }
.hold-face .hold-mouth .mouth-center {
height: 40px;
right: 33px;
top: 0px;
width: 30px;
background-color: #ffe000;
z-index: 2; }
/* BODY
========================================================================== */
.hold-body {
background-color: #ffe000;
border: 4px solid #000;
border-radius: 55% 55% 23% 23%;
height: 255px;
left: 12px;
position: relative;
top: -70px;
width: 215px;
z-index: -1; }
.hold-body .hand {
border: 2px solid #000;
height: 65px;
position: absolute;
width: 45px; }
.hold-body .hand-left {
top: 100px;
left: 25px;
border-radius: 20px 20px 28px 35px;
transform: rotate(-26deg); }
.hold-body .hand-left:before {
background-color: #ffe000;
content: "";
height: 15px;
left: -3px;
position: absolute;
top: -3px;
width: 50px;
z-index: 2; }
.hold-body .hand-right {
top: 100px;
right: 25px;
border-radius: 20px 20px 28px 35px;
transform: rotate(26deg); }
.hold-body .hand-right:before {
background-color: #ffe000;
content: "";
height: 15px;
left: -3px;
position: absolute;
top: -3px;
width: 50px;
z-index: 2; }
.foot {
position: absolute;
border: 3px solid #000;
background: #ffe000;
height: 25px;
width: 75px;
z-index: -2; }
.left-foot {
border-radius: 65px 20px 10px 15px;
bottom: 13px;
left: 5px; }
.right-foot {
border-radius: 20px 65px 15px 10px;
bottom: 13px;
right: -5px; }
/* TAIL
========================================================================== */
.hold-tail {
position: absolute;
z-index: -2;
width: 200px;
height: 340px;
left: -165px;
bottom: 0;
overflow: hidden; }
.hold-tail .tail {
position: absolute;
border: 3px solid #000;
background-color: #ffe000; }
.hold-tail .brown {
background: #976500; }
.hold-tail .tail1 {
z-index: 3;
border-top: none;
bottom: 74px;
height: 25px;
right: -8px;
width: 45px;
transform: skewX(-30deg); }
.hold-tail .tail2 {
z-index: 2;
bottom: 99px;
height: 23px;
right: 15px;
width: 21px;
border-left: none;
transform: skewX(-30deg); }
.hold-tail .tail3 {
bottom: 99px;
height: 70px;
right: 22px;
width: 25px;
z-index: 1;
transform: skewX(-30deg);
background: #ffe000;
background: linear-gradient(to bottom, #ffe000 0%, #ffe000 49%, #000 50%, #926512 51%, #926512 100%); }
.hold-tail .tail4 {
border-radius: 0 0 0 6px;
bottom: 140px;
height: 29px;
right: 37px;
width: 63px;
z-index: 1;
border-right: none;
transform: skewX(-30deg); }
.hold-tail .tail5 {
border-bottom: medium none;
border-top: none;
bottom: 172px;
height: 51px;
right: 22px;
width: 52px;
z-index: 1;
transform: skewX(-30deg); }
.hold-tail .tail6 {
border-radius: 10px 0 0 10px;
border-right: none;
bottom: 220px;
height: 60px;
right: 2px;
width: 135px;
z-index: 0;
transform: skewX(41deg); }
/* ANIMATIONS
========================================================================== */
/* PISCA */
@keyframes pisca {
0%, 100% {
opacity: 0; }
15%, 95% {
opacity: 1; } }
/* EAR RIGHT */
@keyframes ear_right {
0% {
transform: rotate(-90deg) skewX(27deg) skewY(0deg); }
50% {
transform: rotate(-87deg) skewX(27deg) skewY(0deg); }
100% {
transform: rotate(-90deg) skewX(27deg) skewY(0deg); } }
/* EAR LEFT */
@keyframes ear_left {
0% {
transform: rotate(-26deg) skewX(25deg) skewY(0deg); }
50% {
transform: rotate(-22deg) skewX(25deg) skewY(0deg); }
100% {
transform: rotate(-26deg) skewX(25deg) skewY(0deg); } }
/* ANGRY */
@keyframes angry {
0% {
opacity: 0; }
5% {
opacity: 1; }
19% {
opacity: 1; }
25% {
opacity: 0; }
100% {
opacity: 0; } }
/* LIGHT */
@keyframes light {
0% {
opacity: 0; }
5% {
opacity: 1; }
10% {
opacity: 0; }
15% {
opacity: 1; }
20% {
opacity: 0; }
100% {
opacity: 0; } }
`;
openComment = false;
writeStyleChar = function(which) {
// begin wrapping open comments
if (which === '/' && openComment === false) {
openComment = true;
styles = $('#style-text').html() + which;
} else if (which === '/' && openComment === true) {
openComment = false;
styles = $('#style-text')
.html()
.replace(/(\/[^\/]*\*)$/, '<em class="comment">$1/</em>');
// wrap style declaration
} else if (which === ':') {
styles = $('#style-text')
.html()
.replace(/([a-zA-Z- ^\n]*)$/, '<em class="key">$1</em>:');
// wrap style value
} else if (which === ';') {
styles = $('#style-text')
.html()
.replace(/([^:]*)$/, '<em class="value">$1</em>;');
// wrap selector
} else if (which === '{') {
styles = $('#style-text')
.html()
.replace(/(.*)$/, '<em class="selector">$1</em>{');
} else {
styles = $('#style-text').html() + which;
}
$('#style-text').html(styles);
return $('#style-tag').append(which);
};
writeStyles = function(message, index, interval) {
var pre;
if (index < message.length) {
pre = document.getElementById('style-text');
pre.scrollTop = pre.scrollHeight;
writeStyleChar(message[index++]);
return setTimeout(function() {
return writeStyles(message, index, interval);
}, interval);
}
};
// appending the tags I'll need.
$('body').append(
`<style id="style-tag"></style>\n<div class="container">
<div class="hold-head">
<div class="ear ear-left"></div>
<div class="ear ear-right"></div>
<div class="hold-face">
<div class="eyebrow eyebrow-left"></div>
<div class="eyebrow eyebrow-right"></div>
<div class="eye eye-left">
<div class="iris iris-left"></div>
<div class="iris iris-small"></div>
</div>
<div class="eye eye-right">
<div class="iris iris-right"></div>
<div class="iris iris-small"></div>
</div>
<div class="nose">
<div class="nose-top"></div>
<div class="hold-nose-bottom">
<div class="nose-bottom"></div>
</div>
</div>
<div id="open" class="mouth-open">
<div class="tongue"></div>
</div>
<div class="hold-mouth">
<div class="mouth mouth-left"></div>
<div class="mouth mouth-center"></div>
<div class="mouth mouth-right"></div>
</div>
<div class="cheek cheek-left">
<div class="hold-thunder hold-thunder1">
<div class="thunder thunder1"></div>
<div class="thunder thunder2"></div>
<div class="thunder thunder3"></div>
</div>
<div class="hold-thunder hold-thunder2">
<div class="thunder thunder1"></div>
<div class="thunder thunder2"></div>
<div class="thunder thunder3"></div>
</div>
<div class="hold-thunder hold-thunder3">
<div class="thunder thunder1"></div>
<div class="thunder thunder2"></div>
<div class="thunder thunder3"></div>
</div>
</div>
<div class="cheek cheek-right">
<div class="hold-thunder hold-thunder1">
<div class="thunder thunder1"></div>
<div class="thunder thunder2"></div>
<div class="thunder thunder3"></div>
</div>
<div class="hold-thunder hold-thunder2">
<div class="thunder thunder1"></div>
<div class="thunder thunder2"></div>
<div class="thunder thunder3"></div>
</div>
<div class="hold-thunder hold-thunder3">
<div class="thunder thunder1"></div>
<div class="thunder thunder2"></div>
<div class="thunder thunder3"></div>
</div>
</div>
<div class="light light-left"></div>
<div class="light light-right"></div>
</div>
<div class="head head-up"></div>
<div class="head head-middle"></div>
<div class="head head-down"></div>
</div>
<div class="hold-body">
<div class="hand hand-left"></div>
<div class="hand hand-right"></div>
</div>
<div class="foot left-foot"></div>
<div class="foot right-foot"></div>
<div class="hold-tail">
<div class="tail brown tail1"></div>
<div class="tail brown tail2"></div>
<div class="tail tail3"></div>
<div class="tail tail4"></div>
<div class="tail tail5"></div>
<div class="tail tail6"></div>
</div>
</div>\n<pre id="style-text"></pre>`,
);
// faster typing in small iframe on codepen homepage
time = window.innerWidth <= 578 ? 4 : 0.1;
// starting it off
writeStyles(styles, 0, time);
/*
Changelog:
1.0.0: i exist!
1.0.1: heart instead of circle
1.0.2: including standard CSS3 transforms and animations
was only using `-webkit` to be less verbose (standard transforms dont work in safari)
now works in FF
1.0.3: crossbrowser echo
nested `scale()` styles (scaled in scaled) only worked in chrome
moved echo out of heart to fix
1.0.4: more efficient animations
`0%, 100% {}` instead of duplicated keyframes
1.0.5: overflwo fix
`overflow: auto` on the `pre`
*/
}.call(this));