<div id="main-ctr" class="standard">
<svg xmlns="http://www.w3.org/2000/svg" width="151" height="110" viewBox="0 0 151 110">
<g id="Page-1" fill="none" fill-rule="evenodd">
<circle id="face" cx="75" cy="55" r="50" fill="#FFEB97"/>
<g id="face-components">
<path id="wk-l-eye" stroke="#000" stroke-width="3" d="M55 59.12C55 54.7 51.418 51 47 51s-8 3.7-8 8.12" stroke-linecap="round"/>
<path id="wk-r-eye" stroke="#000" stroke-width="3" d="M110 59c0-4.418-3.582-8.12-8-8.12s-8 3.702-8 8.12" stroke-linecap="round"/>
<path id="sm-mouth-3" stroke="#000" stroke-width="3" d="M47.34 72.117s6.627 11.526 26.77 11.526 28.482-12.926 28.482-12.926" stroke-linecap="round"/>
<path id="hp-love" fill="#F9767E" d="M32.72 45.607h.003L31.42 56.22l-10.612-1.303c-1.4-.167-2.735-.87-3.67-2.07-1.864-2.383-1.44-5.827.944-7.69 1.122-.878 2.48-1.248 3.797-1.146.2-1.34.893-2.608 2.045-3.508 2.384-1.863 5.828-1.44 7.69.945.96 1.226 1.313 2.733 1.106 4.16z"/>
<path id="sm-mouth-2" stroke="#000" stroke-width="3" d="M57.786 79.82s12.038 6.573 26.507.926c14.47-5.647 17.3-18.03 17.3-18.03" stroke-linecap="round"/>
<path id="sm-mouth-1" stroke="#000" stroke-width="3" d="M63.5 81.903s2.91 2.202 11.502 2.202c8.59 0 11.502-2.202 11.502-2.202" stroke-linecap="round"/>
<path id="st-mouth" stroke="#000" stroke-width="3" d="M61.5 76.903h27.003" stroke-linecap="round"/>
<path id="st-l-eye" stroke="#000" stroke-width="5" d="M47 63.5c1.38 0 2.5-1.12 2.5-2.503S48.38 58.5 47 58.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
<path id="st-r-eye" stroke="#000" stroke-width="5" d="M101.5 64c1.38 0 2.5-1.12 2.5-2.503S102.88 59 101.5 59 99 60.114 99 61.497C99 62.88 100.12 64 101.5 64z" stroke-linecap="round"/>
<path id="hg-l-eye" stroke="#000" stroke-width="5" d="M47 53.5c1.38 0 2.5-1.12 2.5-2.503S48.38 48.5 47 48.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
<path id="hg-r-eye" stroke="#000" stroke-width="5" d="M101.5 54c1.38 0 2.5-1.12 2.5-2.503S102.88 49 101.5 49 99 50.114 99 51.497C99 52.88 100.12 54 101.5 54z" stroke-linecap="round"/>
<path id="rg-mouth" stroke="#000" stroke-width="3" d="M60.9 79.478s4.24-3.546 13.496-3.546c9.255 0 14.503 3.546 14.503 3.546" stroke-linecap="round"/>
<path id="rg-l-eye" stroke="#000" stroke-width="3" d="M39.5 57.5s4.85 1.294 8.11 2.665c3.26 1.372 6.89 3.335 6.89 3.335" stroke-linecap="round"/>
<path id="rg-r-eye" stroke="#000" stroke-width="3" d="M108.5 57.5s-4.85 1.294-8.11 2.665C97.13 61.537 93.5 63.5 93.5 63.5" stroke-linecap="round"/>
<path id="mouth" stroke="#000" stroke-width="3" d="M61.5 76.903h27.003" stroke-linecap="round"/>
<path id="l-eye" stroke="#000" stroke-width="5" d="M47 63.5c1.38 0 2.5-1.12 2.5-2.503S48.38 58.5 47 58.5s-2.5 1.114-2.5 2.497c0 1.382 1.12 2.503 2.5 2.503z" stroke-linecap="round"/>
<path id="r-eye" stroke="#000" stroke-width="5" d="M101.5 64c1.38 0 2.5-1.12 2.5-2.503S102.88 59 101.5 59 99 60.114 99 61.497C99 62.88 100.12 64 101.5 64z" stroke-linecap="round"/>
</g>
</g>
</svg>
<p>Click the expressions below.</p>
<div class="buttons-ctr">
<button class="standard active">standard</button>
<button class="wink">wink</button>
<button class="wink">rage</button>
<button class="wink">happy</button>
</div>
</div>@import "bourbon";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100);
html,
body {
display: table;
width: 100%;
height: 100%;
background: white;
}
#main-ctr {
display: table-cell;
vertical-align: middle;
text-align: center;
}
svg {
@include transform(scale(1.85));
}
p {
margin-top: 80px;
margin-bottom: 15px;
font-family: sans-serif;
color: #999;
font-size: 100;
letter-spacing: 2px;
line-height: 1.25;
font-size: 16px;
}
.buttons-ctr {
button {
border: 1px solid black;
padding: 10px 15px;
background: white;
border-radius: 3px;
cursor: pointer;
margin: 0 3px;
color: black;
text-transform: capitalize;
font-family: "roboto";
letter-spacing: 2px;
font-size: 14px;
transition: .3s all ease;
pointer-events: auto;
&.active {
background: #FFEB97;
pointer-events: none;
}
&:focus {
outline: none;
}
}
}
.copyright {
@include position(fixed, x 15px 15px x);
font-family: "Roboto";
span {
line-height: 36px;
color: #999;
margin-right: 10px;
font-weight: 300;
a {
font-weight: 400;
text-decoration: none;
color: #ea4c89;
}
}
.balapa {
width: 30px;
height: 30px;
display: block;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/111167/profile/profile-512_4.jpg");
background-size: cover;
border-radius: 50%;
border: 5px solid rgba(255,255,255,.75);
float: right;
}
}
#wk-l-eye,
#wk-r-eye,
#sm-mouth-1,
#sm-mouth-2,
#sm-mouth-3,
#st-l-eye,
#st-r-eye,
#rg-l-eye,
#rg-r-eye,
#hg-l-eye,
#hg-r-eye,
#st-mouth,
#rg-mouth,
#hr-mouth {
visibility: hidden;
}$(document).ready(function(){
var mainCtr = $("#main-ctr"),
lEye = $("#l-eye"),
rEye = $("#r-eye"),
mouth = $("#mouth"),
hpLove = $("#hp-love"),
button = $("button");
// animatable var
var wkREye = "#wk-r-eye",
wkLEye = "#wk-l-eye",
smMouth1 = "#sm-mouth-1",
smMouth2 = "#sm-mouth-2",
smMouth3 = "#sm-mouth-3",
stREye = "#st-r-eye",
stLEye = "#st-l-eye",
rgREye = "#rg-r-eye",
rgLEye = "#rg-l-eye",
hgREye = "#hg-r-eye",
hgLEye = "#hg-l-eye",
stMouth = "#st-mouth",
rgMouth = "#rg-mouth";
var tl = new TimelineMax({});
tl.timeScale(1.25);
tl.set(hpLove, {
opacity: 0,
scale: .8
});
MorphSVGPlugin.convertToPath("circle");
// functions
// rage
function raging(){
tl
.to(lEye, .3, {
delay: .3,
morphSVG: rgLEye,
strokeWidth: 3
}, "-=.3")
.to(rEye, .3, {
morphSVG: rgREye,
strokeWidth: 3
}, "-=.3")
.to(mouth, .3, {
morphSVG: rgMouth
}, "-=.3")
.to([lEye, rEye, mouth], .3, {
y: "-15px"
})
.to([lEye, rEye, mouth], .3, {
delay: .6,
y: "15px"
})
.to([lEye, rEye, mouth], .3, {
y: "0"
}, "-=.15")
.to(lEye, .3, {
morphSVG: {
shape: stLEye,
shapeIndex: 0
},
strokeWidth: 5
})
.to(rEye, .3, {
morphSVG: stREye,
strokeWidth: 5
}, "-=.3")
.to([lEye, rEye], .15, {
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
}
// happy
function happy(){
tl
.to(lEye, .3, {
morphSVG: wkLEye,
strokeWidth: 3
})
.to(rEye, .3, {
morphSVG: wkREye,
strokeWidth: 3
}, "-=.3")
.to(mouth, .3, {
morphSVG: smMouth3
}, "-=.3")
.to([lEye, rEye, mouth], .3, {
delay: .6,
x: "-5px"
})
.to(lEye, .3, {
morphSVG: hgLEye,
strokeWidth: 5
}, "-=.3")
.to(lEye, .15, {
delay: .6,
scaleY: 0, transformOrigin: "center center",
})
.to(lEye, .15, {
scaleY: 1
})
.to(hpLove, .3, {
opacity: 1,
x: "-7.5px"
}, "-=.3")
.to(hpLove, .3, {
opacity: 0,
y: "-7.5px"
}, "-=.15")
.to(lEye, .3, {
delay: .6,
morphSVG: wkLEye,
strokeWidth: 3
}, "-=.3")
.to([lEye, rEye, mouth], .3, {
delay: .6,
x: "0px",
})
.set(hpLove, {
x: "0px",
y: "0px"
})
}
// smAnim
function smAnim(){
tl
.to(rEye, .3, {
delay: .6,
morphSVG: hgREye,
strokeWidth: 5
})
.to(lEye, .3, {
morphSVG: hgLEye,
strokeWidth: 5
}, "-=.3")
.to(mouth, .3, {
morphSVG: smMouth1
}, "-=.3")
.to([lEye, rEye], .15, {
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
.to([lEye, rEye], .15, {
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
}
// wink
function wink(){
tl
.to(lEye, .3, {
morphSVG: hgLEye,
strokeWidth: 5
})
.to(rEye, .3, {
morphSVG: wkREye,
strokeWidth: 3
}, "-=.3")
.to(mouth, .3, {
morphSVG: smMouth1
}, "-=.3")
.to(mouth, .3, {
morphSVG: smMouth2
}, "-=.3")
}
// standardAnim
function standardAnim(){
tl
.to([lEye, rEye], .15, {
delay: .6,
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
.to([lEye, rEye], .15, {
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
.to([lEye, rEye, mouth], .3, {
x: "-5px"
})
.to([lEye, rEye], .15, {
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
.to([lEye, rEye, mouth], .3, {
x: "10px"
})
.to([lEye, rEye], .15, {
scaleY: 0, transformOrigin: "center center",
})
.to([lEye, rEye], .15, {
scaleY: 1
})
.to([lEye, rEye, mouth], .3, {
x: "0px"
})
}
// standard
function standard(){
tl
.to(lEye, .3, {
morphSVG: stLEye,
strokeWidth: 5
})
.to(rEye, .3, {
morphSVG: stREye,
strokeWidth: 5
}, "-=.3")
.to(mouth, .3, {
morphSVG: stMouth
}, "-=.3")
}
standardAnim();
button.on("click", function(){
var className = $(this).text();
mainCtr.attr("class", className);
$(this).addClass("active").siblings().removeClass("active");
if(mainCtr.hasClass("standard")) {
standard();
standardAnim();
}
if(mainCtr.hasClass("wink")) {
wink();
smAnim();
}
if(mainCtr.hasClass("happy")) {
happy();
smAnim();
}
if(mainCtr.hasClass("rage")) {
raging();
}
});
});
External CSS
This Pen doesn't use any external CSS resources.