#12-Wiggly-Moustache.htm

<div class="d d1"></div>
<div class="d d2"></div>
<div class="d d3">
    <style>
        * {
            box-sizing: border-box
        }

        body {
            background: #F5D6B4
        }

        .d {
            width: 100;
            height: 50;
            border: 20px solid #D86F45;
            border-radius: 110px 110px 0 0;
            border-bottom: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -100%)
        }

        .d1::after,
        .d3:after {
            content: " ";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #D86F45;
            position: absolute;
        }

        .d1::after {
            left: 60px;
            top: 20px;
        }

        .d3::after {
            top: 20;
            left: -20
        }

        .d1 {
            left: 70;
            transform: rotate(180deg)
        }

        .d3 {
            transform: rotate(180deg);
            left: 230
        }