Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
:root {
  --color: #6a1b9a;
}
body {
  background: #37474f;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
}

.daftpunk {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 6rem;
  & .helmet-container {
    position: relative;
    filter: drop-shadow(0 0 1rem var(--color));
    animation: helmet 1.5s linear infinite;
    &:first-child {
      &::before {
        content: "";
        width: 1.5rem;
        height: 3rem;
        border-radius: 0.55rem;
        background: #b7b7b7;
        position: absolute;
        top: calc(50% - 1.25rem);
        left: -1rem;
        box-shadow: 12.5rem 0 0 #c3c3c3; 
      }
      & .helmet {
        width: 12rem;
        height: 12rem;
        border-radius: 50% 50% 0 0;
        clip-path: polygon(-20% 0, 0 0, 100% 0, 120% 0, 100% 80%, 65% 100%, 35% 100%, 0 80%);
        background: 
          linear-gradient(transparent 49.5%, #949494 50.5% 64.5%, transparent 65%),
          linear-gradient(115deg, transparent 54.5%,#c3c3c3 55% 76%, #b7b7b7 75.5%),
          linear-gradient(65deg, #b7b7b7 24%, #c3c3c3 24.5% 50%, transparent 50.5%);
        & .top {
          width: 11.25rem;
          height: 4.3rem;
          background: linear-gradient(to right, #b7b7b7 49.5%, #c3c3c3 50.5%);
          border-radius: 50% 50% 0 0/100% 100% 0 0;
          margin-left: 0.375rem;
        }
        & .visor {
          width: 13rem;
          height: 3rem;
          background:
            linear-gradient(#b7b7b7, black 20% 24.5%, transparent 25%),
            linear-gradient(to right, transparent 89.5%, black 90%),
            linear-gradient(transparent 79.5%, black 80%),
            linear-gradient(to right, black 9.5%, transparent 10%),
            repeating-linear-gradient(transparent, transparent 0.25rem, black 0.25rem, black 0.5rem),
            repeating-linear-gradient(0.25turn, transparent, transparent 0.25rem, black 0.25rem, black 0.5rem), linear-gradient(red 100%, transparent);
          clip-path: polygon(0 17%, 6% 0, 94% 0, 100% 17%, 96% 100%, 4% 100%);
          position: relative;
          margin-left: -0.5rem;
        }
      }
    }
    &:last-child {
      & .helmet {
        width: 10rem;
        height: 13rem;
        border-radius: 5rem 5rem 0 0;
        clip-path: polygon(7% 85%, 0 0, 100% 0, 93% 85%, 100% 85%, 70% 100%, 30% 100%, 0 85%);
        background:
          linear-gradient(115deg, transparent 64.5%,#f2cb48 65% 79.5%, #eac102 80%),
          linear-gradient(65deg, #eac102 20%, #f2cb48 20.5%);
        & .visor {
          width: 10rem;
          height: 11rem;
          background: linear-gradient(to right, transparent 14%, #0e0e0e 15% 49.5%, #3e150f 50.5% 85%, transparent 86%),
          linear-gradient(#e53935 16%, #6a1b9a 18% 30%, #1976d2 32% 44%, #388e3c 46% 58%, #ffd600 60% 72%, #ff9100 74% 86%, #e53935 88% 100%);
          border-radius: 5rem 5rem 0 0;
        }
      }
      &::before {
        content: "";
        width: 10rem;
        height: 5.5rem;
        border-radius: 1rem 1rem 0 0;
        background: #eac102;
        position: absolute;
        bottom: 2rem;
      }
    }
    & .helmet {
      background: red;
      position: relative;
    }
  }
}

@keyframes helmet {
  34% {
    --color: #1e88e5;
  }
  51% {
    --color: #388e3c;
  }
  68% {
    --color: #ffd600;
  }
  85% {
    --color: #ff9100;
  }
  100% {
    --color: #e53935;
  }
}

Frontend Forever App