Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="veil-1"></div>
<div class="veil-2"></div>
<div class="veil-3"></div>
<div class="veil-4"></div>
<div class="veil-5"></div>
<div class="veil-6"></div>
<div class="veil-7"></div>
<div class="veil-8"></div>
<div class="veil-9"></div>
<div class="veil-10"></div>
<div class="veil-11"></div>
<div class="veil-12"></div>
<div class="veil-13"></div>

<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>
<div class="face-6"></div>
<div class="face-7"></div>

<div class="brow-left-1"></div>
<div class="brow-left-2"></div>

<div class="eye-left-1"></div>
<div class="eye-left-2"></div>
<div class="eye-left-3"></div>

<div class="brow-right-1"></div>
<div class="brow-right-2"></div>

<div class="eye-right-1"></div>
<div class="eye-right-2"></div>
<div class="eye-right-3"></div>

<div class="nose-1"></div>
<div class="nose-2"></div>
<div class="nose-3"></div>
<div class="nose-4"></div>

<div class="mouth-1"></div>
<div class="mouth-2"></div>
<div class="mouth-3"></div>
<div class="mouth-4"></div>
<div class="mouth-5"></div>
<div class="mouth-6"></div>
<div class="mouth-7"></div>
              
            
!

CSS

              
                // colors
$bg-color: #fff;
$portrait-color: #000;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &::before,
    &::after {
      content: "";
      position: absolute;
    }
  }
}

.veil {
  &-1 {
    width: 43vmin;
    height: 40vmin;
    background: $portrait-color;
    top: 15vmin;
    left: -7vmin;
    border-radius: 0 0 0 30vmin;
    transform: rotate(58deg);

    &::before {
      width: 25vmin;
      height: 40vmin;
      background: $bg-color;
      top: -2vmin;
      left: 24.8vmin;
      border-radius: 0 0 0 20vmin;
      transform: rotate(16deg);
    }
  }

  &-2 {
    width: 20vmin;
    height: 25vmin;
    background: $portrait-color;
    top: 33.8vmin;
    left: 4vmin;
    border-radius: 0 0 0 20vmin;
    transform: rotate(81deg);

    &::before {
      width: 15vmin;
      height: 31vmin;
      background: $bg-color;
      top: -7vmin;
      left: 10.5vmin;
      transform: rotate(-30deg);
    }

    &::after {
      width: 20vmin;
      height: 35vmin;
      background: $portrait-color;
      top: -16.5vmin;
      left: -21.7vmin;
      border-radius: 20vmin 0 0 0;
      transform: rotate(78deg);
    }
  }

  &-3 {
    width: 30vmin;
    height: 26vmin;
    background: $portrait-color;
    top: -38vmin;
    left: 6.1vmin;
    border-radius: 18vmin 0 0 28vmin;
    transform: rotate(77deg);

    &::before {
      width: 30vmin;
      height: 16vmin;
      background: $portrait-color;
      top: -3vmin;
      left: 1.2vmin;
      border-radius: 20vmin 20vmin 0 0;
      transform: rotate(11deg);
    }

    &::after {
      width: 27vmin;
      height: 23vmin;
      background: $portrait-color;
      top: -3vmin;
      left: 3vmin;
      border-radius: 18vmin 0 28vmin 5vmin;
      transform: rotate(11deg);
    }
  }

  &-4 {
    width: 20vmin;
    height: 12vmin;
    background: $bg-color;
    top: -33.8vmin;
    left: -10.2vmin;
    border-radius: 14vmin 0 0 30vmin;
    transform: rotate(59deg);

    &::before {
      width: 12vmin;
      height: 6vmin;
      background: $bg-color;
      top: 6.6vmin;
      left: 8.2vmin;
      border-radius: 0 0 0 5vmin;
    }
  }

  &-5 {
    width: 8vmin;
    height: 2vmin;
    background: $bg-color;
    top: -60vmin;
    left: -12.2vmin;
    transform: rotate(120deg);

    &::before {
      width: 5vmin;
      height: 2vmin;
      background: $bg-color;
      top: -0.5vmin;
      left: -0.2vmin;
      transform: rotate(12deg);
    }
  }

  &-6 {
    width: 20vmin;
    height: 11vmin;
    background: $portrait-color;
    top: -31.5vmin;
    left: -8.6vmin;
    border-radius: 70% 0 0 1000%;
    transform: rotate(54deg);

    &::before {
      width: 12vmin;
      height: 10vmin;
      background: $portrait-color;
      top: 3.2vmin;
      left: 6.2vmin;
      border-radius: 0 0 0 10vmin;
      transform: rotate(-3deg);
    }

    &::after {
      width: 10vmin;
      height: 14vmin;
      background: $portrait-color;
      top: -0.5vmin;
      left: 7vmin;
      border-radius: 0 0 0 50%;
      transform: rotate(-55deg);
    }
  }

  &-7 {
    width: 20vmin;
    height: 2.5vmin;
    background: $portrait-color;
    top: -38.8vmin;
    left: 1vmin;
    border-radius: 2vmin 0 0 0;
    transform: rotate(48deg);

    &::before {
      width: 6vmin;
      height: 1vmin;
      background: $portrait-color;
      top: -0.7vmin;
      transform: rotate(-2deg);
    }

    &::after {
      width: 5vmin;
      height: 5vmin;
      background: $portrait-color;
      top: 11vmin;
      left: 14vmin;
    }
  }

  &-8 {
    width: 29vmin;
    height: 12vmin;
    background: $bg-color;
    top: -30vmin;
    left: 22vmin;
    border-radius: 0 100% 0 0;
    transform: rotate(75deg);

    &::before {
      width: 16vmin;
      height: 10vmin;
      background: $portrait-color;
      top: 1.6vmin;
      left: 11.4vmin;
      border-radius: 0 100% 0 0;
      transform: rotate(-3deg) skewX(30deg);
    }

    &::after {
      width: 12vmin;
      height: 10vmin;
      background: $portrait-color;
      left: 4vmin;
      border-radius: 0 100% 0 0;
      transform: rotate(-26deg) skewX(20deg);
    }
  }

  &-9 {
    width: 17.5vmin;
    height: 12vmin;
    background: $portrait-color;
    top: -45.5vmin;
    left: 14.2vmin;
    border-radius: 0 100% 0 0;
    transform: rotate(58deg);

    &::before {
      width: 1.5vmin;
      height: 4.2vmin;
      background: $portrait-color;
      top: -3.5vmin;
      left: 4.1vmin;
      transform: rotate(15deg);
    }

    &::after {
      width: 8vmin;
      height: 3.5vmin;
      background: $portrait-color;
      top: -3.4vmin;
      left: 4vmin;
      transform: rotate(-5deg);
    }
  }

  &-10 {
    width: 7.5vmin;
    height: 2vmin;
    background: $portrait-color;
    top: -50vmin;
    left: 27.2vmin;
    transform: rotate(59deg);

    &::before {
      width: 7vmin;
      height: 1.5vmin;
      background: $portrait-color;
      top: 1vmin;
      left: 3.5vmin;
      transform: skewY(10deg);
    }

    &::after {
      width: 5vmin;
      height: 1.5vmin;
      background: $portrait-color;
      top: 1.85vmin;
      left: 7.5vmin;
      transform: skewY(10deg) rotate(10deg);
    }
  }

  &-11 {
    width: 13vmin;
    height: 5vmin;
    background: $portrait-color;
    top: -20vmin;
    left: 22.5vmin;
    border-top: 0.4vmin solid $bg-color;
    border-radius: 0 100% 0 0;
    transform: rotate(66deg) skewX(-10deg);

    &::before {
      width: 2.5vmin;
      height: 1.5vmin;
      background: $portrait-color;
      top: -1.8vmin;
      left: -0.2vmin;
      transform: rotate(-10deg);
    }

    &::after {
      width: 2.5vmin;
      height: 1.5vmin;
      background: $portrait-color;
      top: 3.1vmin;
      left: 11vmin;
      transform: rotate(10deg);
    }
  }

  &-12 {
    width: 12.5vmin;
    height: 10vmin;
    background: $portrait-color;
    top: 1.4vmin;
    left: 3.9vmin;
    border-bottom: 0.4vmin solid $bg-color;
    border-radius: 50%;
    transform: rotate(41deg);

    &::before {
      width: 1.5vmin;
      height: 1.5vmin;
      background: $portrait-color;
      top: 6.5vmin;
      left: -0.7vmin;
    }

    &::after {
      width: 1vmin;
      height: 1.7vmin;
      background: $portrait-color;
      top: 5.4vmin;
      left: 11.8vmin;
      transform: rotate(25deg);
    }
  }

  &-13 {
    width: 9vmin;
    height: 4vmin;
    background: transparent;
    top: 9.7vmin;
    left: 9vmin;
    border-bottom: 0.4vmin solid $bg-color;
    border-radius: 50%;
    transform: rotate(-12deg) skewX(5deg);
  }
}

.face {
  &-1 {
    width: 2.7vmin;
    height: 5vmin;
    background: $bg-color;
    top: -47.6vmin;
    left: -8.2vmin;
    border-radius: 1vmin 5vmin 0 0;

    &::before {
      width: 2.7vmin;
      height: 4.8vmin;
      background: $bg-color;
      top: 0.15vmin;
      left: -1.6vmin;
      border-radius: 100% 0.3vmin 0 0;
      transform: rotate(-5deg);
    }
  }

  &-2 {
    width: 6.5vmin;
    height: 4vmin;
    background: $portrait-color;
    top: -44.1vmin;
    left: -8.6vmin;
    border-radius: 35%;
    transform: rotate(-25deg);

    &::before {
      width: 6.5vmin;
      height: 4vmin;
      background: $bg-color;
      top: 0.5vmin;
      border-radius: 28%;
    }

    &::after {
      width: 1vmin;
      height: 4vmin;
      background: $portrait-color;
      left: 6.1vmin;
      transform: rotate(-10deg);
    }
  }

  &-3 {
    width: 4vmin;
    height: 6.4vmin;
    background: $bg-color;
    top: -38.2vmin;
    left: -11.7vmin;
    border-radius: 30% 0 0 0;
    transform: rotate(3deg);

    &::before {
      width: 8vmin;
      height: 25vmin;
      background: $bg-color;
      left: 7.1vmin;
      transform: rotate(-37deg);
    }

    &::after {
      width: 2vmin;
      height: 22vmin;
      background: $portrait-color;
      left: 14vmin;
      transform: rotate(-32deg);
    }
  }

  &-4 {
    width: 1vmin;
    height: 14vmin;
    background: $portrait-color;
    top: -13.4vmin;
    left: 16.2vmin;
    transform: rotate(-26deg);

    &::before {
      width: 7vmin;
      height: 4vmin;
      background: $portrait-color;
      top: 12vmin;
      left: -6.5vmin;
      border-radius: 5vmin 0 0 0;
    }

    &::after {
      width: 5vmin;
      height: 3vmin;
      background: $bg-color;
      top: 10.3vmin;
      left: -4.9vmin;
      border-radius: 0 0 1.2vmin 1vmin;
      transform: rotate(-17deg) skewX(-16deg);
    }
  }

  &-5 {
    width: 3vmin;
    height: 2vmin;
    background: $bg-color;
    top: 2.4vmin;
    left: 10.4vmin;
    border-radius: 0 0 0.1vmin 0;
    transform: rotate(-26deg);

    &::before {
      width: 7vmin;
      height: 5vmin;
      background: $bg-color;
      top: -2.9vmin;
      left: -5.1vmin;
      border-radius: 0 0 1.9vmin 3.4vmin;
    }

    &::after {
      width: 6vmin;
      height: 8vmin;
      background: $bg-color;
      top: -8vmin;
      left: -5.1vmin;
      border-radius: 0 0 0 2vmin;
    }
  }

  &-6 {
    width: 3vmin;
    height: 1.5vmin;
    background: $bg-color;
    top: -31.2vmin;
    left: -12.9vmin;
    border-radius: 0.3vmin 0 0 0;
    transform: skewX(7deg);

    &::before {
      width: 3vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: 1vmin;
      left: 0.2vmin;
      border-radius: 0.3vmin 0 0 0;
      transform: rotate(-7deg) skewX(4deg);
    }

    &::after {
      width: 6.5vmin;
      height: 10vmin;
      background: $bg-color;
      top: 2.5vmin;
      left: 0.5vmin;
      border-radius: 0 0 0 2.9vmin;
    }
  }

  &-7 {
    width: 10vmin;
    height: 14.5vmin;
    background: $bg-color;
    top: -15.6vmin;
    left: -3.5vmin;
    border-radius: 45%;
    transform: rotate(-20deg);

    &::before {
      width: 4vmin;
      height: 2vmin;
      background: $portrait-color;
      top: 18vmin;
      left: 13vmin;
    }

    &::after {
      width: 2vmin;
      height: 1vmin;
      background: $portrait-color;
      top: 18.9vmin;
      left: 9vmin;
      transform: rotate(-15deg);
    }
  }
}

.brow-left {
  &-1 {
    width: 4vmin;
    height: 1.5vmin;
    background: $portrait-color;
    top: -30.4vmin;
    left: -13vmin;
    border-radius: 0 100% 0 0;
    transform: rotate(10deg);

    &::before {
      width: 1.7vmin;
      height: 0.8vmin;
      background: $bg-color;
      top: 0.6vmin;
      left: 2.4vmin;
      border-radius: 0 100% 0 0;
    }

    &::after {
      width: 3.4vmin;
      height: 1.2vmin;
      background: $portrait-color;
      top: 0.25vmin;
      left: 0.2vmin;
      border-radius: 0 100% 0 0;
      transform: skewX(30deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 2.2vmin;
    height: 0.75vmin;
    background: $bg-color;
    top: -29.6vmin;
    left: -13.5vmin;
    border-radius: 0 100% 0 0;
    transform: rotate(10deg) skewX(15deg);

    &::before {
      width: 1.2vmin;
      height: 0.5vmin;
      background: $portrait-color;
      border-radius: 0 100% 0 0;
    }

    &::after {
      width: 1.4vmin;
      height: 0.5vmin;
      background: $bg-color;
      top: 0.1vmin;
      left: -0.08vmin;
      border-radius: 0 100% 0 0;
      transform: rotate(-10deg);
    }
  }
}

.eye-left {
  &-1 {
    width: 3.5vmin;
    height: 1.5vmin;
    background: transparent;
    top: -25.2vmin;
    left: -9.5vmin;
    border-top: 0.1vmin solid $portrait-color;
    border-radius: 50%;
    transform: rotate(35deg);

    &::before {
      width: 4.3vmin;
      height: 1.7vmin;
      background: $portrait-color;
      top: 0.5vmin;
      left: -0.6vmin;
      border-radius: 0 1.5vmin 0 0;
      transform: rotate(-20deg);
    }

    &::after {
      width: 0.9vmin;
      height: 0.8vmin;
      background: $bg-color;
      top: 1vmin;
      left: -0.9vmin;
      transform: rotate(35deg) skewX(-10deg);
    }
  }

  &-2 {
    width: 2.8vmin;
    height: 0.8vmin;
    background: $bg-color;
    top: -23.2vmin;
    left: -10.2vmin;
    border-radius: 0 1.5vmin 1vmin 2.5vmin;
    transform: rotate(20deg);

    &::before {
      width: 1.6vmin;
      height: 1vmin;
      background: $bg-color;
      top: -0.4vmin;
      left: 0.14vmin;
      border-radius: 0 0 0 1vmin;
      transform: rotate(-20deg);
    }

    &::after {
      width: 1vmin;
      height: 1.3vmin;
      background: $portrait-color;
      top: -0.7vmin;
      left: 1vmin;
      border-radius: 50% 0 0 50%;
      transform: rotate(-20deg);
    }
  }

  &-3 {
    width: 1vmin;
    height: 0.5vmin;
    background: $portrait-color;
    top: -23.2vmin;
    left: -8.1vmin;

    &::before {
      width: 0.5vmin;
      height: 1vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: 1.05vmin;
      border-radius: 0 100% 0 0;
      transform: rotate(42deg);
    }
  }
}

.brow-right {
  &-1 {
    width: 4.3vmin;
    height: 1.9vmin;
    background: $portrait-color;
    top: -30.8vmin;
    left: 2.8vmin;
    border-radius: 100% 0 0 0;

    &::before {
      width: 1.7vmin;
      height: 0.8vmin;
      background: $bg-color;
      top: 0.9vmin;
      left: -0.2vmin;
      border-radius: 100% 0 0 0;
      transform: rotate(-10deg);
    }

    &::after {
      width: 4.3vmin;
      height: 1.65vmin;
      background: $portrait-color;
      top: 0.2vmin;
      left: 0.4vmin;
      border-radius: 100% 0 0 0;
      transform: skewX(-15deg) rotate(0deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 1.5vmin;
    height: 0.7vmin;
    background: $bg-color;
    top: -29.6vmin;
    left: 2.1vmin;
    border-radius: 100% 0 0 0;

    &::before {
      width: 1.3vmin;
      height: 0.75vmin;
      background: $portrait-color;
      left: 0.3vmin;
      border-radius: 100% 0 0 0;
      transform: skewX(-5deg);
    }

    &::after {
      width: 3vmin;
      height: 0.75vmin;
      background: $bg-color;
      top: 0.05vmin;
      border-radius: 100% 0 0 0;
      transform: skewX(30deg) rotate(-1deg);
    }
  }
}

.eye-right {
  &-1 {
    width: 4vmin;
    height: 2vmin;
    background: transparent;
    top: -25.8vmin;
    left: 6.1vmin;
    border-top: 0.1vmin solid $portrait-color;
    border-radius: 50%;

    &::before {
      width: 4vmin;
      height: 1.9vmin;
      background: $portrait-color;
      top: 0.4vmin;
      border-radius: 50%;
      transform: rotate(-7deg);
    }

    &::after {
      width: 1.2vmin;
      height: 0.9vmin;
      background: $bg-color;
      top: 1.4vmin;
      left: 0.5vmin;
      border-radius: 50%;
      transform: rotate(-10deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 1.3vmin;
    height: 1.28vmin;
    background: $bg-color;
    top: -24.2vmin;
    left: 4.7vmin;
    border-radius: 0.8vmin 0 0 0;
    transform: rotate(-16deg) skewX(15deg);

    &::before {
      width: 1.1vmin;
      height: 1.55vmin;
      background: $portrait-color;
      top: -0.1vmin;
      left: 1.1vmin;
      border-radius: 50%;
      transform: skewX(-10deg);
    }
  }

  &-3 {
    z-index: 2;
    width: 1vmin;
    height: 0.6vmin;
    background: $portrait-color;
    top: -23.7vmin;
    left: 2.25vmin;
    border-radius: 100%;
    transform: rotate(-45deg);

    &::before {
      width: 0.6vmin;
      height: 0.4vmin;
      background: $portrait-color;
      top: -0.1vmin;
      left: 0.55vmin;
      transform: rotate(-15deg);
    }

    &::after {
      width: 0.3vmin;
      height: 0.3vmin;
      background: $portrait-color;
      top: 0.4vmin;
      left: 0.6vmin;
      transform: rotate(35deg);
    }
  }
}

.nose {
  &-1 {
    width: 5vmin;
    height: 2vmin;
    background: transparent;
    top: -23vmin;
    left: -7.7vmin;
    border-top: 0.19vmin solid $portrait-color;
    border-radius: 50%;
    transform: rotate(78deg);

    &::before {
      width: 3.5vmin;
      height: 1vmin;
      background: transparent;
      top: 0.72vmin;
      left: 3.5vmin;
      border-top: 0.19vmin solid $portrait-color;
      border-radius: 0.25vmin 0 0 0;
      transform: rotate(28deg);
    }

    &::after {
      width: 2.8vmin;
      height: 1vmin;
      background: transparent;
      top: 0.5vmin;
      left: 6.9vmin;
      border-bottom: 0.19vmin solid $portrait-color;
      border-radius: 50%;
      transform: rotate(-14deg);
    }
  }

  &-2 {
    width: 1.7vmin;
    height: 1.7vmin;
    background: transparent;
    top: -12.4vmin;
    left: -7.2vmin;
    border-radius: 50%;
    border-bottom: 0.19vmin solid $portrait-color;
    transform: rotate(68deg);
  }

  &-3 {
    width: 0.5vmin;
    height: 1.75vmin;
    background: $portrait-color;
    top: -10.5vmin;
    left: -1.4vmin;
    border-radius: 100% 0 0 0;
    transform: rotate(78deg);

    &::before {
      width: 0.5vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: -0.2vmin;
      transform: rotate(-10deg);
    }

    &::after {
      width: 0.6vmin;
      height: 1.4vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: 0.4vmin;
      border-radius: 50%;
      transform: rotate(-10deg);
    }
  }

  &-4 {
    width: 2vmin;
    height: 2vmin;
    background: transparent;
    top: -12.2vmin;
    left: 2vmin;
    border-top: 0.19vmin solid $portrait-color;
    border-radius: 40%;
    transform: rotate(73deg);

    &::before {
      width: 2.2vmin;
      height: 1vmin;
      background: transparent;
      left: -0.9vmin;
      border-top: 0.18vmin solid $portrait-color;
      border-radius: 0.3vmin 0.3vmin 0 0;
      transform: rotate(-25deg);
    }

    &::after {
      width: 1.8vmin;
      height: 1vmin;
      background: transparent;
      top: -0.3vmin;
      left: 0.6vmin;
      border-top: 0.18vmin solid $portrait-color;
      border-radius: 0.1vmin 0.1vmin 0 0;
      transform: rotate(-12deg);
    }
  }
}

.mouth {
  &-1 {
    width: 0.4vmin;
    height: 0.1vmin;
    background: transparent;
    top: -6.2vmin;
    left: -5.3vmin;
    transform: rotate(-5deg);

    &::before {
      width: 0.6vmin;
      height: 0.1vmin;
      background: $portrait-color;
      top: 0.1vmin;
      left: 0.2vmin;
      border-radius: 0.5vmin 0 0 0;
      transform: rotate(30deg);
    }

    &::after {
      width: 1.2vmin;
      height: 0.1vmin;
      background: $portrait-color;
      top: 0.2vmin;
      left: 1.3vmin;
      border-radius: 50%;
      transform: rotate(-10deg);
    }
  }

  &-2 {
    width: 2.4vmin;
    height: 0.1vmin;
    background: $portrait-color;
    top: -6vmin;
    left: 1.5vmin;
    border-radius: 50%;
    transform: rotate(8deg);

    &::before {
      width: 3vmin;
      height: 2vmin;
      background: $portrait-color;
      top: 1vmin;
      left: -2vmin;
      border-radius: 0 0 0 2vmin;
      transform: rotate(3deg);
    }
  }

  &-3 {
    width: 3.5vmin;
    height: 2.1vmin;
    background: $portrait-color;
    top: -2.3vmin;
    left: 2.9vmin;
    border-radius: 0 0 2vmin 0.4vmin;
    transform: rotate(-4deg);

    &::before {
      width: 1.1vmin;
      height: 0.8vmin;
      background: $portrait-color;
      top: -0.2vmin;
      left: 3.2vmin;
      border-radius: 0 0 1vmin 0;
    }

    &::after {
      width: 1.3vmin;
      height: 0.9vmin;
      background: $bg-color;
      left: 0.1vmin;
      border-radius: 0 0 0.3vmin 0.3vmin;
    }
  }

  &-4 {
    width: 1.1vmin;
    height: 1vmin;
    background: $bg-color;
    top: -3.4vmin;
    left: -1.5vmin;
    border-radius: 0 0 0.2vmin 0.3vmin;
    transform: skewY(10deg);

    &::before {
      width: 0.5vmin;
      height: 0.6vmin;
      background: $bg-color;
      left: -0.5vmin;
      border-radius: 0 0 0 0.3vmin;
      transform: skewY(15deg);
    }

    &::after {
      width: 1.1vmin;
      height: 0.8vmin;
      background: $bg-color;
      top: -0.5vmin;
      left: 2.2vmin;
      border-radius: 0 0 1vmin 0.4vmin;
      transform: skewY(-15deg);
    }
  }

  &-5 {
    width: 0.9vmin;
    height: 0.6vmin;
    background: $bg-color;
    top: -4.5vmin;
    left: 4.8vmin;
    border-radius: 0 0 1.2vmin 0.4vmin;
    transform: rotate(-5deg);

    &::before {
      width: 2.2vmin;
      height: 0.8vmin;
      background: $portrait-color;
      top: 1.6vmin;
      left: -2.6vmin;
      border-radius: 50%;
    }

    &::after {
      width: 1.6vmin;
      height: 0.5vmin;
      background: $bg-color;
      top: 0.3vmin;
      left: 1vmin;
      transform: rotate(-45deg);
    }
  }

  &-6 {
    width: 2.8vmin;
    height: 1.1vmin;
    background: $bg-color;
    top: -1.1vmin;
    left: -0.2vmin;
    border-radius: 0 0 0.8vmin 2.8vmin;
    transform: rotate(-5deg);

    &::before {
      width: 2.4vmin;
      height: 1.2vmin;
      background: $bg-color;
      top: -0.35vmin;
      left: 2.2vmin;
      border-radius: 0 0 2.8vmin 1.3vmin;
      transform: rotate(-20deg);
    }

    &::after {
      width: 1.5vmin;
      height: 0.6vmin;
      background: $bg-color;
      left: 3.5vmin;
      transform: rotate(-30deg);
    }
  }

  &-7 {
    width: 5.2vmin;
    height: 1vmin;
    background: transparent;
    top: -5.3vmin;
    left: 0.2vmin;
    border-bottom: 0.1vmin solid $portrait-color;
    border-radius: 50%;

    &::before {
      width: 0.6vmin;
      height: 0.4vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: 4.9vmin;
      border-radius: 0 0 50% 0;
      transform: rotate(-15deg);
    }
  }
}

              
            
!

JS

              
                // design source
// https://dribbble.com/shots/5950905-Veil-Logo
              
            
!
999px

Console