<div class="logo">
	<div class="letter-p"></div>
	<div class="letter-h"></div>
	<div class="letter-p letter-p-2"></div>

	<div class="icon-8-white">
		<div class="icon-8-white-1"></div>
		<div class="icon-8-white-2"></div>
		<div class="icon-8-white-3"></div>
		<div class="icon-8-white-4"></div>
	</div>
	<div class="icon-8-dark">
		<div class="icon-8-dark-1"></div>
		<div class="icon-8-dark-2"></div>
		<div class="icon-8-dark-3"></div>
		<div class="icon-8-dark-4"></div>
		<div class="icon-8-dark-5"></div>
		<div class="icon-8-dark-6"></div>
		<div class="icon-8-dark-7"></div>
	</div>
</div>
// colors
$bg-color: #505b93;
$logo-color: #fff;
$icon-dark-color: #0f0f0f;

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;
    }
  }
}

.logo {
  width: 85vmin;
  height: 32vmin;

  .letter {
    &-p {
      width: 5.1vmin;
      height: 23.2vmin;
      background: $logo-color;
      left: -72.5vmin;
      top: 6.8vmin;
      transform: skewX(-11deg);

      &::before {
        width: 19vmin;
        height: 17vmin;
        background: $logo-color;
        border-top-right-radius: 8vmin;
        border-bottom-right-radius: 8vmin;
      }

      &::after {
        width: 8.7vmin;
        height: 9.7vmin;
        background: $bg-color;
        left: 5vmin;
        top: 3.7vmin;
        border-top-right-radius: 4vmin;
        border-bottom-right-radius: 4.2vmin;
      }

      &-2 {
        left: 6vmin;
      }
    }

    &-h {
      width: 5.1vmin;
      height: 23.2vmin;
      background: $logo-color;
      left: -30.6vmin;
      top: -5.4vmin;
      transform: skewX(-11deg);

      &::before {
        width: 13vmin;
        height: 17vmin;
        left: 4.5vmin;
        top: 6.2vmin;
        background: $logo-color;
        border-top-right-radius: 5.5vmin;
      }

      &::after {
        width: 7.3vmin;
        height: 13.6vmin;
        left: 5.1vmin;
        top: 9.9vmin;
        background: $bg-color;
        border-top-right-radius: 2.3vmin;
      }
    }
  }

  .icon-8-white {
    z-index: 2;
    &-1 {
      width: 6vmin;
      height: 20vmin;
      background: $logo-color;
      left: 68.4vmin;
      top: -10.2vmin;
      transform: rotate(-20deg) skewX(-2deg);
      border-top-right-radius: 2.5vmin;
      border-top-left-radius: 5vmin;

      &::before {
        width: 5vmin;
        height: 7.2vmin;
        left: 3.3vmin;
        background: $logo-color;
        transform: skewX(6deg);
        border-top-right-radius: 3.5vmin;
        border-top-left-radius: 1vmin;
      }

      &::after {
        width: 2vmin;
        height: 4.5vmin;
        background: $bg-color;
        top: 3.3vmin;
        left: 6vmin;
        border-top-right-radius: 5vmin;
        border-top-left-radius: 1vmin;
        transform: skewX(20deg);
        box-shadow: -1.2vmin 1.3vmin 0 0.4vmin $bg-color;
      }
    }

    &-2 {
      z-index: 3;
      width: 2.5vmin;
      height: 10vmin;
      background: $bg-color;
      left: 70.6vmin;
      top: -14.8vmin;
      transform: rotate(-19deg);
      border-top-left-radius: 3vmin;
      border-top-right-radius: 0.3vmin;

      &::before {
        width: 2.5vmin;
        height: 10vmin;
        background: $bg-color;
        top: 0.5vmin;
        left: -0.4vmin;
        border-top-left-radius: 2vmin;
        transform: skewX(2deg) skewY(-22deg);
      }

      &::after {
        width: 3vmin;
        height: 12vmin;
        background: $bg-color;
        left: -6.3vmin;
        top: 2vmin;
        transform: rotate(-3deg);
      }
    }

    &-3 {
      width: 6vmin;
      height: 8vmin;
      background: $bg-color;
      left: 76.1vmin;
      top: 0.5vmin;
      transform: rotate(-22deg);

      &::before {
        width: 8.7vmin;
        height: 12.5vmin;
        left: -7.5vmin;
        top: 0.3vmin;
        background: $logo-color;
        transform: rotate(7deg);
        border-bottom-right-radius: 7vmin;
      }

      &::after {
        width: 8.7vmin;
        height: 12.2vmin;
        left: -9.9vmin;
        top: -0.4vmin;
        background: $bg-color;
        transform: rotate(-6deg) skewX(-5deg);
        border-bottom-right-radius: 7vmin;
      }
    }

    &-4 {
      width: 8.7vmin;
      height: 12vmin;
      background: $bg-color;
      left: 61.7vmin;
      top: 10.2vmin;
      transform: rotate(-27deg);
      border-bottom-right-radius: 7vmin;

      &::before {
        width: 2vmin;
        height: 3vmin;
        background: $bg-color;
        top: -2vmin;
        left: 14vmin;
      }
    }
  }

  .icon-8-dark {
    &-1 {
      z-index: 1;
      width: 12vmin;
      height: 12vmin;
      top: -16vmin;
      left: 70.5vmin;
      transform: rotate(-43deg) skewX(-9deg);
      background: $icon-dark-color;
      border-bottom-right-radius: 5vmin;

      &::before {
        width: 12vmin;
        height: 12vmin;
        background: $bg-color;
        top: -2.7vmin;
        left: -0.6vmin;
        border-bottom-right-radius: 5vmin;
      }

      &::after {
        width: 0.7vmin;
        height: 8vmin;
        background: $bg-color;
        top: -3vmin;
        left: 11.5vmin;
        transform: rotate(-7deg);
      }
    }

    &-2 {
      z-index: 2;
      width: 0.5vmin;
      height: 5vmin;
      left: 74vmin;
      top: -29.5vmin;
      background: $bg-color;
      transform: rotate(-30deg);
      box-shadow: 0.4vmin -2.7vmin 0 0.3vmin $bg-color;

      &::before {
        width: 2vmin;
        height: 1.5vmin;
        background: $icon-dark-color;
        left: -2.2vmin;
        top: 9.3vmin;
        transform: rotate(-40deg);
      }

      &::after {
        width: 3.4vmin;
        height: 6vmin;
        background: $icon-dark-color;
        top: 9.6vmin;
        left: -7vmin;
        transform: rotate(80deg);
      }
    }

    &-3 {
      width: 3vmin;
      height: 5vmin;
      z-index: 2;
      background: $bg-color;
      left: 80.5vmin;
      top: -3.8vmin;
      transform: rotate(33deg);

      &::before {
        width: 2vmin;
        height: 4vmin;
        top: 1vmin;
        left: -0.1vmin;
        background: $bg-color;
        transform: rotate(10deg);
      }

      &::after {
        width: 3.5vmin;
        height: 8vmin;
        background: $icon-dark-color;
        left: -5.5vmin;
        top: 5vmin;
        transform: rotate(20deg);
      }
    }

    &-4 {
      z-index: 2;
      width: 2vmin;
      height: 7vmin;
      background: $icon-dark-color;
      left: 62vmin;
      top: 0.3vmin;
      transform: rotate(60deg);
    }

    &-5 {
      z-index: 1;
      width: 14vmin;
      height: 14.5vmin;
      background: $icon-dark-color;
      left: 55.5vmin;
      top: 17vmin;
      transform: rotate(55deg);
      border-top-right-radius: 3vmin;
      border-top-left-radius: 6vmin;
      border-bottom-right-radius: 8.3vmin;
      border-bottom-left-radius: 7vmin;

      &::before {
        width: 7vmin;
        height: 7vmin;
        background: $bg-color;
        border-bottom-right-radius: 8vmin;
        border-bottom-left-radius: 8vmin;
        top: 2.5vmin;
        left: 5.4vmin;
      }

      &::after {
        width: 5vmin;
        height: 6vmin;
        background: $bg-color;
        top: -0.2vmin;
        left: 9.5vmin;
        border-top-right-radius: 5vmin;
        transform: rotate(55deg) skewX(28deg);
      }
    }

    &-6 {
      z-index: 1;
      width: 1vmin;
      height: 3vmin;
      background: $bg-color;
      left: 72vmin;
      top: 20.3vmin;
      transform: rotate(60deg);

      &::before {
        width: 1vmin;
        height: 5vmin;
        background: $bg-color;
        left: 1.2vmin;
        transform: rotate(-13deg);
      }
    }

    &-7 {
      z-index: 3;
      width: 5vmin;
      height: 4vmin;
      background: $bg-color;
      left: 59vmin;
      top: 12.3vmin;
      border-top-left-radius: 100%;
      transform: skewX(-30deg) rotate(-30deg);
      box-shadow: -2.2vmin -2.2vmin 0 0.3vmin $icon-dark-color;

      &::before {
        width: 5vmin;
        height: 4vmin;
        background: $icon-dark-color;
        top: -5.8vmin;
        left: -2.4vmin;
        border-top-left-radius: 100%;
        transform: skewX(-20deg) rotate(50deg);
      }

      &::after {
        width: 4vmin;
        height: 1vmin;
        top: -5.4vmin;
        left: -0.4vmin;
        background: $icon-dark-color;
        transform: rotate(-3deg);
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.