QWxobjJ

index.html

<div class="banner_wrapper playlist">
  <p class="sponsored">#general</p>
  <div class="banner">
    <div class="playback">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <!-- https://codepen.io/ildarmgt/pen/ExVPzWW -->
    <div class="art">
      <!--  scifi circles  -->
      <css-doodle use="var(--scifi)"></css-doodle>
      <!--  iris radial from center pattern  -->
      <css-doodle use="var(--iris)"></css-doodle>
      <!--  iris radial from center triangles  -->
      <css-doodle use="var(--iris2)"></css-doodle>
    </div>
    <div class="spinning_label">
      <h1>brit j.</h1>
      <span></span>
    </div>

    <footer>
      Listen now
    </footer>
  </div>
</div>

qwxobjj.markdown

QWxobjJ

A Pen by BergenBergen BergenBergen on CodePen.

License.

script.babel

// https://tobiasahlin.com/moving-letters/#15

var spinningLabel = anime({
  targets: [".spinning_label"],
  rotate: 3000,
  duration: 100000,
  loop: true
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.29.0/css-doodle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.3.2/swiper-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

style.scss

body {
  font-family: sans-serif;
}

.banner_wrapper {
  display: flex;
  background: #efefef;
  justify-content: center;
  padding: 10px 0 28px;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
  padding-bottom: 30px;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  background: black;
  color: white;
  transform: scale(2)
}

.banner header {
  position: absolute;
  top: 10px;
  left: 10px;
}

.banner footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 10px;
  background: white;
  color: black;
}

.banner footer:after {
  content: "";
  position: absolute;
  background-image: url("https://i.imgur.com/zZEcHBd.png");
  background-repeat: no-repeat;
  background-size: 12px;
  height: 12px;
  width: 12px;
  right: 30px;
  top: 14px;
}

.banner_wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.banner {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
  border-radius: 6px;
}

.playlist .banner {
  background: black;
  color: white;
  position: relative;
}

:root {
  --colorEyeBlue: #34495e12;
  --colorEyeDark: #07070715;
  --colorBackground: #111;
  
  // --sizeEye: 80vmin;
  --sizeEye: 220px;
  --sizeBigLine: calc(0.01 * var(--sizeEye));
  --sizeSmallLine: calc(0.003 * var(--sizeEye));;
  --sizeIris: calc(var(--sizeEye) / 2);
}

:root {
  --scifi: (
    :doodle {
      @grid: 1x19 / 100%;    
      position: absolute;
      left: 0;
      top: 0;
    }
    
    @place-cell: center; 
    @size: calc(20% + @i * 4%);
    z-index: 2; 

    border-radius: 100%; 
    border-style: solid;
    border-width: @pick(
      var(--sizeSmallLine),
      var(--sizeSmallLine),
      var(--sizeBigLine)
    );

    border-color: 
      hsla(
        215, @r(40%,50%), @r(70%, 82%), @r(5%, 90%)
      )
      transparent
    ;    


    will-change: transform;
    animation: myanimation @r(4s, 15s) linear alternate infinite;    

    @keyframes myanimation {
      from { transform: rotate(@r(360deg)) }
      to { transform: rotate(@r(360deg)) }
    }    

    @nth(1) { background-color: #000; border: none; z-index: 3; }  
  );
}

:root {
  --iris: (
    :doodle {
      @grid: 1x30 / 100%;
      position: absolute;
      left: 0;
      top: 0;
    }
    @place-cell: center;
    @size: 100%;
    z-index: 1; 

    border-radius: 100%;
    border-style: dashed;
    border-width: var(--sizeIris);    
    border-color: var(--colorEyeBlue) var(--colorEyeDark);
    transform: rotate(@r(179deg));
  );
}

:root {  
  --iris2: (
    :doodle {
      @grid: 1x30 / 100%;
      position: absolute;
      left: 0;
      top: 0;      
    }
    z-index: 1;
    @place-cell: center;
    background-color: var(--colorEyeBlue);
    @size: 100%;
    clip-path: polygon(48% 50%, 50% 100%, 52% 50%, 50% 0%);
    transform: rotate(@r(179deg));
  );
}

.art {
  position: relative;
  margin-top: -8px;
  width: var(--sizeEye);
  height: var(--sizeEye);
}

.spinning_label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  height: 80px;
  width: 80px;
  background-color: white;
  border-radius: 100%;
  //border: 1px solid blue;
  z-index: 5;
}

.spinning_label h1 {
  z-index: 6;
  font-size: 120%;
  color: black;
}
.spinning_label span {
  background: black;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  position: absolute;
}


.playback {
  position: absolute;
  left: 12px;
  top: 46px;
  display: inline-flex;
  justify-content: space-between;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  z-index: 3;

  & > span {
    width: 3px;
    height: 100%;
    background-color: white;
    border-radius: 3px;
    transform-origin: bottom;
    transition: opacity 0.3s ease-out;
    animation: bounce 2.2s ease infinite alternate;
    content: '';

    &:nth-of-type(2) {
      animation-delay: -2.2s;
    }

    &:nth-of-type(3) {
      animation-delay: -3.7s;
    }
  }
}

@keyframes bounce {
  10% {
    transform: scaleY(0.3);
  }

  30% {
    transform: scaleY(1);
  }

  60% {
    transform: scaleY(0.5);
  }

  80% {
    transform: scaleY(0.75);
  }

  100% {
    transform: scaleY(0.6);
  }
}