pig.less

@mainColor: #ffbfe8;
@borderColor: rgb(241, 149, 194);
@size: 6px;
.transform(@angle) {
    transform: rotate(@angle);
}
.border(@size,@color) {
    border: solid @size @color;
}
* {
    margin: 0;
    padding: 0;
}

div {
    position: absolute;
}

.sky {
    width: 512px;
    height: 500px;
    background-color: #91c3fe;
}
.greensward {
    top: 326px;
    width: 512px;
    height: 258px;
    background-color: #83d277;
    .grass-left {
        width: 6px;
        height: 20px;
        border-radius: 96% 58% 50% 141% e('/') 104% 107% 55% 84%;
        background-color: #6dbc63;
        .transform(7deg);
    }
    
    .grass-middle {
        top: 2px;
        left: 11px;
        width: 6px;
        height: 19px;
        border-radius: 96% 58% 50% 141% e('/') 104% 107% 55% 84%;
        background-color: #6dbc63;
    }
    
    .grass-right {
        top: 4px;
        left: 22px;
        width: 6px;
        height: 20px;
        border-radius: 96% 58% 50% 141% e('/') 104% 107% 55% 84%;
        background-color: #6dbc63;
        .transform(-2deg);
    }
    .g-left-top {
        top: 62px;
        left: 20px;
    }
    
    .g-left-bottom {
        top: 195px;
        left: 113px;
    }
    
    .g-right-top {
        top: 80px;
        left: 362px;
    }
    
    .g-right-bottom {
        top: 202px;
        left: 351px;
    }
}
.peppa {
    .head {
        .ear {
            width: 23px;
            height: 46px;
            .border(5px, @borderColor);
            border-radius: 100%;
            background-color: @mainColor;
        }
        
        .ear-left {
            top: 103px;
            left: 126px;
            .transform(-38deg);
        }
        
        .ear-right {
            top: 77px;
            left: 168px;
            .transform(-27deg);
        }
        .head-border-left-top {
            top: 104px;
            left: 117px;
            width: 227px;
            height: 168px;
            .border(@size,@borderColor);
            border-radius: 132px 166px 176px 100px e('/') 125px 74px 150px 101px;
            .transform(-30deg);
            background-color: @mainColor;
        }
        
        .head-border-right-bottom-cover {
            top: 107px;
            left: 252px;
            width: 114px;
            height: 180px;
            background-color: #91c3fe;
            .transform(64deg);
        }
        
        .head-border-left {
            top: 190px;
            left: 210px;
            width: 93px;
            height: 94px;
            .border(@size,@borderColor);
            .transform(-106deg);
            border-radius: 7% 1% 8% 73% e('/') 9% 1% 9% 75%;
            border-top: none;
            border-right: none;
            background-color: @mainColor;
        }
        
        .head-border-bottom {
            top: 157px;
            left: 260px;
            width: 76px;
            height: 4px;
            .border(@size,@borderColor);
            .transform(-39deg);
            border-radius: 0 0 50% 50% e('/') 0 0 100% 100%;
            border-top-color: transparent;
            background-color: @mainColor;
        }
        
        .head-border-middle {
            top: 154px;
            left: 187px;
            width: 124px;
            height: 55px;
            .transform(-38deg);
            background-color: @mainColor;
        }
        .eye-left {
            top: 135px;
            left: 184px;
        }
        .eye-right {
            top: 114px;
            left: 222px;
        }
        .eye-border {
            width: 32px;
            height: 32px;
            .border(@size,@borderColor);
            border-radius: 50%;
            box-sizing: border-box;
        }
        .eye-black {
            width: 11px;
            height: 11px;
            .border(@size,black);
            border-radius: 50%;
            box-sizing: border-box;
            top: 11px;
            left: 8px;
        }
        .eye-bg {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background-color: white;
            left: 4px;
            top: 4px;
        }
        .mouth {
            top: 230px;
            left: 200px;
            .transform(-24deg);
            .mouth-middle {
                width: 68px;
                height: 12px;
                .border(@size, #de589c);
                border-radius: 0% 0% 50% 50% e('/') 0% 0% 100% 100%;
                background-color: @mainColor;
                border-top: @borderColor;
            }
            
            .mouth-top {
                width: 90px;
                height: 34px;
                border-radius: 60% 0% 50% 50% e('/') 0% 0% 50% 50%;
                background-color: @mainColor;
                top: -24px;
                left: -5px;
            }
            .mouth-bottom {
                width: 68px;
                height: 34px;
                top: 1px;
                .border(@size, #de589c);
                border-radius: 0% 0% 50% 50% e('/') 0% 0% 85% 85%;
                background-color: #000;
            }
        }
        .nose {
            top: 96px;
            left: 269px;
            .nose-border {
                width: 58px;
                height: 43px;
                .border(@size, @borderColor);
                border-radius: 80% 60% 60% 80% e('/') 71%;
                .transform(47deg);
                background-color: @mainColor;
            }
            .nose-hole {
                .border(6.5px, #df76b4);
                border-radius: 50%;
            }
            .nose-hole-left {
                top: 23px;
                left: 19px;
            }
            .nose-hole-right {
                top: 18px;
                left: 36px;
            }
        }
        .blusher {
            width: 42px;
            height: 50px;
            top: 188px;
            left: 147px;
            border-radius: 50%;
            background-color: #ff95dd;
            .transform(-25deg);
        }
    }
    .body {
        width: 193px;
        height: 163px;
        top: 229px;
        left: 115px;
        border-radius: 55% 55% 5% 5% e('/') 108% 108% 5% 5%;
        background-color: #f9666e;
        .border(5px, #e34860);
    }
    .arm {
        width: 82px;
        height: 8px;
        border-radius: 100% 100% 100% 17% e('/') 100% 90% 16% 90%;
        background-color: @mainColor;
        .hand {
            height: 8px;
            border-radius: 100% 100% 100% 35% e('/') 100% 90% 16% 90%;
            background-color: @mainColor;
        }
        .hand-top-left {
            top: -6px;
            left: 4px;
            width: 26px;
            .transform(48deg);
        }
        .hand-bottom-left {
            top: 6px;
            left: 8px;
            width: 17px;
            .transform(-35deg);
        }
        .hand-top-right {
            top: 7px;
            left: 4px;
            width: 29px;
            .transform(143deg);
        }
        .hand-bottom-right {
            top: -8px;
            left: 9px;
            width: 17px;
            .transform(45deg);
        } 
    }
    .arm-left {
        top: 303px;
        left: 75px;
        .transform(-39deg);
    }
    .arm-right {
        top: 308px;
        left: 276px;
        .transform(218deg);
    }
    .shadow {
        top: 426px;
        left: 114px;
        width: 212px;
        height: 33px;
        border-radius: 50%;
        background-color: #68a460;
    }
    .leg {
        width: 10px;
        height: 55px;
        background-color: @mainColor;
    }
    
    .foot {
        top: 50px;
        left: -2px;
        width: 48px;
        height: 11px;
        border-radius: 187% 58% 50% 180% e('/') 123% 130% 100% 113%;
        background-color: #000;
    }
    
    .leg-left {
        top: 388px;
        left: 161px;
    }
    
    .leg-right {
        top: 388px;
        left: 246px;
    }
    .tail {
        background-color: @mainColor;
        top: 343px;
        left: 93px;
        .tail-left {
            top: 10px;
            left: -15px;
            width: 25px;
            height: 5px;
            .border(7px, @mainColor);
            .transform(-12deg);
            border-radius: 0 0 50% 50% e('/') 0 0 100% 100%;
            border-top-color: transparent;
        }
        
        .tail-middle {
            width: 9px;
            height: 11px;
            .border(8px, @mainColor);
            border-radius: 50%;
            top: -2px;
            left: -2px;
        }
        .tail-right {
            top: 19px;
            left: 8px;
            width: 19px;
            height: 8px;
            border-radius: 50% 50% 50% 50% e('/') 0% 0% 100% 100%;
            background-color: @mainColor;
            .transform(0deg);
        }
        .tail-circle {
            top: 9px;
            left: -17px;
            width: 7px;
            height: 8px;
            border-radius: 100%;
            background-color: @mainColor;
            .transform(-15deg);
        }
    }
}