<div class="logo">
	<div class="icon-1"></div>
	<div class="icon-2"></div>
	<div class="icon-3"></div>
	<div class="icon-4"></div>
	<div class="box-1"></div>
	<div class="box-2"></div>
	<div class="box-3"></div>
	<div class="box-4"></div>
	<div class="box-5"></div>

	<div class="letter-r"></div>
	<div class="letter-a"></div>
	<div class="letter-i"></div>
	<div class="letter-l"></div>
	<div class="letter-s-1"></div>
	<div class="letter-s-2"></div>
</div>
// colors
$bg-color: #cc0000;
$logo-color: #fff;

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: 84vmin;
  height: 28.8vmin;
  overflow: hidden;

  .icon {
    &-1 {
      width: 45vmin;
      height: 60vmin;
      top: 35vmin;
      left: -30vmin;
      background: $logo-color;
      border-radius: 50%;

      &::before {
        width: 30vmin;
        height: 30vmin;
        background: $logo-color;
        left: -3.6vmin;
        top: 5vmin;
        border-radius: 50%;
        transform: rotate(-25deg) skewX(-35deg);
      }

      &::after {
        z-index: 2;
        width: 18vmin;
        height: 18vmin;
        background: $logo-color;
        left: 26vmin;
        top: -0.4vmin;
        border-top-right-radius: 100%;
        transform: rotate(-23.2deg) skewY(25deg);
      }
    }

    &-2 {
      z-index: 1;
      width: 10vmin;
      height: 1vmin;
      background: $bg-color;
      top: -24.8vmin;
      left: -26vmin;
      transform: rotate(12deg);
    }

    &-3 {
      z-index: 2;
      width: 30vmin;
      height: 30vmin;
      background: $bg-color;
      border-radius: 50%;
      top: 14.8vmin;
      left: -17.2vmin;

      &::before {
        width: 15vmin;
        height: 15vmin;
        background: $bg-color;
        border-radius: 50%;
        top: 11vmin;
        left: -2.7vmin;
        transform: rotate(30deg) skewY(40deg);
      }

      &::after {
        width: 18vmin;
        height: 18vmin;
        background: $bg-color;
        left: 21.5vmin;
        top: 3.8vmin;
        border-top-right-radius: 100%;
        transform: rotate(-7deg) skewY(25deg);
      }
    }

    &-4 {
      z-index: 2;
      width: 8vmin;
      height: 10vmin;
      left: 15.5vmin;
      top: 2vmin;
      background: $bg-color;
      transform: rotate(46deg);
      box-shadow: 6vmin 8.5vmin 0 0.1vmin $bg-color;
    }
  }

  .box {
    &-1 {
      z-index: 2;
      width: 2.5vmin;
      height: 2.5vmin;
      background: $logo-color;
      left: -42.7vmin;
      top: 24vmin;
      transform: skewX(3deg) skewY(20deg);

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

      &::after {
        width: 2.5vmin;
        height: 2.7vmin;
        background: $logo-color;
        left: -17.9vmin;
        top: -0.4vmin;
        transform: skewY(-22deg) rotate(25deg);
      }
    }

    &-2 {
      z-index: 2;
      width: 1.8vmin;
      height: 2.7vmin;
      background: $logo-color;
      left: -42.6vmin;
      top: 8.9vmin;
      transform: skewY(25deg) rotate(15deg);

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

    &-3 {
      z-index: 2;
      width: 2.1vmin;
      height: 2.2vmin;
      background: $logo-color;
      left: -66.1vmin;
      top: -9.4vmin;
      transform: rotate(40deg) skewX(-1deg);

      &::before {
        width: 1.8vmin;
        height: 1.8vmin;
        background: $logo-color;
        top: -10vmin;
        left: 1.9vmin;
        transform: rotate(18deg);
      }

      &::after {
        width: 1.3vmin;
        height: 2vmin;
        background: $logo-color;
        left: 7.1vmin;
        top: -17.6vmin;
        transform: rotate(33deg) skewX(-15deg);
      }
    }

    &-4 {
      z-index: 2;
      width: 2.1vmin;
      height: 1.5vmin;
      background: $logo-color;
      top: -24.4vmin;
      left: -13vmin;
      transform: skewY(20deg) skewX(-1deg);

      &::before {
        width: 2.1vmin;
        height: 1.4vmin;
        background: $logo-color;
        top: 6.3vmin;
        left: 0.1vmin;
        transform: skewY(-15deg);
      }

      &::after {
        width: 2vmin;
        height: 1.4vmin;
        background: $logo-color;
        top: 9.4vmin;
        left: -6.3vmin;
        transform: skewY(-14deg) rotate(-22deg);
      }
    }

    &-5 {
      z-index: 2;
      width: 1.9vmin;
      height: 1.7vmin;
      background: $logo-color;
      left: -36.6vmin;
      top: -3.3vmin;
      transform: rotate(-40deg) skewY(-10deg) skewX(-5deg);
    }
  }

  .letter {
    &-r {
      z-index: 3;
      width: 4vmin;
      height: 15vmin;
      background: $logo-color;
      left: -25.5vmin;
      top: 14.3vmin;

      &::before {
        width: 4.2vmin;
        height: 3.5vmin;
        background: $bg-color;
        left: 4vmin;
        top: 3.6vmin;
        border-top-right-radius: 1.3vmin;
        border-bottom-right-radius: 1.3vmin;
        box-shadow: 0.8vmin -0.2vmin 0 3.4vmin $logo-color;
      }

      &::after {
        width: 4.2vmin;
        height: 10vmin;
        background: $logo-color;
        left: 6.6vmin;
        top: 8vmin;
        transform: rotate(-44deg) skewY(20deg);
      }
    }

    &-a {
      z-index: 3;
      width: 11.8vmin;
      height: 15vmin;
      background: $logo-color;
      left: 11vmin;
      top: 14.2vmin;
      border-top-right-radius: 4vmin;
      border-top-left-radius: 3.7vmin;

      &::before {
        width: 3.8vmin;
        height: 4.5vmin;
        background: $bg-color;
        left: 4vmin;
        top: 3.5vmin;
        border-top-right-radius: 1vmin;
        border-top-left-radius: 1vmin;
      }

      &::after {
        width: 3.8vmin;
        height: 4vmin;
        background: $bg-color;
        top: 12.2vmin;
        left: 4vmin;
      }
    }

    &-i {
      z-index: 3;
      width: 4.2vmin;
      height: 15vmin;
      background: $logo-color;
      left: 30.5vmin;
      top: 14.3vmin;
    }

    &-l {
      z-index: 3;
      width: 4.2vmin;
      height: 15vmin;
      background: $logo-color;
      left: 42.4vmin;
      top: 14.3vmin;

      &::before {
        width: 9.9vmin;
        height: 4vmin;
        background: $logo-color;
        top: 11vmin;
      }
    }

    &-s {
      &-1 {
        z-index: 3;
        width: 10.3vmin;
        height: 9.1vmin;
        background: $logo-color;
        left: 70.6vmin;
        top: 8.5vmin;
        border-top-left-radius: 4vmin;
        border-bottom-left-radius: 4vmin;

        &::before {
          width: 3.5vmin;
          height: 4vmin;
          background: $bg-color;
          left: 7.1vmin;
          top: 5vmin;
        }

        &::after {
          height: 1.8vmin;
          width: 7.5vmin;
          background: $bg-color;
          left: 3.6vmin;
          top: 3.7vmin;
        }
      }

      &-2 {
        z-index: 3;
        width: 3.7vmin;
        height: 9.2vmin;
        left: 78.2vmin;
        top: 19.6vmin;
        background: $logo-color;
        border-top-right-radius: 3.7vmin;
        border-bottom-right-radius: 3.7vmin;

        &::before {
          width: 7vmin;
          height: 4vmin;
          background: $logo-color;
          top: 5.4vmin;
          left: -6.9vmin;
        }
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.