htmlcssgraphical-logo

How to make Valve Portal's "Aperture Labs" logo using only HTML5/CSS3?

I am trying to recreate the following logo:

Here's what I've tried so far,

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

body {
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

#logo {
  width: 80vmin;
  height: 80vmin;
  background: linear-gradient( to top, #f60 0%, #f60 20%, #222 20%, #222 22%, transparent 22%, transparent 100%);
  border-radius: 50%;
  z-index: 10;
}

.seg {
  width: 80vmin;
  height: 80vmin;
  background: linear-gradient( to top, #f60 0%, #f60 20%, #ddd 20%, #ddd 22%, transparent 22%, transparent 100%);
  border-radius: 50%;
  border: solid #ddd 4px;
}

#seg2 {
  z-index: 12;
  transform: rotate(45deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg4 {
  z-index: 14;
  transform: rotate(135deg);
}

#seg5 {
  z-index: 15;
  transform: rotate(180deg);
}

#seg6 {
  z-index: 16;
  transform: rotate(225deg);
}

#seg7 {
  z-index: 17;
  transform: rotate(270deg);
}

#seg8 {
  z-index: 1;
  transform: rotate(315deg);
}

#seg9 {
  z-index: 8;
  transform: rotate(360deg);
}

#seg1 {
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  z-index: 999;
  background: conic-gradient( at 30% 80%, transparent 0%, transparent 25%, #f60 25%, #f60 50%, transparent 50%);
}
<div id="logo">
  <div class="seg" id="seg2"></div>
  <div class="seg" id="seg3"></div>
  <div class="seg" id="seg4"></div>
  <div class="seg" id="seg5"></div>
  <div class="seg" id="seg6"></div>
  <div class="seg" id="seg7"></div>
  <div class="seg" id="seg8"></div>
  <div class="seg" id="seg9"></div>
</div>

I made a circular div with class .seg and used linear-gradient to make the circular segments. Then I rotated these segments to create aperture but the last segment is the hurdle.

I then tried to used conic-gradient to cut off the corners of the segments on the left but this just forms an Octagon in the middle :(

Here's the code of 2nd Attempt:

html,
body,
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: absolute;
  overflow: hidden;
}

body {
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

#logo {
  width: 80vmin;
  height: 80vmin;
  border-radius: 50%;
  z-index: 10;
}

.seg {
  width: 80vmin;
  height: 80vmin;
  background: conic-gradient( at 30% 80%, transparent 0%, transparent 25%, #f60 25%, #f60 37.5%, transparent 37.5%);
  border-radius: 50%;
}

#seg2 {
  z-index: 12;
  transform: rotate(45deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg3 {
  z-index: 13;
  transform: rotate(90deg);
}

#seg4 {
  z-index: 14;
  transform: rotate(135deg);
}

#seg5 {
  z-index: 15;
  transform: rotate(180deg);
}

#seg6 {
  z-index: 16;
  transform: rotate(225deg);
}

#seg7 {
  z-index: 17;
  transform: rotate(270deg);
}

#seg8 {
  z-index: 1;
  transform: rotate(315deg);
}

#seg9 {
  z-index: 8;
  transform: rotate(360deg);
}
<div id="logo">
  <div class="seg" id="seg2"></div>
  <div class="seg" id="seg3"></div>
  <div class="seg" id="seg4"></div>
  <div class="seg" id="seg5"></div>
  <div class="seg" id="seg6"></div>
  <div class="seg" id="seg7"></div>
  <div class="seg" id="seg8"></div>
  <div class="seg" id="seg9"></div>
</div>

Solution

  • I make the 8 triangles as child one of other, so we don't need to apply a specific rotation and position to each one, as each is relative to it's parent.

    I also use :before pseudo element inside each <i>, so we don't need more elements on the html code and we can add extra transformation to the triangles without deform the logo.

    The size is relative to the #logo's font-size value, so change it and all is relative.

    I also put a closing animation when you hover it with the mouse.

    I don't need to hide pieces with other elements, so we can place it over anything and just works. (like the gradient that i put on this example.)

    body {
  margin: 0;
  padding: 0;
  background: linear-gradient(#0FF, #004);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
#logo {
  font-size: 10px;
  height: 20em;
  width: 20em;
  border-radius: 10em;
  position: relative;
  --triangle-size: 4em;
  --triangle-skew: 15deg;
  transition: 2s;
  overflow: hidden;
}
#logo:hover {
  transform: rotate(45deg);
  --triangle-skew: 45deg;
}
#logo i {
  position: absolute;
  transform: rotate(-45deg);
  top: 5.5em;
  left: .5em;
  transition: 2s;
}
#logo i::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border: var(--triangle-size) solid #000;
  border-right: var(--triangle-size) solid transparent;
  border-bottom: var(--triangle-size) solid transparent;
  transform: skew(calc(var(--triangle-skew)*-1), var(--triangle-skew));
  transition: 2s;
}
#logo > i {
  top: 9.5em;
  left: -0.5em;
}
    <div id="logo">
  <i ><i ><i ><i ><i ><i ><i ><i >
  </i></i></i></i></i></i></i></i>
</div>