ada's smile face

dabblet.css

/**
 * ada's smile face
 */

.face {
    width: 300px;
    height: 300px;
    border-radius: 150px;
    background: #red;
    border: 2px solid #000;
    position: relative;
    margin: 30px auto;
}

.eye {
    width: 45px;
    height: 90px;
    border-radius: 45px / 25px;
    border: none;
    border-top: 2px solid #000;
    position: absolute;
    top: 100px;
}

.eye-left {
    left: 50px;
}

.eye-right {
    right: 50px;
}

.cheek {
    position: absolute;
    top: 125px;
    width: 300px;
    height: 50px;
}

.cheek-left {
    width: 60px;
    height: 30px;
    border-radius: 60px / 30px;
    background: #ffdab9;
    position: absolute;
    left: 22px;
    bottom: 0;
}

.cheek-right {
    width: 60px;
    height: 30px;
    border-radius: 60px / 30px;
    background: #ffdab9;
    position: absolute;
    right: 22px;
    bottom: 0;
}

.cheek-left,
.cheek-right,
.mouse {
    transition: all ease-in-out 1s;
}

.mouse {
    width: 150px;
    height: 75px;
    border-radius: 75px / 45px;
    border: none;
    border-bottom: 3px solid #000;
    
    position: absolute;
    left: 75px;
    bottom: 50px;
}

.face:hover .cheek-left,
.face:hover .cheek-right {
    width: 80px;
    height: 40px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.face:hover .mouse {
    border-radius: 75px / 65px;
}

dabblet.html

<div class="face">
    <div class="eye eye-left"></div>
    <div class="eye eye-right"></div>
    <div class="cheek">
        <div class="cheek-left"></div>
        <div class="cheek-right"></div>
    </div>
    <div class="mouse"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}