<svg width="250" height="250" viewBox="0 0 175 200">
<defs>
  <linearGradient id="stripes" 
                    x1="0" y1="0" x2="100%" y2="50%">
          <stop stop-color="hsl(45,100%,65%)" offset="0"/>
          <stop stop-color="hsl(320,100%,65%)" offset="50%"/>
          <stop stop-color="hsl(200,100%,60%)" offset="100%"/>  
    </linearGradient>
</defs>
  <g>
	    <path d="M175 58.756c0-39.538-28.619-58.756-87.5-58.756s-87.5 19.219-87.5 58.756c0 45.469 82.331 97.925 85.831 100.131 0.006 0.006 0.019 0 0.031 0.006 0.069 0.044 0.144 0.044 0.219 0.081 0.45 0.238 0.925 0.4 1.419 0.4s0.969-0.162 1.419-0.394c0.069-0.037 0.15-0.037 0.219-0.081 0.006-0.006 0.019 0 0.031-0.006 3.5-2.213 85.831-54.663 85.831-100.137z" />
      <path d="M71.875 168.75c-1.725 0-3.125 1.4-3.125 3.125v18.75c0 5.256 4.119 9.375 9.375 9.375h18.75c5.256 0 9.375-4.119 9.375-9.375v-18.75c0-1.725-1.4-3.125-3.125-3.125h-31.25z"/>  
      <path d="M6.25 58.756c0-24.819 12.419-40.438 38.475-47.7-13.213 9.575-19.725 25.4-19.725 47.7 0 26.269 19.594 54.95 36.487 74.831-24.113-19.175-55.237-48.937-55.237-74.831z"/>
      <path d="M56.25 58.756c0 29.981 12.369 63.381 20.819 82.725-17.138-18.106-45.819-52.85-45.819-82.725 0-29.313 11.988-45.794 37.356-50.825-8.275 9.050-12.356 25.888-12.356 50.825z"/>
      <path d="M112.5 58.756c0 34.75-17.975 75.756-25 90.456-7.025-14.694-25-55.681-25-90.456 0-47.063 14.269-52.506 25-52.506s25 5.444 25 52.506z"/>
      <path d="M118.75 58.756c0-24.938-4.075-41.775-12.356-50.825 25.369 5.031 37.356 21.519 37.356 50.825 0 29.875-28.681 64.612-45.819 82.725 8.45-19.337 20.819-52.744 20.819-82.725z"/>
      <path d="M113.512 133.588c16.894-19.881 36.488-48.556 36.488-74.831 0-22.3-6.513-38.131-19.725-47.7 26.056 7.263 38.475 22.881 38.475 47.7 0 25.894-31.125 55.656-55.238 74.831z"/>
      <path d="M100 190.625c0 1.838-1.287 3.125-3.125 3.125h-18.75c-1.838 0-3.125-1.287-3.125-3.125v-15.625h25v15.625z"/>
    </g>
</svg>
BODY {
  background: #FFF;
}
svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
/*  border: 1px solid; */
  }
g {
  transform: scale(.95) translate(4px,4px);
}
path {
  fill: none;
  stroke-width: 1;
  stroke: rgba(0,0,0, .5);
  stroke-dasharray: 550 0;
  animation: dasharray 10s infinite alternate;
  }

@keyframes dasharray {
  100% {
    stroke: rgba(0,0,0, .5);
    stroke-dasharray: 0 500;
    fill-opacity: 0;
  }
}

path:nth-child(8n+3){
  fill: #C24704;
  animation-delay: .4s;
  }
path:nth-child(8n+4){
  fill: #D9CC3C;
  animation-delay: 1s;
  }
path:nth-child(8n+5){
  fill: #FFEB79;
  animation-delay: 1.6s;
  }
path:nth-child(8n+6){
  fill: #A0E0A9;
  animation-delay: 2s;
  }
path:nth-child(8n+7){
  fill: #00ADA7;
  animation-delay: 2.6s;
  }
path:nth-child(8n){
  fill: darken(#00ADA7, 15%);
  animation-delay: 3s;
  }
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.