The Spotify logo made with pure CSS

index.html

<div class="spotify">
  <div class="bar bar-dark"></div>
  <div class="bar bar-med"></div>
  <div class="bar bar-light"></div>
</div>

script.js

// Spotify Logo

style.css

*, ::before, ::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  background: radial-gradient(center center, circle farthest-side, #E6E6E6, #CCC);
}

.spotify {
  position: relative;
  margin: 20px auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(94px 276px, circle farthest-corner, transparent 22%, #1a4005 22%, #1A4005 35%, transparent 35%),
          		linear-gradient(top, #96ba2a, #75a621);
  background: linear-gradient(to bottom, #96ba2a, #75a621);
  border: 1px solid rgba(0, 0, 0, .1);
  box-shadow: 0 0 4px rgba(0, 0, 0, .5);
  overflow: hidden;
}


.bar {
  position: absolute;
  width: 320px;
  height: 200px;
  border-radius: 50%;
  border: 30px solid #305a0a;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  transform: rotate(8deg) scale(.7);
}

.bar-dark {
  top: 20px;
  left: -40px;
}

.bar-dark::before,
.bar-dark::after {
  background: #305a0a;
}

.bar-med {
  top: 53px;
  left: -44px;
  transform: rotate(8deg) scale(.6);
  border-top-color: #4a7814;
}


.bar-med::before,
.bar-med::after {
  background: #4a7814;
}


.bar-light {
  top: 80px;
  left: -49px;
  transform: rotate(8deg) scale(.5);
  border-top-color: #659620;
}


.bar-light::before,
.bar-light::after {
  background: #659620;
}


.bar::before,
.bar::after {
  content: '';
  position: absolute;
  width: 29px;
  height: 29px;
  border-radius: 50%;
}

.bar::before {
  top: 0px;
  left: 5px;
}

.bar::after {
  top: 1px;
  right: 4px;
}