@property --scale {
  syntax: '<number>';
  inherits: true;
  initial-value: .8;
}

:root {
  --char-size: 20vmin;
  --speed: 10s;
}

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #1C2379;
  color: #fff;
}

.logo {
  --r: calc(var(--char-size) / 3);
  --gap: calc(var(--char-size) / 15);
  
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: var(--gap);
  height: 100%;
}

.num {
  display: grid;
  justify-content: center;
}

.num-two {
  align-content: end;
  background: #EA394B;
}

.num-two span { 
  transform-origin: 50% 100%;
}

.num-six {
  align-content: start;
  z-index: -1;
}

.num-six span {
  transform-origin: 50% calc(sibling-index() * .01%);
}

.num span {
  grid-row: 1;
  grid-column: 1;
  
  position: relative;
  
  display: block;
  width: calc(var(--r) * 4);
  height: calc(var(--r) * 3);
  
  container-type: size;
  z-index: calc(sibling-count() - sibling-index());
  
  &:not(:first-child) {
    scale: calc((sibling-index() - 1) * var(--scale));
    animation: scaleIt var(--speed, 0s) calc(sibling-index() * -100ms) ease-in-out infinite;
  }
}

.num span:nth-child(10n + 1) { color: #F1FE67; }
.num span:nth-child(10n + 2) { color: #6B1D18; }
.num span:nth-child(10n + 3) { color: #C3291C; }
.num span:nth-child(10n + 4) { color: #AC89F7; }
.num span:nth-child(10n + 5) { color: #374FF5; }
.num span:nth-child(10n + 6) { color: #EB4F27; }
.num span:nth-child(10n + 7) { color: #BCE949; }
.num span:nth-child(10n + 8) { color: #5A0DE0; }
.num span:nth-child(10n + 9) { color: #91FBDC; }
.num span:nth-child(10n + 10) { color: #1E4B3F; }
.num span:nth-child(1) { color: #fff; }

.num span:before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentcolor;
}

.num-two span:before {
  clip-path: shape(
    from 0 var(--r),
    arc to var(--r) 0 of var(--r) var(--r) cw,
    line to calc(var(--r) * 3) 0,
    arc to calc(var(--r) * 3) calc(var(--r) * 2) of var(--r) var(--r) cw,
    line to calc(var(--r) * 4) calc(var(--r) * 2),
    line to calc(var(--r) * 4) calc(var(--r) * 3),
    line to 0 calc(var(--r) * 3),
    line to 0 calc(var(--r) * 2),
    arc to var(--r) var(--r) of var(--r) var(--r) cw,
    close
  );
}

.num-six span:before {
  clip-path: shape(
    from 0 var(--r),
    arc to var(--r) 0 of var(--r) var(--r) cw,
    line to calc(var(--r) * 3) 0,
    arc to calc(var(--r) * 4) var(--r) of var(--r) var(--r) cw,
    line to calc(var(--r) * 3) var(--r),
    arc to calc(var(--r) * 3) calc(var(--r) * 3) of var(--r) var(--r) cw,
    line to var(--r) calc(var(--r) * 3),
    arc to 0 calc(var(--r) * 2) of var(--r) var(--r) cw,
    close
  );
}

.num-six span:first-child:after {
  content: 'TM';

  position: absolute;
  bottom: 0;
  left: 100%;

  rotate: -90deg;
  transform-origin: 0 100%;

  font-size: 8cqb;
  font-family: sans-serif;
  text-box: trim-both cap alphabetic;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 99;
  
  display: block;
  margin: 0;
  height: calc(var(--char-size) * 1.55);
  
  transform: translate(-50%, -50%);
}

@keyframes scaleIt {
  20% { --scale: 2; }
  40% { --scale: .6; }
  70% { --scale: 1.4; }
}