console
<body>
<div class="box">
<div class="logo"></div>
<div class="m">
<div class="triangle"></div>
<div class="logo-eye"></div>
</div>
<div class="head">
<div class="horn-left"></div>
<div class="horn-right"></div>
</div>
<div class="head-copy"></div>
<div class="mouth">
<div class="tongue"></div>
<div class="tooth1"></div>
<div class="tooth2"></div>
<div class="tooth3"></div>
<div class="tooth4"></div>
</div>
<div class="eye">
<div class="white"></div>
<div class="iris">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="pupil"></div>
</div>
</div>
</body>
@mixin pseudo {
content: '';
position: absolute;
}
@mixin size($w, $h) {
width: $w;
height: $h;
}
@mixin round($w, $h) {
width: $w;
height: $h;
border-radius: 50%;
}
$lightGreen: #B9E341;
$darkGreen: #6BAA1F;
body {
background: lightblue;
}
.box {
@include size(600px, 600px);
position: relative;
top: 50px;
margin: auto;
}
.logo {
@include round(200px, 200px);
border: 5px solid #1362D8;
position: absolute;
top: -5px;
left: -25px;
background: #fff;
}
.m {
position: absolute;
@include size(120px, 50px);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 90px solid #1362D8;
top: 0;
left: 0;
}
.triangle{
@include size(0,0);
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 26px solid white;
top: 50px;
left: 50px;
&:before{
@include pseudo;
@include size(0,0);
border-left: 16px solid transparent;
border-right: 1px solid transparent;
border-bottom: 24px solid white;
top:40px;
left: 20px;
}
&:after{
@include size(0,0);
@include pseudo;
border-left: 1px solid transparent;
border-right: 16px solid transparent;
border-bottom: 24px solid white;
top:40px;
right: 20px;
}
}
.logo-eye {
@include size(50px, 50px);
background: #fff;
border-radius: 100% 0;
transform: rotate(45deg);
position: absolute;
left: 35px;
top: 75px;
&:after {
@include pseudo;
@include round(20px, 20px);
background: #000;
top: 15px;
left: 15px;
}
}
.head {
@include size(260px, 290px);
background: $lightGreen;
background: radial-gradient(ellipse at center 20%, #b9e341 0%,#b9e341 25%,#6baa1f 100%);
border-radius:
50% 50% 50% 50% / 60% 60% 40% 40%;
position: relative;
left: 170px;
top: 100px;
}
.horn-left, .horn-right {
@include round(30px, 30px);
background: linear-gradient(to bottom, #040416 0%,#8F8457 41%,#d8c896 70%);
position: absolute;
&:after {
@include pseudo;
@include round(25px, 25px);
background: lightblue;
}
}
.horn-left {
transform: rotate(-20deg);
left: 50px;
top: 5px;
&:after {
left: 15px;
}
}
.horn-right {
transform: rotate(20deg);
right: 50px;
top: 5px;
&:after {
right: 15px;
}
}
.head-copy {
@include size(260px, 290px);
background: $lightGreen;
background: radial-gradient(ellipse at center 20%, #b9e341 0%,#b9e341 25%,#6baa1f 100%);
border-radius:
50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
left: 170px;
top: 100px;
}
.mouth {
@include size(80px, 50px);
background: #152206;
border-radius: 150px 150px 30px 30px;
position: absolute;
left: 260px;
top: 290px;
overflow: hidden;
.tongue {
@include round(80px, 30px);
background: linear-gradient( to top, #7C801F 0%, darken(#7C801F, 20%) 100%);
position: absolute;
top: 33px;
}
.tooth1, .tooth2, .tooth3, .tooth4 {
position: absolute;
background: #fff;
@include size(19px, 15px);
top: 42px;
border-radius: 190px 200px 10px 10px;
box-shadow: 1px 0px 1px black;
}
.tooth1 {
left: 0;
}
.tooth1 {
left: 20px;
}
.tooth3 {
left: 40px;
}
.tooth4 {
left: 60px;
}
}
.eye {
position: absolute;
@include round(105px, 105px);
background:$lightGreen;
top: 120px;
left: 247.5px;
box-shadow: inset 0px -2px 3px $darkGreen;
border-radius:
50% 50% 50% 50% / 60% 60% 40% 40%;
z-index:2;
&:before {
@include pseudo;
@include round(110px, 130px);
background:transparent;
left: -2.5px;
top: -15px;
box-shadow: inset 0px 7px 4px $darkGreen;
z-index:1;
}
&:after {
@include pseudo;
@include round(115px, 130px);
background:$lightGreen;
left: -5px;
top: -28px;
box-shadow: inset 0px 1px 8px $darkGreen;
}
}
.white {
@include size(100px, 100px);
border-radius:
50% 50% 50% 50% / 60% 60% 40% 40%;
background: radial-gradient(ellipse at right, #fefefd 0%,#ededed 33%,#ededed 56%,#9dba9c 100%);
position: absolute;
left: 2.5px;
box-shadow: 0px -1px 3px black;
z-index:2;
}
.iris {
@include round(50px, 50px);
background: #219A66;
position: absolute;
z-index:2;
top:32.5px;
left: 27.5px;
overflow: hidden;
.line {
position: absolute;
@include size(2px, 100%);
background: linear-gradient(to right, #219a66 0%,#2BC47A 50%,#219a66 100%);
opacity: .6;
left: 24px;
transform-origin: center;
}
div:nth-child(2){
transform: rotate(30deg);
}
div:nth-child(3){
transform: rotate(60deg);
}
div:nth-child(4){
transform: rotate(90deg);
}
div:nth-child(5){
transform: rotate(120deg);
}
div:nth-child(6){
transform: rotate(150deg);
}
&:after {
@include round(100%, 100%);
@include pseudo;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 70%,black 100%);
}
}
.pupil {
@include round(30px, 30px);
background: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 47%,rgba(33,154,102,1) 100%);
position: absolute;
z-index:2;
top: 42.5px;
left: 37.5px;
&:after {
@include pseudo;
@include round(10px, 10px);
background: #fff;
right: 0;
}
}