2 863 Codepen

Фредди Меркьюри нарисованный на CSS

Вокалист рок-группы Queen Фредди Меркьюри, которого сделали на чистом CSS и HTML

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>
    <div class="filter"></div>
    <div class="light"></div>
    <div class="main">
      <div class="face">
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
        <div class="face-i"></div>
      </div>
      <div class="hair">
        <div class="hair-i"></div>
        <div class="hair-i"></div>
        <div class="hair-i"></div>
        <div class="hair-i"></div>
        <div class="hair-i"></div>
        <div class="hair-i"></div>
        <div class="hair-i"></div>
        <div class="hair-i"></div>
      </div>
      <div class="neck">
        <div class="neck-i"></div>
        <div class="neck-i"></div>
        <div class="neck-i"></div>
        <div class="neck-i"></div>
        <div class="neck-i"></div>
      </div>
      <div class="fc">
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
        <div class="fc-i"></div>
      </div>
      <div class="shirt">
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
        <div class="shirt-i"></div>
      </div>
      <div class="body">
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
        <div class="body-i"></div>
      </div>
      <div class="arm">
        <div class="arm-i"></div>
        <div class="arm-i"></div>
        <div class="arm-i"></div>
        <div class="arm-i"></div>
        <div class="arm-i"></div>
      </div>
      <div class="hand">
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
        <div class="hand-i"></div>
      </div>
      <div class="micro-a"></div>
      <div class="micro-b"></div>
    </div>
  </body>
</html>

SCSS

$white-1: #ECE8D6;
$white-2: #F0EDD8;

$blue-1: #1a156e;
$blue-2: #070437;

$pink-1: #E1006D;
$pink-2: #C30065;
$pink-3: #a70659;

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;

}
/* Generic */
body {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    background-image: linear-gradient(135deg, $blue-2, darken($blue-2, 20));
}

.main {
    position: relative;
    width: 60vw;
    height: 45vw;
}

.filter {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(110deg, darken($blue-2, 5) 32%, transparent 50%);
    z-index: 4000;
}

.light {
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    z-index: 2000;
    transform: skewX(20deg) translate(-30%);
    background-image: linear-gradient(to bottom, rgba($white-1, .15),rgba($white-1, .035), transparent);
    filter: blur(2vw);
    z-index: 5000;

    @media(max-width: 600px){
        left: 30vw;
        width: 70vw;
    }
}

.micro-a {
    position: absolute;
    top: 10.5vw;
    right: 27vw;
    height: 5vw;
    width: 5vw;
    border-radius: 50%;
    border-top: 0.2vw solid $white-1;
    background-image: linear-gradient(to bottom, $blue-2, darken($blue-2, 10));
    z-index: 50;
}

.micro-b {
    position: absolute;
    top: 12vw;
    right: 30vw;
    height: 2.8vw;
    width: 15vw;
    background-image: linear-gradient(-5deg, darken($blue-2, 10), $blue-2 3.3vw, $white-1 3.3vw,$white-1 3.5vw, transparent 3.5vw);
    border-top-left-radius: 1vw;
    border-bottom-left-radius: 1vw;
}

.face {
    position: absolute;
    right: 7vw;
    top: 6.5vw;
    width: 21vw;
    height: 17vw;
    z-index: 50;
    // display: none;
    &-i {
        position: absolute;
        transform-origin: bottom right;

        &:nth-of-type(1) {
            top: 0.1vw;
            right: 1.2vw;
            width: 4vw;
            height: 2.4vw;
            transform: skewX(55deg);
            background-image: linear-gradient(to bottom, $white-1 .6vw , $pink-1 .6vw);
            border-right: 0.3vw solid $pink-3;
            z-index: 100;
        }

        &:nth-of-type(2) {
            top: 2.4vw;
            right: -.2vw;
            width: 4.4vw;
            height: 1.6vw;
            transform: skewX(45deg);
            background-image: linear-gradient(45deg, $pink-2 .6vw , $pink-1 .6vw);
            border-right: 0.3vw solid $pink-3;
            z-index: 100;
        }

        &:nth-of-type(3) {
            top: 4vw;
            right: 0vw;
            width: 4.5vw;
            height: 1.6vw;
            transform: skewX(-10deg);
            background-color: $pink-2;
            border-right: 0.3vw solid $pink-3;
            z-index: 100;
        }

        &:nth-of-type(4) {
            top: 5.6vw;
            right: 6.3vw;
            width: 4.5vw;
            height: 9vw;
            transform: skewX(-35deg);
            overflow: hidden;
            background-color: $pink-1;
            z-index: 100;

            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                width: 80%;
                height: 100%;
                transform-origin: top right;
                transform: skewY(35deg);
                background-color: darken($pink-2, 5);
            }

            &::after {
                content: '';
                position: absolute;
                bottom: 20%;
                left: 10%;
                width: 30%;
                height: 100%;
                transform-origin: bottom right;
                transform: skewX(-20deg) skewY(-50deg);
                background-color: darken($pink-2, 5);
            }
        }

        &:nth-of-type(5) {
            top: 1.7vw;
            right: 9.6vw;
            width: 7vw;
            height: 12.9vw;
            transform: skewX(-30deg);
            overflow: hidden;
            background-color: $pink-1;

            &::before {
                content: '';
                position: absolute;
                bottom: 40%;
                right: -20%;
                width: 90%;
                height: 15%;
                transform-origin: top right;
                transform: skewX(-30deg);
                background-color: $pink-2;
            }
        }

        &:nth-of-type(6) {
            top: 0.1vw;
            right: 5.4vw;
            width: 4vw;
            height: 1vw;
            transform: skewX(-40deg);
            border-left: 0.8vw solid $white-1;
            background-image: linear-gradient(to bottom, $white-1 .6vw , $pink-1 .6vw);
        }

        &:nth-of-type(7) {
            top: 1vw;
            right: 8.3vw;
            width: 5.2vw;
            height: 1.5vw;
            transform: skewX(10deg);
            border-top-left-radius: 0.4vw;
            border-top: 0.15vw solid $white-1;
            border-left: 0.2vw solid $white-1;
            background-image: linear-gradient(-45deg, $pink-1 3vw , $white-1 3vw);
            z-index: 100;
        }

        &:nth-of-type(8) {
            top: 1vw;
            right: 15.4vw;
            width: 4vw;
            height: 11.8vw;
            transform: skewX(-30deg);
            border-top-left-radius: 0.4vw;
            background-color: $pink-1;
        }

        &:nth-of-type(9) {
            top: 12.2vw;
            right: 16.4vw;
            width: 4.1vw;
            height: 2.5vw;
            transform: skewY(30deg);
            border-top-left-radius: 0.4vw;
            background-image: linear-gradient(5deg, $white-1 10%, $pink-3 10%, $pink-3 20%, darken($pink-3, 5));
        }

        &:nth-of-type(10) {
            top: 10.4vw;
            right: 17.15vw;
            width: 3.5vw;
            height: 1.9vw;
            transform: skewX(20deg);
            border-top-left-radius: 1.1vw;
            border-bottom-left-radius: 0.2vw;
            background-image: linear-gradient(to right, $white-1 15%, $pink-3 15%);
        }

        &:nth-of-type(11) {
            top: 8.5vw;
            right: 16.93vw;
            width: 4vw;
            height: 1.6vw;
            transform: skewY(-20deg);
            border-top-left-radius: 0.4vw;
            background-color: $pink-1;
            border-top-right-radius: 0.5vw;
            background-image: linear-gradient(-30deg, $pink-1 40%, $white-1 40%);
        }

        &:nth-of-type(12) {
            top: 12.1vw;
            right: 12.3vw;
            width: 4.2vw;
            height: 2.5vw;
            transform: skewX(20deg);
            background-color: $pink-3;

            &::before {
                content: '';
                position: absolute;
                top: -1.6vw;
                height: 2.5vw;
                width: 5vw;
                background-color: $pink-1;
            }
        }

        &:nth-of-type(13) {
            top: 1vw;
            right: 5vw;
            width: 4vw;
            height: 1vw;
            background-color: $pink-1;
        }
    }
}

.hair {
    top: 5vw;
    right: 1.5vw;
    position: absolute;
    height: 21vw;
    width: 14vw;
    // display: none;
    &-i {
        position: absolute;
        transform-origin: bottom right;

        &:nth-of-type(1) {
            top: 1vw;
            right: 2.5vw;
            width: 5.1vw;
            height: 2.4vw;
            transform: skewX(55deg);
            border-bottom-right-radius: 0.5vw;
            background-color: $blue-2;
        }

        &:nth-of-type(2) {
            top: 3.4vw;
            right: 2vw;
            width: 3vw;
            height: 2.4vw;
            transform: skewX(45deg);
            background-color: $blue-2;
        }

        &:nth-of-type(3) {
            top: 0.3vw;
            right: -.9vw;
            width: 19vw;
            height: 17vw;
            transform: rotateZ(-11deg);
            border-top-left-radius: 5.5vw;
            border-top-right-radius: 5.5vw;
            border-bottom-right-radius: 7vw;
            border-bottom: 0.1vw solid darken($white-1, 10);
            background-image: linear-gradient(to bottom, $blue-2 60%, darken($blue-2, 5));
        }

        &:nth-of-type(4) {
            top: 0vw;
            right: 6vw;
            width: 5.2vw;
            height: 2vw;
            border-top-left-radius: 5vw;
            border-top-right-radius: 5vw;
            border-left: 0.7vw solid $white-1;
            border-top: 0.3vw solid $white-1;
            border-right: 0.3vw solid $blue-2;
            background-image: linear-gradient(to bottom, $blue-1 , $blue-2);
        }

        &:nth-of-type(5) {
            top: 1vw;
            right: 4vw;
            width: 3vw;
            height: 2vw;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            transform: skewX(20deg) skewY(20deg);
            border-left: 0.3vw solid transparent;
            border-top: 0.2vw solid $white-1;
            background-image: linear-gradient(to bottom, $blue-1 .5vw , $blue-2);
        }

        &:nth-of-type(6) {
            top: 6.7vw;
            right: 5.4vw;
            width: 5.5vw;
            height: 4vw;
            transform: skewX(-35deg);
            background-color: $blue-2;
            z-index: 200;
        }

        &:nth-of-type(7) {
            top: 8.8vw;
            right: 6vw;
            width: 3vw;
            height: 4vw;
            z-index: 300;
            transform: skewX(30deg);
            background-color: $blue-2;
        }

        &:nth-of-type(8) {
            top: 8.8vw;
            right: 8.9vw;
            width: 4vw;
            height: 2.2vw;
            transform: skewX(-35deg);
            background-color: $blue-2;
            z-index: 300;
        }
    }
}

.neck {
    position: absolute;
    top: 18.5vw;
    right: 15.1vw;
    width: 13.8vw;
    height: 7.5vw;
    z-index: 1;
    // display: none;
    &-i {
        position: absolute;
        transform-origin: bottom right;

        &:nth-of-type(1) {
            bottom: 0;
            right: 0.5vw;
            width: 10.5vw;
            height: 9vw;
            transform: skewX(-15deg);
            background-image: linear-gradient(to left, $white-1 .1vw, $pink-1 .1vw, darken($pink-3, 2) .1vw);
        }

        &:nth-of-type(2) {
            bottom: 0;
            left: 0;
            width: 10.5vw;
            height: 9vw;
            transform: skewX(-30deg);
            background-image: linear-gradient(to right, darken($pink-3, 5), $pink-3 55%, $pink-1 55%);
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                bottom: 0vw;
                left: 1vw;
                border-bottom: 4vw solid darken($pink-1, 1);
                border-top: 1vw solid transparent;
                border-left: 1.6vw solid transparent;
                border-right: 5vw solid transparent;
                z-index: 100;
            }

            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: -1.5vw;
                border-top: 9vw solid rgba($white-1, .8);
                border-bottom: 1vw solid transparent;
                border-left: 1.6vw solid transparent;
                border-right: 3vw solid transparent;
            }
        }
    }
}

.fc {
    position: absolute;
    right: 7vw;
    top: 6.5vw;
    width: 21vw;
    height: 17vw;
    z-index: 200;

    &-i {
        position: absolute;
        transform-origin: top left;

        &:nth-of-type(1) {
            top: 2.6vw;
            right: 6.6vw;
            border-top: 10vw solid $blue-2;
            border-bottom: 1vw solid transparent;
            border-left: 1vw solid transparent;
            border-right: 1vw solid transparent;
            transform: scale(.2) skewX(10deg) rotateZ(-40deg);
            z-index: 200;
        }

        &:nth-of-type(2) {
            top: 1.4vw;
            right: 7.1vw;
            width: 0.9vw;
            height: 0.9vw;
            transform: rotateZ(10deg);
            background-color: $blue-2;
            z-index: 200;
        }

        &:nth-of-type(3) {
            top: 1.6vw;
            right: 4.8vw;
            width: 2.3vw;
            height: 0.7vw;
            transform: rotateZ(40deg);
            background-image: linear-gradient(12deg, $blue-2 55%, transparent 55%);
            z-index: 200;
        }

        &:nth-of-type(4) {
            top: 3.3vw;
            right: 5.8vw;
            border-top: 1.5vw solid $blue-2;
            border-bottom: 1vw solid transparent;
            border-left: 0.2vw solid transparent;
            border-right: 0.2vw solid transparent;
            transform: rotateZ(-20deg);
            z-index: 200;
        }

        &:nth-of-type(5) {
            top: 2vw;
            right: 7.5vw;
            width: 1.6vw;
            height: 2vw;
            background-color: $pink-3;
            transform: skewX(40deg) skewY(0deg) rotateZ(30deg);
        }

        &:nth-of-type(6) {
            top: 3.5vw;
            right: 7vw;
            border-top: 3vw solid $pink-3;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(-50deg);
        }

        &:nth-of-type(7) {
            top: 3.8vw;
            right: 7vw;
            border-top: 2.6vw solid $pink-3;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(-30deg);
        }

        &:nth-of-type(8) {
            top: 2.5vw;
            right: 12.4vw;
            border-top: 2vw solid $pink-3;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(-65deg) skewY(-30deg);
        }

        &:nth-of-type(9) {
            top: 3.5vw;
            right: 10.4vw;
            border-top: 2vw solid $pink-3;
            border-bottom: 1vw solid transparent;
            border-left: 0.4vw solid transparent;
            border-right: 0.4vw solid transparent;
            transform: rotateZ(15deg) skewY(-40deg);
        }

        &:nth-of-type(10) {
            top: 3vw;
            right: 7.4vw;
            border-top: 2vw solid $pink-3;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(140deg);
        }

        &:nth-of-type(11) {
            top: 8.5vw;
            right: 10.8vw;
            border-top: 3vw solid $pink-2;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(55deg);
        }

        &:nth-of-type(12) {
            top: 0.6vw;
            right: 4vw;
            width: 4.2vw;
            height: 1vw;
            background-color: $pink-3;
            transform: skewX(-35deg);

            &::before {
                content: '';
                position: absolute;
                bottom: -.1vw;
                left: 0.9vw;
                height: 80%;
                width: 30%;
                background-color: $white-1;
                z-index: 200;
                transform: rotateZ(-20deg);
            }
        }

        &:nth-of-type(13) {
            top: 1.2vw;
            right: 7.8vw;
            width: 1vw;
            height: 2.5vw;
            background-color: $pink-3;
            transform: skewY(35deg);
        }
        /**/
        &:nth-of-type(14) {
            top: 6vw;
            right: 12vw;
            width: 1vw;
            height: 1vw;
            background-color: $blue-2;
            transform: skewY(-30deg) rotateZ(-25deg);
            z-index: 200;
        }

        &:nth-of-type(15) {
            top: 5.3vw;
            right: 12vw;
            width: 1.2vw;
            height: 1.2vw;
            background-color: $blue-2;
            transform: skewY(-30deg) rotateZ(-20deg);
            z-index: 200;
        }

        &:nth-of-type(16) {
            top: 4vw;
            right: 11.3vw;
            width: 1vw;
            height: 1.8vw;
            background-color: $blue-2;
            transform: skewY(20deg) rotateZ(50deg);
            z-index: 200;
        }

        &:nth-of-type(17) {
            top: 3.4vw;
            right: 12.6vw;
            width: 0.6vw;
            height: 1.5vw;
            background-color: $blue-2;
            transform: skewX(20deg) rotateZ(30deg);
            z-index: 200;
        }

        &:nth-of-type(18) {
            top: 2.5vw;
            right: 11vw;
            width: 3vw;
            height: 1.2vw;
            background-color: $blue-2;
            transform: skewX(-20deg) rotateZ(40deg);
            z-index: 200;
        }

        &:nth-of-type(19) {
            top: 2.4vw;
            right: 12.7vw;
            width: 1vw;
            height: 1.1vw;
            border-left: 0.2vw solid $white-1;
            transform: skewX(-30deg) rotateZ(59deg);
            background-image: linear-gradient(to right , $blue-1, $blue-2);
            border-top-left-radius: 50%;
            z-index: 200;
        }
        /**/
        &:nth-of-type(20) {
            top: 6.3vw;
            right: 12.2vw;
            width: 0.8vw;
            height: 0.8vw;
            transform: rotateZ(30deg) skewY(-10deg);
            background-color: $white-2;
            z-index: 100;
        }

        &:nth-of-type(21) {
            top: 5.6vw;
            right: 12.2vw;
            width: 0.8vw;
            height: 0.8vw;
            transform: rotateZ(60deg) skewY(-10deg);
            background-color: $white-2;
            z-index: 100;
        }

        &:nth-of-type(22) {
            top: 5.1vw;
            right: 12.4vw;
            width: 0.8vw;
            height: 1vw;
            transform: rotateZ(60deg) skewY(0deg);
            background-color: $white-2;
            z-index: 100;
        }

        &:nth-of-type(23) {
            top: 4.5vw;
            right: 12.6vw;
            width: 1vw;
            height: 1.2vw;
            transform: rotateZ(60deg) skewY(0deg);
            background-color: $white-2;
            z-index: 100;
        }

        &:nth-of-type(24) {
            top: 3.8vw;
            right: 12.5vw;
            width: 1vw;
            height: 2.5vw;
            transform: rotateZ(80deg) skewY(20deg);
            background-color: $white-2;
            z-index: 100;
        }
        /**/
        &:nth-of-type(25) {
            top: 5vw;
            right: 12vw;
            width: 3vw;
            height: 3.9vw;
            transform: skewX(-30deg);
            border-bottom-right-radius: 2vw;
            background-color: $pink-3;
            border-left: 0.2vw solid $white-1;
        }
        /**/
        &:nth-of-type(26) {
            top: 7.7vw;
            right: 15vw;
            width: 2vw;
            height: 0.5vw;
            transform: skewX(30deg);
            background-color: $white-2;
        }

        &:nth-of-type(27) {
            top: 7vw;
            right: 16.2vw;
            width: 1vw;
            height: 1vw;
            transform: skewX(40deg);
            background-color: $white-2;
            z-index: 100;
        }

        &:nth-of-type(28) {
            top: 7.2vw;
            right: 15.8vw;
            border-top: 1vw solid $white-2;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(180deg);
        }

        &:nth-of-type(29) {
            top: 7.2vw;
            right: 16.2vw;
            border-top: 1vw solid $white-2;
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(180deg);
        }

        &:nth-of-type(30) {
            top: 7.2vw;
            right: 16.2vw;
            height: 1.8vw;
            width: 1.8vw;
            background-color: $pink-3;
            border-top-left-radius: 50%;
            border-top-right-radius: 40%;
            border-bottom-left-radius: 40%;
            border-bottom-right-radius: 40%;
            transform: skewX(-10deg);
            border-left: 0.1vw solid $white-1;
            z-index: 200;

            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                height: 1vw;
                width: 1vw;
                background-color: $pink-3;
            }

            &::before {
                content: '';
                position: absolute;
                left: 0.3vw;
                bottom: -.3vw;
                height: 0.5vw;
                width: 0.9vw;
                background-color: $pink-3;
                transform: skewX(40deg);
                border-left: 0.1vw solid $white-1;
            }
        }

        &:nth-of-type(31) {
            top: 6.4vw;
            right: 13vw;
            width: 1vw;
            height: 0.5vw;
            background-color: $white-2;
            transform: rotateZ(50deg) skewY(5deg);
        }

        &:nth-of-type(32) {
            top: 5.8vw;
            right: 13.4vw;
            width: 1.1vw;
            height: 0.5vw;
            background-color: $white-2;
            transform: rotateZ(70deg) skewY(-20deg);
        }

        &:nth-of-type(33) {
            top: 6.3vw;
            right: 14.1vw;
            border-top: 0.7vw solid $white-2;
            border-bottom: 0.7vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(230deg);
        }

        &:nth-of-type(34) {
            top: 6vw;
            right: 14.4vw;
            border-top: 0.7vw solid $white-2;
            border-bottom: 0.7vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(230deg);
        }

        &:nth-of-type(35) {
            top: 4.8vw;
            right: 14.5vw;
            width: 1vw;
            height: 0.5vw;
            background-color: $white-2;
            transform: rotateZ(50deg) skewY(-10deg);
        }
        /**/
        &:nth-of-type(36) {
            top: 15vw;
            right: 11vw;
            border-top: 4vw solid $pink-3;
            border-bottom: 4vw solid transparent;
            border-left: 0.4vw solid transparent;
            border-right: 0.4vw solid transparent;
            transform: skewY(-30deg);
        }

        &:nth-of-type(37) {
            top: 7.7vw;
            right: -.9vw;
            width: 6.5vw;
            height: 2.1vw;
            background-image: linear-gradient(to top, $pink-1, $pink-2 50%, darken($pink-2,5));
            transform: skewY(-40deg) rotateZ(60deg);
            border-bottom-right-radius: 1vw;
        }

        &:nth-of-type(38) {
            top: 10.5vw;
            right: 3.1vw;
            width: 4vw;
            height: 2vw;
            background-image: linear-gradient(-40deg, transparent .9vw, $pink-1 .9vw);
            transform: rotateZ(25deg);
            border-bottom-right-radius: 2vw;

            &::before {
                content: '';
                position: absolute;
                left: 10%;
                bottom: 0.5vw;
                width: 80%;
                height: 2vw;
                background-image: linear-gradient(to bottom, $pink-1, $pink-2, darken($pink-2,5));
                border-top-left-radius: 1vw;
                border-bottom-right-radius: 2vw;
            }
        }
    }
}

.shirt {
    position: absolute;
    top: 22vw;
    right: 4vw;
    width: 43vw;
    height: 23vw;

    &-i {
        position: absolute;
        transform-origin: bottom right;

        &:nth-of-type(1) {
            top: 4.5vw;
            right: 3vw;
            width: 25vw;
            height: 10vw;
            transform: skewX(40deg);
            background-image: linear-gradient(40deg, $blue-2 10vw, darken($blue-2, 5) 17vw);
        }

        &:nth-of-type(2) {
            top: 14.5vw;
            right: -.1vw;
            width: 25vw;
            height: 8.5vw;
            transform: skewX(20deg);
            background-image: linear-gradient(to bottom, $blue-2 60%, darken($blue-2, 10) );
        }

        &:nth-of-type(3) {
            bottom: 0;
            left: 4vw;
            width: 25vw;
            height: 18.4vw;
            transform: skewX(-5deg);
            background-image: linear-gradient(to bottom, $blue-2 12vw, darken($blue-2, 10));
        }

        &:nth-of-type(4) {
            top: 1vw;
            left: 10vw;
            width: 21vw;
            height: 4vw;
            transform: skewX(-15deg);
            background-color: $blue-2;
        }

        &:nth-of-type(5) {
            top: -.2vw;
            left: 7.5vw;
            width: 5.8vw;
            height: 4vw;
            transform: skewX(-15deg) rotateZ(-15deg);
            background-image: linear-gradient(to bottom, $white-1 .75vw, $pink-2 .75vw);
            z-index: 100;
        }

        &:nth-of-type(6) {
            top: -.7vw;
            left: 3vw;
            width: 3.5vw;
            height: 12vw;
            transform: skewX(-25deg) rotateZ(30deg);
            background-image: linear-gradient(-18deg, $pink-2 10.55vw, $white-1 10.55vw, $white-1 11.4vw, transparent 11.4vw);
            border-bottom-left-radius: 50%;
            z-index: 100;

            &::before {
                content: '';
                position: absolute;
                top: 1.1vw;
                left: -.5vw;
                width: 2vw;
                height: 2vw;
                transform: rotateZ(-18deg);
                background-image: linear-gradient(to bottom, $white-1 .8vw, $pink-2 .8vw);
            }

            &::after {
                content: '';
                position: absolute;
                right: 0;
                bottom: -1.5vw;
                width: 1.1vw;
                height: 101%;
                background-color: $pink-3;
                border-top-left-radius: 50%;
                z-index: 200;
                transform: skewY(45deg);
            }
        }

        &:nth-of-type(7) {
            top: 0.3vw;
            left: 5.5vw;
            width: 3.2vw;
            height: 8.8vw;
            transform: skewX(-25deg) rotateZ(-15deg);
            border-bottom-right-radius: 50%;
            z-index: 100;
            background-image: linear-gradient(to bottom, $white-1 .8vw, $pink-2 .8vw);

            &::before {
                content: '';
                position: absolute;
                bottom: -1.75vw;
                left: 0;
                width: 1.5vw;
                height: 2vw;
                background-image: linear-gradient(130deg, $pink-2 1.5vw, transparent 1.5vw);
            }
        }

        &:nth-of-type(8) {
            bottom: 0;
            left: 2vw;
            width: 5vw;
            height: 10vw;
            transform: skewX(-15deg);
            background-color: darken($blue-2, 10);
            z-index: -1;
        }
    }
}

.body {
    position: absolute;
    top: 22vw;
    right: 4vw;
    width: 43vw;
    height: 23vw;

    &-i {
        position: absolute;
        transform-origin: bottom right;

        &:nth-of-type(1) {
            top: 0.5vw;
            right: 8.8vw;
            width: 8vw;
            height: 7vw;
            transform: rotateZ(-40deg);
            border-right: 0.1vw solid $white-1;
            background-color: $pink-3;

            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                width: 70%;
                height: 100%;
                background-image: linear-gradient(to bottom, $pink-1, $pink-2 , $pink-3 5.6vw);
            }
        }

        &:nth-of-type(2) {
            top: 5.2vw;
            right: 14.8vw;
            width: 11vw;
            height: 7.5vw;
            transform: rotateZ(-17deg);
            background-color: $pink-2;
            background-image: linear-gradient(to bottom, $pink-1, $pink-2 5.8vw, $pink-3 5.8vw);
        }

        &:nth-of-type(3) {
            top: 12.1vw;
            right: 25.2vw;
            width: 3.4vw;
            height: 3.8vw;
            transform: skewX(15deg);
            background-image: linear-gradient(to left, $pink-1 1.5vw, $pink-3 1.5vw);

            &::before {
                content: '';
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 1.6vw;
                background-color: $pink-3;
            }
        }

        &:nth-of-type(4) {
            top: 8.3vw;
            right: 26.2vw;
            width: 3.4vw;
            height: 3.8vw;
            transform: skewX(-15deg);
            background-image: linear-gradient(to left, $pink-1 1.5vw, $pink-3 1.5vw);
        }

        &:nth-of-type(5) {
            top: 0.85vw;
            right: 18.6vw;
            width: 10vw;
            height: 7.5vw;
            transform: skewX(-40deg);
            background-image: linear-gradient(80deg, $pink-3 1.8vw, $pink-1 1.8vw);
        }

        &:nth-of-type(6) {
            top: 5vw;
            right: 20vw;
            border-top: 4vw solid $pink-3;
            border-bottom: 4vw solid transparent;
            border-left: 1vw solid transparent;
            border-right: 1vw solid transparent;
            transform: skewY(40deg);
        }
        /**/
        &:nth-of-type(7) {
            top: 14.4vw;
            right: 3vw;
            width: 4vw;
            height: 4vw;
            transform: skewY(50deg);
            background-color: $pink-3;
        }

        &:nth-of-type(8) {
            top: 14.35vw;
            right: 0.2vw;
            width: 4vw;
            height: 7.8vw;
            background-color: $pink-3;
            transform: skewX(20deg);
        }

        &:nth-of-type(9) {
            top: 14.1vw;
            right: 4vw;
            width: 6vw;
            height: 8vw;
            transform: skewX(-5deg);
            background-image: linear-gradient(35deg, darken($pink-2, 5) 2vw, $pink-3 2vw);
        }

        &:nth-of-type(10) {
            top: 9.7vw;
            right: 6.9vw;
            width: 2.6vw;
            height: 4vw;
            transform: skewY(-50deg);
            background-color: $pink-3;

            &::before {
                content: '';
                position: absolute;
                width: 1vw;
                height: 1vw;
                bottom: -1vw;
                right: -.5vw;
                background-color: $pink-2;
            }
        }

        &:nth-of-type(11) {
            bottom: 0.8vw;
            right: 0;
            width: 6.5vw;
            height: 2vw;
            z-index: 200;
            transform: skewX(-20deg);
            background-image: linear-gradient(52deg, darken($blue-2, 5) 5.2vw, transparent 5.2vw);
        }

        &:nth-of-type(12) {
            top: -.2vw;
            left: 7.5vw;
            width: 5.8vw;
            height: 4vw;
            transform: skewX(-15deg) rotateZ(-15deg);
            background-color: $blue-2;
        }

        &:nth-of-type(13) {
            top: 1.1vw;
            left: 10.8vw;
            width: 5.8vw;
            height: 4vw;
            transform: skewX(-15deg) rotateZ(12deg);
            background-color: $blue-2;
        }
    }
}

.arm {
    position: absolute;
    bottom: 1vw;
    width: 30vw;
    height: 35vw;

    &-i {
        position: absolute;
        transform-origin: bottom right;

        &:nth-of-type(1) {
            top: 13.8vw;
            right: 7vw;
            width: 17vw;
            height: 8vw;
            border-bottom-right-radius: 50%;
            transform: rotateZ(-22deg);
            overflow: hidden;
            background-image: linear-gradient(50deg , darken($blue-2, 20), darken($blue-2, 15), darken($blue-2, 5) 9vw , $pink-2 9vw);
            border-top: 0.6vw solid $white-1;

            &::before {
                content: '';
                position: absolute;
                right: 2vw;
                top: 0.5vw;
                width: 8vw;
                height: 6vw;
                transform: rotateZ(25deg) skewX(-15deg);
                background-image: linear-gradient(to bottom, darken($pink-2, 10),darken($pink-2, 20));
            }

            &::after {
                content: '';
                position: absolute;
                right: 2vw;
                top: 1.25vw;
                width: 4vw;
                height: 2vw;
                transform: rotateZ(25deg) skewX(-15deg);
                background-image: linear-gradient(to bottom, darken($pink-2, 10),darken($pink-2, 20));
            }
        }

        &:nth-of-type(2) {
            top: 5vw;
            left: -3vw;
            width: 26vw;
            height: 9.5vw;
            transform: rotateZ(-45deg);
            border-top: 0.4vw solid $white-1;
            background-image: linear-gradient(-12deg, transparent 4vw, darken($pink-2, 20) 4vw, darken($pink-2, 10) 6vw);
            border-top-left-radius: 5vw;
            border-bottom-left-radius: 3vw;

            &::before {
                content: '';
                top: -.8vw;
                left: 75%;
                position: absolute;
                height: 6.8vw;
                width: 6vw;
                transform: skewX(20deg) rotateZ(-2deg);
                border-top: 0.4vw solid $white-1;
                background-image: linear-gradient(to bottom, darken($blue-2, 1), darken($blue-2, 10));
            }

            &::after {
                content: '';
                top: 0;
                left: 0;
                position: absolute;
                height: 105%;
                width: 9vw;
                border-bottom-right-radius: 4vw;
                border-top-left-radius: 5vw;
                border-bottom-left-radius: 3.5vw;
                background-image: linear-gradient(to right, darken($pink-2, 30), darken($pink-2, 10));
            }
        }

        &:nth-of-type(3) {
            top: 0vw;
            left: 9vw;
            transform: rotateZ(-140deg);
            border-top: 14vw solid darken($pink-3, 18);
            border-bottom: 1vw solid transparent;
            border-left: 0.8vw solid transparent;
            border-right: 0.8vw solid transparent;
            border-radius: 50%;

        }
    }
}

.hand {
    position: absolute;
    top: 9vw;
    left: 16.5vw;
    bottom: 1vw;
    width: 13vw;
    height: 11vw;

    &-i {
        position: absolute;
        transform-origin: top left;

        &:nth-of-type(1) {
            bottom: 0vw;
            left: 6vw;
            width: 5.2vw;
            height: 10vw;
            transform: rotateZ(40deg);
            background-color: darken($pink-2, 10);
            z-index: -1;
        }

        &:nth-of-type(2) {
            bottom: 1.2vw;
            left: 5vw;
            width: 3.2vw;
            height: 2vw;
            background-color: $pink-3;
        }

        &:nth-of-type(3) {
            bottom: 1vw;
            left: 7.1vw;
            width: 3.2vw;
            height: 2vw;
            transform: rotateZ(-30deg);
            background-color: $pink-3;
        }

        &:nth-of-type(4) {
            bottom: 2.1vw;
            left: 9.3vw;
            width: 3.2vw;
            height: 2vw;
            transform: rotateZ(-50deg);
            background-color: $pink-3;
        }

        &:nth-of-type(5) {
            top: 1vw;
            left: 10vw;
            width: 2.2vw;
            height: 3.5vw;
            transform: rotateZ(-15deg) skewX(15deg);
            border-top-right-radius: 40%;
            border-top-left-radius: 10%;
            border-bottom-left-radius: 30%;
            background-color: $pink-2;
            border-top: 0.15vw solid $white-1;
            overflow: hidden;
            z-index: 200;

            &::before {
                content: '';
                right: -5%;
                top: -5%;
                position: absolute;
                width: 40%;
                height: 110%;
                transform: rotateZ(-10deg);
                border-bottom-left-radius: 50%;
                background-color: $white-1;
            }

            &::after {
                content: '';
                left: 0;
                top: 0;
                position: absolute;
                width: 35%;
                height: 100%;
                transform: rotateZ(-10deg);
                border-top-right-radius: 50%;
                background-color: $pink-3;
            }
        }

        &:nth-of-type(6) {
            top: 0.5vw;
            left: 6.9vw;
            width: 2.8vw;
            height: 3.5vw;
            transform: rotateZ(-15deg) skewX(15deg);
            border-top-right-radius: 60%;
            border-top-left-radius: 0;
            background-color: $pink-2;
            border-top: 0.15vw solid $white-1;
            overflow: hidden;
            z-index: 201;

            &::before {
                content: '';
                right: -5%;
                top: -5%;
                position: absolute;
                width: 40%;
                height: 110%;
                transform: rotateZ(-10deg);
                border-bottom-left-radius: 50%;
                background-color: $white-1;
            }

            &::after {
                content: '';
                left: 0;
                top: 0;
                position: absolute;
                width: 35%;
                height: 100%;
                transform: rotateZ(-10deg);
                border-top-right-radius: 50%;
                background-color: $pink-3;
            }
        }

        &:nth-of-type(7) {
            top: 0.7vw;
            left: 4.8vw;
            width: 2.7vw;
            height: 3.5vw;
            transform: rotateZ(-15deg) skewX(15deg);
            border-top-right-radius: 70%;
            border-top-left-radius: 10%;
            background-color: $pink-2;
            border-top: 0.15vw solid $white-1;
            overflow: hidden;
            z-index: 202;

            &::before {
                content: '';
                right: -5%;
                top: -5%;
                position: absolute;
                width: 40%;
                height: 110%;
                transform: rotateZ(-10deg);
                border-bottom-left-radius: 50%;
                background-color: $white-1;
            }

            &::after {
                content: '';
                left: 0;
                top: 0;
                position: absolute;
                width: 35%;
                height: 100%;
                transform: rotateZ(-10deg);
                border-top-right-radius: 50%;
                background-color: $pink-3;
            }
        }

        &:nth-of-type(8) {
            top: 1vw;
            left: 3.3vw;
            width: 2.2vw;
            height: 3.5vw;
            transform: rotateZ(-15deg) skewX(15deg);
            border-top-right-radius: 70%;
            border-top-left-radius: 40%;
            background-color: $pink-2;
            z-index: 100;
            border-top: 0.3vw solid $white-1;
            border-left: 0.15vw solid transparent;
            overflow: hidden;
            z-index: 203;

            &::before {
                content: '';
                right: 0;
                top: 0;
                position: absolute;
                width: 40%;
                height: 100%;
                transform: rotateZ(-10deg);
                border-bottom-left-radius: 50%;
                background-color: $white-1;
            }
        }

        &:nth-of-type(9) {
            top: 0.8vw;
            left: 2vw;
            width: 5vw;
            height: 7.7vw;
            transform: skewX(-19deg);
            border-top-right-radius: 70%;
            border-top-left-radius: 20%;
            background-color: $pink-2;
            border-left: 0.4vw solid $white-1;
            border-top: 0.4vw solid $white-1;
        }

        &:nth-of-type(10) {
            top: 3vw;
            right: 1vw;
            width: 6vw;
            height: 5vw;
            border-bottom-right-radius: 40%;
            background-color: $pink-2;
        }
        /**/
        // &:nth-of-type(11) {
        //     top: 2.6vw;
        //     right: 1.4vw;
        //     border-top: 2vw solid darken($pink-2, 10);
        //     border-bottom: 1vw solid transparent;
        //     border-left: 0.25vw solid transparent;
        //     border-right: 0.25vw solid transparent;
        //     border-radius: 40%;
        //
        //     transform: rotateZ(15deg);
        //     z-index: 350;
        // }
        &:nth-of-type(12) {
            top: 5vw;
            right: 3vw;
            width: 6vw;
            height: 2vw;
            background-color: darken($pink-2, 10);
            transform: skewX(25deg);
        }

        &:nth-of-type(13) {
            bottom: 2vw;
            right: 3.1vw;
            border-top: 2vw solid darken($pink-2, 10);
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(-15deg);
        }

        &:nth-of-type(14) {
            bottom: 1.7vw;
            right: 7.6vw;
            border-top: 2vw solid darken($pink-2, 10);
            border-bottom: 1vw solid transparent;
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
            transform: rotateZ(-25deg);
        }

        &:nth-of-type(15) {
            bottom: 1.2vw;
            right: 7.4vw;
            border-top: 1vw solid transparent;
            border-bottom: 1.5vw solid darken($pink-2, 10);
            border-left: 0.3vw solid transparent;
            border-right: 0.3vw solid transparent;
        }

        &:nth-of-type(16) {
            bottom: 1.7vw;
            left: 1.35vw;
            border-top: 3vw solid darken($pink-2, 10);
            border-bottom: 1vw solid transparent;
            border-left: 0.6vw solid transparent;
            border-right: 0.6vw solid transparent;
            transform: rotateZ(5deg);
        }
        // &:nth-of-type(17) {
        //     top: 2.8vw;
        //     left: 8.7vw;
        //     border-top: 2vw solid darken($pink-2, 10);
        //     border-bottom: 1vw solid transparent;
        //     border-left: 0.25vw solid transparent;
        //     border-right: 0.25vw solid transparent;
        //     border-radius: 40%;
        //
        //     transform: rotateZ(-5deg);
        //     z-index: 350;
        //
        // }
        // &:nth-of-type(18) {
        //     top: 3vw;
        //     left: 6.25vw;
        //     border-top: 3vw solid darken($pink-2, 10);
        //     border-bottom: 1vw solid transparent;
        //     border-left: 0.25vw solid transparent;
        //     border-right: 0.25vw solid transparent;
        //     z-index: 350;
        //     border-radius: 40%;
        //
        //     transform: rotateZ(-5deg);
        // }
        &:nth-of-type(19) {
            top: 2.5vw;
            left: 3.5vw;
            width: 2.5vw;
            height: 2.5vw;
            background-color: darken($pink-2, 10);
            transform: rotateZ(45deg) skewX(10deg);
        }

        &:nth-of-type(20) {
            top: 3.8vw;
            right: -1.2vw;
            width: 2.4vw;
            height: 2.3vw;
            z-index: 300;
            transform: rotateZ(-10deg) skewX(-20deg);
            border-radius: 35%;
            border-top: 0.4vw solid $white-1;
            background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));
            border-bottom: 0.4vw solid darken($pink-2, 15);
        }

        &:nth-of-type(21) {
            top: 2.9vw;
            right: 1.3vw;
            width: 2.2vw;
            height: 3.5vw;
            z-index: 300;
            border-bottom: 0.4vw solid darken($pink-2, 10);
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 30%;
            border-top-right-radius: 30%;
            overflow: hidden;
            background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));

            &::before {
                content: '';
                right: -5%;
                top: -5%;
                position: absolute;
                width: 20%;
                height: 110%;
                transform: rotateZ(-15deg);
                border-bottom-left-radius: 50%;
                background-color: $white-1;
            }

            &::after {
                content: '';
                left: 0;
                top: 0;
                position: absolute;
                width: 25%;
                height: 100%;
                transform: rotateZ(-5deg);
                border-top-right-radius: 50%;
                background-color: $pink-3;
            }
        }

        &:nth-of-type(22) {
            top: 3vw;
            right: 3.8vw;
            width: 2.4vw;
            height: 3.5vw;
            z-index: 300;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 30%;
            border-top-right-radius: 10%;
            overflow: hidden;
            background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));

            &::before {
                content: '';
                right: -5%;
                top: -5%;
                position: absolute;
                width: 25%;
                height: 110%;
                transform: rotateZ(-5deg);
                border-bottom-left-radius: 50%;
                background-color: $white-1;
            }

            &::after {
                content: '';
                left: 0;
                top: 0;
                position: absolute;
                width: 32%;
                height: 100%;
                transform: rotateZ(5deg);
                border-top-right-radius: 50%;
                background-color: $pink-3;
            }
        }

        &:nth-of-type(23) {
            top: 3vw;
            right: 5.8vw;
            width: 2vw;
            height: 3.5vw;
            z-index: 300;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 30%;
            border-top-right-radius:20%;
            overflow: hidden;
            background-image: linear-gradient(to bottom, $pink-2, darken($pink-2, 15));

            &::before {
                content: '';
                right: -2%;
                top: -5%;
                position: absolute;
                width: 27%;
                height: 110%;
                transform: rotateZ(-10deg);
                border-bottom-left-radius: 30%;
                background-color: $white-1;
            }

            &::after {
                content: '';
                left: 0;
                top: 0;
                position: absolute;
                width: 25%;
                height: 100%;
                transform: rotateZ(-5deg);
                border-top-right-radius: 50%;
                background-color: $pink-3;
            }
        }
    }
}
Ссылки
https://codepen.io/ricardoolivaalonso/pen/zYvLYbY

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи

Мерцающая неоновая вывеска
Text / Codepen
Просто сфера на three.js
Codepen
Улитка на CSS
Codepen
Прелоадер летающие кометы
Codepen
Анимация лица распадающегося на осколки
Codepen