Atari

Logo recreated using pure HTML and CSS3. No images. No JS.

HTML

<div id="atari">
  <div class="icon">
    <div class="side1 side">
      <div class="atari1"></div>
      <div class="atari2"></div>
      <div class="atari3"></div>
      <div class="atari4"></div>
    </div>
    <div class="side2 side">
      <div class="atari1"></div>
      <div class="atari2"></div>
      <div class="atari3"></div>
      <div class="atari4"></div>
    </div>
  </div>
  <div class="pong">
    <div class="score1 score"></div>
    <div class="score2 score"></div>
    <div class="player1 player"></div>
    <div class="player2 player"></div>
    <div class="ball"></div>
  </div>
</div>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200

CSS

#atari,
.atari2,
.atari4 {
  background: #111;
}

#atari {
  height: 304px;
  position: relative;
  width: 540px;
}

#atari .pong {
  left: 20px;
  position: absolute;
  top: 2px;
}

#atari .pong * {
  background: #fff;
  position: absolute;
}

@keyframes ball {

  0%,
  100% {
    left: 30px;
    top: 107px
  }

  30% {
    left: 300px;
    top: 294px
  }

  50% {
    left: 464px;
    top: 192px
  }

  80% {
    left: 198px;
    top: 0px
  }
}

@keyframes player1 {

  0%,
  90%,
  100% {
    top: 70px
  }

  30% {
    top: 90px
  }

  50% {
    top: 80px
  }

  80% {
    top: 60px
  }
}

@keyframes player2 {

  0%,
  90%,
  100% {
    top: 180px
  }

  30% {
    top: 200px
  }

  50% {
    top: 190px
  }

  80% {
    top: 160px
  }
}

#atari .pong .ball {
  animation: ball 4s linear 0s infinite normal;
  height: 6px;
  left: 300px;
  top: 294px;
  width: 6px;
}

#atari .pong .player {
  height: 54px;
  width: 8px;
}

#atari .pong .player1 {
  animation: player1 4s linear 0s infinite alternate;
  left: 22px;
  top: 70px;
}

#atari .pong .player2 {
  animation: player2 4s linear 0s infinite normal;
  left: 470px;
  top: 180px;
}

#atari .pong .midfield {
  height: 240px;
  left: 247px;
  top: 30px;
  width: 6px;
}

#atari .icon {
  height: 200px;
  left: 153px;
  overflow: hidden;
  position: absolute;
  top: 52px;
  width: 234px;
}

#atari .icon * {
  position: absolute;
}

#atari .side2 {
  left: 234px;
  position: absolute;
  top: 0px;
  transform: scalex(-1);
}

.atari1,
.atari3 {
  background: #fa000f;
}

.atari1 {
  height: 200px;
  left: 85px;
  width: 32px;
}

.atari2 {
  height: 256px;
  top: -53px;
  width: 141px
}

.atari2 {
  border-radius: 0 0 141px 141px/256px 256px 256px 256px;
  left: -34px;
  top: -22px;
}

.atari3 {
  border-radius: 0 0 200px 200px/334px 334px 334px 334px;
  bottom: 0;
  height: 334px;
  left: -101px;
  top: -135px;
  width: 200px;
}

.atari4 {
  border-radius: 0 0 183px 183px/239px 239px 239px 239px;
  height: 239px;
  left: -100px;
  top: -89px;
  width: 183px;
}

#atari:after {
  background-image: linear-gradient(transparent 33%, #111 33%);
  background-size: 1px 3px;
  bottom: 0;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200