<div class="mug">
<div class="cup">
<div class="heading">
<h2>Owlymug</h2>
</div>
<div class="label">
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 206 190" style="enable-background:new 0 0 206 190;" xml:space="preserve">
<g class="Body">
<path class="st1" d="M52.7,177.6l-0.2-4.8c0-23.4,16.2-52.5,22.9-56.3c-11-3.7-13.6-13.3-13.6-13.3c-4.4-12.2,2-23.4,2-23.4
c-8.1-14.4,5.9-33.6,5.9-33.6c16.6-0.8,27,14.1,27,14.1s15.8-2.9,25.6,3.9c0,0,15.3-12.2,29.8-10.2c0,0,2.7-0.2,2.7,5
s0.6,4.6-0.9,17c-1.5,12.4-5.8,13.2-5.8,20.2c0,15.2-12.8,22-12.8,22c11.7,12.5,22.2,33.4,22.2,54.6v4.8c0,0-20.7,6.8-52.5,6.1
C65.7,182.8,52.6,177.6,52.7,177.6"/>
</g>
<g class="Belly">
<path class="st2" d="M141.2,181.2c4.3-6.2-3.9-62.9-37.9-62.9S62.8,174,67.6,181.2c0,0,23.2,2.8,36.7,2.6S141.2,181.2,141.2,181.2z
"/>
<path class="st3" d="M81.5,142.9c0,0,4.3,8,8.5,7.3c4.2-0.8,5.5-8.3,6.3-8.3s3.8,7.5,7.9,7.5s5.8-7.5,7-7.5c1.1,0,2.1,6.7,5.4,6.7
c3.3,0,6.5-6.7,6.5-6.7"/>
<path class="st3" d="M77.6,160.3c0,0,4.8,6.3,6.8,6.4c2,0.1,6.8-6.4,7.8-6.4s2.5,7.9,5.6,7.9c3.1,0,5.6-7.4,7.3-7.3
c1.7,0.1,4.8,7.3,6.7,7.3c1.9,0,5.6-7.9,7.5-7.9s5.4,6.4,8.2,5.8c2.8-0.6,5-7.9,5-7.9"/>
</g>
<g class="EarLeft">
<path class="st4" d="M84.4,64c0.4-1.2-5.3-6-11.3-5.5c-3.2,0.9-4,16.3-2.9,16.9s3.8-2.9,3.8-2.9s0.4-2.2-1.1-4.1
c0.8-0.9,3.1,2,3.8,1.3c0.6-0.7-3.1-6.2-1.6-7.1c1.8,4.9,4.9,4.6,4.9,4.6S84,65.3,84.4,64z"/>
</g>
<g class="EarRight">
<path class="st4" d="M131.5,68.7c0-2.4,13.7-7.2,15.7-4.5s0.1,19.7-2,20.3c-2.1,0.6-5-6.9-5-6.9s1.4-3.5,3.3-4.2
c-0.9-2.1-3.4,1.3-4.3,1c-1-0.3,2.8-3.9,1.9-5.1c-1.4,2.5-5.1,3.3-5.1,3.3S131.5,71.1,131.5,68.7z"/>
</g>
<g class="RightEye">
<ellipse class="st5" cx="123" cy="94.4" rx="16.2" ry="15.6"/>
<ellipse class="st6" cx="122.3" cy="93.3" rx="9.8" ry="9.9"/>
</g>
<g class="nose">
<path class="st6" d="M105.2,95.8c0.3-6-0.5-11-1.9-11.1c-1.4-0.1-2.8,4.7-3.2,10.8c-0.3,6,0.5,11,1.9,11.1S104.9,101.8,105.2,95.8z
"/>
</g>
<g class="LeftEye">
<ellipse class="st5" cx="83" cy="93.3" rx="16.2" ry="15.6"/>
<ellipse class="st6" cx="81.5" cy="91.3" rx="10.1" ry="9.7"/>
</g>
<g class="RightWing">
<path class="st7" d="M137.8,145.5c0,0,14.3,28.3,22.1,25.4c1.3-3.1,2.3-6,3-8.8c5.2-18.7,0.4-31.4-4.1-38.5
c-2.9-4.5-5.6-6.7-5.6-6.7s-13.6-7-19.6,1.8C127.7,127.5,137.8,145.5,137.8,145.5z"/>
<path class="st7" d="M144.5,123.4c4.5-2.6,14.3,0.2,14.3,0.2"/>
<path class="st7" d="M150.3,131.8c4.8-2.4,13.1,1.7,13.1,1.7"/>
<path class="st7" d="M153.4,140.9c4.8-2.7,11.6,1.3,11.6,1.3"/>
<path class="st7" d="M157.6,159.2c2.3-1.1,5.7,1.8,5.7,1.8"/>
<path class="st7" d="M165,150.9c0,0-4.6-2.9-9.4-0.7"/>
</g>
<g class="LeftWing">
<path class="st7" d="M68.7,144.4c0,0-18.3,24.3-25.2,20.3c-0.7-3.1-1.2-6-1.5-8.8c-1.9-18.4,4.7-29.6,10.2-35.6
c3.5-3.8,6.4-5.4,6.4-5.4s14.1-4.3,18.3,5S68.7,144.4,68.7,144.4z"/>
<path class="st7" d="M65.9,122.6c-3.9-3.2-13.7-2.2-13.7-2.2"/>
<path class="st7" d="M59,129.5c-4.2-3.1-12.7-0.6-12.7-0.6"/>
<path class="st7" d="M54.5,137.6c-4.1-3.3-11.2-0.7-11.2-0.7"/>
<path class="st7" d="M47.6,154.1c-2-1.4-5.7,0.8-5.7,0.8"/>
<path class="st7" d="M41.9,145.1c0,0,4.8-2,9.1,1"/>
</g>
<g class="stars">
<g class="star">
<path d="M12,12.3c0,0-0.1,4.2-3.9,4.6c3.8,0.3,3.9,4.3,3.9,4.3s0-4,4.4-4.4
C12.6,16.4,12,12.3,12,12.3z"/>
</g>
<g class="star">
<path d="M68.9,26.7c0,0-0.1,4.2-3.9,4.6c3.8,0.3,3.9,4.3,3.9,4.3s0-4,4.4-4.4
C69.5,30.8,68.9,26.7,68.9,26.7z"/>
</g>
<g class="star">
<path d="M155.8,22.1c0,0-0.1,4.2-3.9,4.6c3.8,0.3,3.9,4.3,3.9,4.3s0-4,4.4-4.4
C156.4,26.3,155.8,22.1,155.8,22.1z"/>
</g>
<g class="star">
<path d="M180.1,57c0,0-0.4,13.6-12.5,14.8c12.2,0.9,12.5,13.8,12.5,13.8s0-12.9,14.2-14.3
C182,70.4,180.1,57,180.1,57z"/>
</g>
<g class="star">
<path d="M189.6,18c0,0-0.2,7.6-7,8.3c6.8,0.5,7,7.7,7,7.7s0-7.2,7.9-8
C190.6,25.5,189.6,18,189.6,18z"/>
</g>
<g class="star">
<path d="M39.8,63.6c0,0-0.2,7.6-7,8.3c6.8,0.5,7,7.7,7,7.7s0-7.2,7.9-8
C40.9,71,39.8,63.6,39.8,63.6z"/>
</g>
<g class="star">
<path class="star" d="M114.7,33.2c0,0-0.2,7.6-7,8.3c6.8,0.5,7,7.7,7,7.7s0-7.2,7.9-8
C115.8,40.7,114.7,33.2,114.7,33.2z"/>
</g>
<g class="star">
<path d="M22.9,28.2c0,0-0.4,13.6-12.5,14.8c12.2,0.9,12.5,13.8,12.5,13.8s0-12.9,14.2-14.3
C24.7,41.5,22.9,28.2,22.9,28.2z"/>
</g>
</g>
</svg>
</div>
</div>
<div class="handle"></div>
</div>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
* {
box-sizing: border-box;
}
$color: rgb(240,240,240);
$size: 300px;
body {
display: flex;
background: #fff;
background-size: cover;
height: 100vh;
font-family: 'Open Sans';
}
.wrapper{
margin: 40px 20px;
}
.heading{
position: absolute;
top: -55px;
left: 40px;
}
h2 {
font-family: 'Montserrat', sans-serif;
font-weight: bold;
color: #f6ac78;
text-transform: uppercase;
}
.mug {
display: flex;
align-items: center;
margin: auto;
width: $size;
height: $size;
transform: rotateX(-4deg);
}
.cup {
background: {
color: $color;
image: linear-gradient(
90deg,
rgba(255,255,255,0),
lighten($color,1.067) 15%,
lighten($color,1.067) 25%,
rgba(255,255,255,0),
lighten($color,1.067) 75%,
lighten($color,1.067) 85%,
rgba(255,255,255,0)
),
linear-gradient(
rgba(255,255,255,0),
darken($color,0.98)
);
}
border-radius: #{$size / 2} / #{$size * 0.1667};
box-shadow: 0 0 ($size * 0.0139) ($size * 0.0028) darken($color,0.99) inset;
position: relative;
text-align: center;
width: $size * 0.7222;
height: $size;
&:before, &:after {
border-radius: 50%;
content: "";
display: block;
}
&:before {
background-image:
radial-gradient(
($size * 0.1) ($size * 0.1) at 20% -22%,
rgba(255,255,255,1) 80%,
rgba(255,255,255,0)
),
radial-gradient(
($size * 0.1) ($size * 0.1) at 80% -22%,
rgba(255,255,255,1) 80%,
rgba(255,255,255,0)
),
radial-gradient(
100% 100% at center bottom,
darken($color,0.85) 30%,
darken($color,0.98) 75%,
$color
);
box-shadow: 0 0 ($size * 0.0028) ($size * 0.0028) $color inset;
margin: ($size * 0.02) auto;
width: $size * 0.667;
height: $size * 0.2361;
}
&:after {
box-shadow: 0 0 ($size * 0.0333) ($size * 0.0222) rgb(216, 216, 216);
position: absolute;
bottom: 0;
width: 100%;
height: $size * 0.2667;
z-index: -1;
}
}
.label{
height: 200px;
padding-top: 6px;
background-color: rgba(252,206,165,1);
background: rgba(252,206,165,1);
background: linear-gradient(to bottom, rgba(252,206,165,1) 0%, rgba(252,206,165,1) 28%, rgba(246,148,83,1) 100%);
border-bottom-right-radius: 150px 50px;
border-bottom-left-radius: 150px 50px;
box-shadow: 0 0 5px 2px #eeeeee inset;
&:after{
content: "";
position: absolute;
top: 77px;
width: 100%;
height: 35px;
left: 0;
border-bottom-right-radius: 150px 50px;
border-bottom-left-radius: 150px 50px;
background: {
color: $color;
image: linear-gradient(
90deg,
rgba(255,255,255,0),
lighten($color,1.067) 15%,
lighten($color,1.067) 25%,
rgba(255,255,255,0),
lighten($color,1.067) 75%,
lighten($color,1.067) 85%,
rgba(255,255,255,0)
),
linear-gradient(
rgba(255,255,255,0),
darken($color,0.98)
);
}
}
}
.handle {
background: {
color: $color;
image: radial-gradient(($size * 0.07) ($size * 0.07) at 52% 19%, rgba(255,255,255,1) 70%, rgba(255,255,255,0));
};
border-radius: #{$size*0.1667} #{$size*0.5556} #{$size*0.5556} #{$size*0.1667} / #{$size*0.0278} #{$size*0.6111} #{$size*0.6111} #{$size*0.0278};
box-shadow: (-$size*0.0056) 0 ($size*0.0056) ($size*0.0056) rgb(255,255,255) inset;
width: $size * 0.2778;
height: $size * 0.6111;
&:before {
background: rgb(255,255,255);
border-radius: 30% 100% 100% 20% / 15% 50% 50% 20%;
box-shadow: 0 0 ($size*0.0278) ($size*0.0056) rgb(255,255,255), 0 0 ($size*0.025) ($size*0.05) (darken($color,0.95));
content: "";
display: block;
margin: 30% auto auto 0;
width: 70%;
height: 70%;
}
}
.blink{
animation: blink 2s linear;
transform-origin: 50% 50%;
}
.LeftWing {
animation: shake-left-wing 2s infinite;
transform-origin: 68% 22%;
}
.RightWing {
animation: shake-right-wing 2s infinite;
transform-origin: 34% 22%;
}
// =======fill-box-fix---
.LeftWing, .RightWing, .blink {
transform-box: fill-box;
}
// -------SVG styles--------
.st0{display:none;}
.st1{fill:#825F49;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st2{fill:#8C6239;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
.st4{fill:#8C6239;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st5{fill:#DDB663;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st6{stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.st7{fill:#825F49;stroke:#000000;stroke-width:2;stroke-miterlimit:10;}
.star{fill:#FEFEFE;}
// --------ANIMATIONS--------
@keyframes blink{
0% {
transform: scale(100%);
}
50% {
transform: scale(0);
}
100% {
transform: scale(100%);
}
}
@keyframes shake-left-wing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes shake-right-wing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(-100deg);
}
100% {
transform: rotate(0deg);
}
}
const stars = Array.prototype.slice.call(document.querySelectorAll(".star"));
setInterval(animateStar, 2000);
function animateStar(){
var randomStar = stars[Math.floor(Math.random() * stars.length)];
randomStar.classList.add("blink");
}
function removeClass(e){
this.classList.remove("blink");
}
for(var i=0; i< stars.length; i++) {
stars[i].addEventListener("animationend", removeClass);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.