<object class="scroller"><span>S</span><span>C</span><span>O</span><span>P</span><span>R</span><span>I</span><span> </span><span>D</span><span>I</span><span> </span><span>P</span><span>I</span><span>Ù</span><span> </span></object>
/*personal scroller*/
.scroller {
  width: 10rem;
  height: 10rem;
  position: absolute;
  left:0;
  right:0;
  margin: auto;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  font-size: 0.5rem;
  --numero-lettere: 14;
  -webkit-text-fill-color: var(--text-color);
  backface-visibility: hidden;
}
.scroller:after {
  content: "↓";
  color: var(--text-color);
  position: absolute;
  display: flex;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 100;
}
.scroller span {
  --elem: 1;
  --rotazione: calc((1turn / var(--numero-lettere)) * var(--elem, 1));
  position: absolute;
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  top: 1rem;
  left: 1rem;
  transform: rotate(var(--rotazione));
  transform-origin: center;
}
.scroller span:nth-child(2) {
  --elem: 2;
}
.scroller span:nth-child(3) {
  --elem: 3;
}
.scroller span:nth-child(4) {
  --elem: 4;
}
.scroller span:nth-child(5) {
  --elem: 5;
}
.scroller span:nth-child(6) {
  --elem: 6;
}
.scroller span:nth-child(7) {
  --elem: 7;
}
.scroller span:nth-child(8) {
  --elem: 8;
}
.scroller span:nth-child(9) {
  --elem: 9;
}
.scroller span:nth-child(10) {
  --elem: 10;
}
.scroller span:nth-child(11) {
  --elem: 11;
}
.scroller span:nth-child(12) {
  --elem: 12;
}
.scroller span:nth-child(13) {
  --elem: 13;
}
.scroller span:nth-child(14) {
  --elem: 14;
}
.scroller {
  animation: spin360 8s linear infinite;
}
.scroller:after {
  animation: spin360 8s infinite linear reverse;
}
@keyframes spin360 {
  100% {
    transform: rotateZ(360deg);
  }
}
/*extra*/
:root {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  background:black;
  font-family:sans-serif;
  -text-color: #fff;
}
//nojs-here
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.