blair919
3/5/2019 - 1:12 AM

Commodore Logo Original design sketch reproduction

Commodore Logo Original design sketch reproduction

Commodore Logo Original design sketch reproduction

A Pen by 2pxSolidBlack on CodePen.

License.

<section class="main">
  <div class="info">
    <p>DESIGNER<br>Chris Yaneff</p>
    <p>CONTRACTOR<br>Commodore</p>
    <p>DATE<br>1965</p>
  </div>
  
  <section class="logoBigContainer">
    <div class="below"></div>
    <div class="above"></div>
    <div class="lips"></div>
    <div class="diagonal"><i class="j"></i></div>    
  </section>
  
  <i class="hlE"><span></span></i>
  <i class="hlG"><span></span></i>
  <i class="hl10"><span></span></i>
  <i class="hlH"><span></span></i>
  <i class="vlC1"><span></span></i>
  <i class="vlC2"><span></span></i>
  <i class="vlD1"><span></span></i>
  <i class="vlD2"><span></span></i>
  <i class="vlB"><span></span></i>
  <i class="vlF"><span></span></i>
  <i class="vlI"><span></span></i>
  
  <div class="reference">
    <h2 class="reference__title">REFERENCE</h2>
    <div class="reference__col">
      <p>B = 0.034 x A</p>
      <p>C = 0.166 x A</p>
      <p>D = 0.30 x A</p>
    </div>
    <div class="reference__col">
      <p>E = 0.364 x A</p>
      <p>F = 0.52 x A</p>
      <p>G = 0.53 x A</p>
    </div>
    <div class="reference__col">
      <p>H = 0.636 x A</p>
      <p>I = 0.97 x A</p>
      <p>J = 90 &deg;</p>
    </div>
  </div>
  
  <div class="logoSmall">
    <div class="lips"></div>
  </div>
</setion>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,700");

$sand: #e7e7e7;
$mine: #303030;

$b: 2px solid $mine;

@mixin limitTo($value) {
  max-height: $value;
  max-width: $value;
}

@mixin colorize($bg: transparent, $fg: transparent) {
  background-color: $bg;
  color: $fg;
}

@mixin size($w, $h) {
  width: $w;
  height: $h;
}

@mixin pos($t: auto, $r: auto, $b: auto, $l: auto) {
  top: $t;
  right: $r;
  bottom: $b;
  left: $l;
  position: absolute;
}

@mixin circle($w, $h, $top, $left) {
  @include size($w, $h);
  @include pos($t: $top, $l: $left);
  border-radius: 100%;
}

@mixin show-pseudo {
  content: "";
  position: absolute;
}

@mixin line($x, $y, $l, $label, $labelPos, $dir: 'horizontal') {
  @include pos($t: $y, $l: $x);
  @include size($l, 2px);
  
  &:before,
  &:after {
    @include show-pseudo;
    @include size(2px, 8px);
    background-color: $mine;
  }
  
  &:before {
    @include pos($t: -3px, $l: -2px);
  }
    
  &:after {
    @include pos($t: -3px, $r: -2px);
  }
  
  > span:before {
    content: $label;
    font-size: 12px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    
    @if $labelPos == 'above' {
      top: -15px;
    } @elseif $labelPos == 'below' {
      top: 5px;
    }
  }
  
  @if $dir == 'vertical' {
    transform-origin: left center;
    transform: rotate(90deg);
    
    > span:before {
      transform: rotate(-90deg) translateY(-33%);
    }
  }
}

body, html {
  @include size(100%, 100%);
  @include colorize($sand, $mine);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

.main {
  @include limitTo(656px);
  border: $b;
  box-sizing: border-box; 
  flex: 0 0 80vw;
  height: 80vw;
  position: relative;
  background-color: $sand;
}

.logoBigContainer {
  @include size(55.2%, 54%);
  @include pos($t: 22%, $l: 22%);
  border: $b;
  overflow: hidden;
  
  &:before,
  &:after {
    @include show-pseudo;
    @include size(100%, 16.6%);
    @include pos($t: 30.6%, $l: 0);
    border-style: solid;
    border-color: $mine;
    border-width: 2px 0 2px 0;
    z-index: 9;
  }
  
  &:after {
    @include pos($t: 51.5%, $l: 0);    
  }
  
  > .below {
    font-size: 5em;
    
    &:before {
      @include show-pseudo;
      @include circle(98%, 99.5%, -1px, -1px);
      border: $b;
      box-shadow: inset 0 0 0 .98em $sand, inset 0 0 0 calc(.98em + 2px) $mine, inset 0 0 0 2px $mine;
      background-color: $sand;
    }
  }
  
  > .above {
    @include size(63.5%, 100%); 
    @include pos($t: 0, $l: 0);
    border-right: 2px solid $mine;
    overflow: hidden;
    z-index: 5;
    font-size: 5em;

    &:before {
      @include show-pseudo;
      @include circle(56% + 98%, 99.5%, -1px, -1px);
      border: 2px solid transparent;
      box-shadow: inset 0 0 0 .98em rgba($sand, .5), inset 0 0 0 calc(.98em + 2px) $mine, inset 0 0 0 2px $mine;
    } 
  }
  
  > .lips {
    @include size(36%, 38%);
    @include pos($t: 31%, $l: 64%);
    z-index: 0;
    overflow: hidden;
    
    &:before,
    &:after {
      @include show-pseudo;
      @include size(100%, 50%);
      @include pos($b: 55%, $l: -20%);
      background-color: rgba($mine, .45);
      transform: skewX(-45deg)
    }
    
    &:after {
      @include pos($b: -5%, $l: -20%);
      transform: skewX(45deg)
    }
  }

  > .diagonal {
    @include size(10%, 10%);
    @include pos($t: 39.5%, $l: 81%);
    background-color: transparent;
    transform-origin: left bottom;
    border-style: solid;
    border-color: $mine;
    border-width: 2px 2px 0 0;
    border-top-right-radius: 100%;
    z-index: 99;
    transform: rotate(45deg);
    
    &:before,
    &:after {
      @include show-pseudo;
      @include pos($t: -800px, $l: 0);
      @include size(2px, 1600px);
      background-color: $mine;
    }
    
    &:after {
      @include pos($b: 0, $l: -800px);
      @include size(1600px, 2px);
    }
  }
}

.info {
  @include size(100%, 58px);
  display: table;
  font-size: 12px;
  letter-spacing: .5px;
  border-bottom: 2px solid $mine;
    
  > * + * {
    border-left: 2px solid lighten($mine, 20);
  }
    
  > * {
    display: table-cell;
    vertical-align: middle;
    padding-left: 22px;
    line-height: 1.8;
  }
    
  > *:first-child {
    width: 41%;
  }
    
  > *:nth-child(2) {
    width: 40%;
  }
    
  > *:last-child {
    width: 19%;
    padding-left: 8%;
  }
}
  
.reference {
  @include pos($b: 2%, $l: 5%);
  display: table;
  position: absolute;
  font-size: 13px;
  
  &__title {
    display: table-row;
    letter-spacing: .5px;
    font-size: 12px;
    height: 22px;
  }
  
  &__col {
    display: table-cell;
    line-height: 1.6;
    padding-right: 15px;
  }
}

i {
  position: absolute;
  background-color: $mine;
  border: 0;
  margin: 0;
  padding: 0;
  content: 'C';
}

.j {
  @include pos($b: 0, $l: 0);
  @include size(42%, 43%);
  background-color: transparent;
  border-style: solid;
  border-color: $mine;
  border-width: 2px 2px 0 0;
  
  &:before {
    @include pos($t: -40%, $l: -80%);
    content: 'J';
    font-size: 12px;
    transform-origin: left bottom;
    transform: rotate(-45deg);
  }
}
.hlE { @include line(58%, 15%, 20%, 'E', 'above'); }
.hlG { @include line(35%, 18%, 29%, 'G', 'above'); }
.hl10 { @include line(22.5%, 79.5%, 56%, '10', 'below'); }
.hlH { @include line(22.5%, 83%, 35%, 'H', 'below'); }
.vlC1 { @include line(13.5%, 39%, 9%, 'C', 'below', 'vertical'); }
.vlC2 { @include line(13.5%, 50.5%, 9%, 'C', 'below', 'vertical'); }
.vlD1 { @include line(81%, 22.5%, 16.5%, 'D', 'above', 'vertical'); }
.vlD2 { @include line(81%, 59.5%, 16.5%, 'D', 'above', 'vertical'); }
.vlB { @include line(81%, 48.5%, 1.5%, 'B', 'above', 'vertical'); }
.vlF { @include line(86.5%, 35%, 28.5%, 'F', 'above', 'vertical'); }
.vlI { @include line(18.5%, 22.5%, 53.5%, 'I', 'below', 'vertical'); }

.logoSmall {
  @include pos($b: 0, $r: 0);
  @include size(22%, 22%);
  border-style: solid;
  border-width: 2px 0 0 2px;
  border-color: $mine;
  background: $sand;
  font-size: 1em;
  
  &:before {
    @include show-pseudo;
    @include circle(61%, 61%, 19%, 18%);
    box-shadow: inset 0 0 0 1.2em $mine;
  }
  
  &:after {
    @include show-pseudo;
    @include size(42%, 100%);
    @include pos($t: 0, $r: 0);
    background-color: $sand;
  }
  
  > .lips {
    @include size(25%, 24%);
    @include pos($t: 37%, $l: 58%);
    z-index: 0;
    overflow: hidden;
    z-index: 999;
    
    &:before,
    &:after {
      @include show-pseudo;
      @include size(100%, 50%);
      @include pos($b: 55%, $l: -20%);
      background-color: $mine;
      transform: skewX(-45deg)
    }
    
    &:after {
      @include pos($b: -5%, $l: -20%);
      transform: skewX(45deg)
    }
  }
}