Blooming Squares | Learning Axis

HTML

CSS

:root {
  --mza-size: min(86vmin, 86vh);
  --mza-square-size: calc(var(--mza-size) / 14);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #0f172a 0, #020617 55%, #000 100%);
  overflow: hidden;
}
.mza-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
}
.mza-orbit {
  position: relative;
  width: var(--mza-size);
  height: var(--mza-size);
}
.mza-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
.mza-ring-core {
  animation: mza-spin 24s linear infinite;
}
.mza-ring-inner {
  animation: mza-spin-reverse 22s linear infinite;
}
.mza-ring-middle {
  animation: mza-spin 18s linear infinite;
}
.mza-ring-outer {
  animation: mza-spin-reverse 26s linear infinite;
}
.mza-square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--mza-square-size);
  height: var(--mza-square-size);
  margin: calc(var(--mza-square-size) / -2);
  transform-origin: center center;
}
.mza-square-inner {
  width: 100%;
  height: 100%;
  border-radius: 20%;
  animation: mza-square-spin 8s linear infinite;
  transform-origin: center center;
}
.mza-center-square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--mza-square-size) * 2);
  height: calc(var(--mza-square-size) * 2);
  margin: calc(var(--mza-square-size) * -1);
  transform-origin: center center;
}
.mza-center-square-inner {
  width: 100%;
  height: 100%;
  border-radius: 20%;
  background: conic-gradient(
    from 0deg,
    #22d3ee,
    #a855f7,
    #f97316,
    #22c55e,
    #22d3ee
    );
  animation: mza-center-spin 10s linear infinite;
  transform-origin: center center;
}
.mza-ring-core .mza-square:nth-child(1) {
  transform: rotate(0deg) translate(calc(var(--mza-size) * 0.16)) rotate(0deg);
}
.mza-ring-core .mza-square:nth-child(1) .mza-square-inner {
  background: hsl(0deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(0deg, 80%, 30%), 0 0 30px hsl(0deg, 80%, 40%);
  animation-delay: -0s;
}
.mza-ring-core .mza-square:nth-child(2) {
  transform: rotate(36deg) translate(calc(var(--mza-size) * 0.16)) rotate(-36deg);
}
.mza-ring-core .mza-square:nth-child(2) .mza-square-inner {
  background: hsl(40deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(40deg, 80%, 30%), 0 0 30px hsl(40deg, 80%, 40%);
  animation-delay: -0.25s;
}
.mza-ring-core .mza-square:nth-child(3) {
  transform: rotate(72deg) translate(calc(var(--mza-size) * 0.16)) rotate(-72deg);
}
.mza-ring-core .mza-square:nth-child(3) .mza-square-inner {
  background: hsl(80deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(80deg, 80%, 30%), 0 0 30px hsl(80deg, 80%, 40%);
  animation-delay: -0.5s;
}
.mza-ring-core .mza-square:nth-child(4) {
  transform: rotate(108deg) translate(calc(var(--mza-size) * 0.16)) rotate(-108deg);
}
.mza-ring-core .mza-square:nth-child(4) .mza-square-inner {
  background: hsl(120deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(120deg, 80%, 30%), 0 0 30px hsl(120deg, 80%, 40%);
  animation-delay: -0.75s;
}
.mza-ring-core .mza-square:nth-child(5) {
  transform: rotate(144deg) translate(calc(var(--mza-size) * 0.16)) rotate(-144deg);
}
.mza-ring-core .mza-square:nth-child(5) .mza-square-inner {
  background: hsl(160deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(160deg, 80%, 30%), 0 0 30px hsl(160deg, 80%, 40%);
  animation-delay: -1s;
}
.mza-ring-core .mza-square:nth-child(6) {
  transform: rotate(180deg) translate(calc(var(--mza-size) * 0.16)) rotate(-180deg);
}
.mza-ring-core .mza-square:nth-child(6) .mza-square-inner {
  background: hsl(200deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(200deg, 80%, 30%), 0 0 30px hsl(200deg, 80%, 40%);
  animation-delay: -1.25s;
}
.mza-ring-core .mza-square:nth-child(7) {
  transform: rotate(216deg) translate(calc(var(--mza-size) * 0.16)) rotate(-216deg);
}
.mza-ring-core .mza-square:nth-child(7) .mza-square-inner {
  background: hsl(240deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(240deg, 80%, 30%), 0 0 30px hsl(240deg, 80%, 40%);
  animation-delay: -1.5s;
}
.mza-ring-core .mza-square:nth-child(8) {
  transform: rotate(252deg) translate(calc(var(--mza-size) * 0.16)) rotate(-252deg);
}
.mza-ring-core .mza-square:nth-child(8) .mza-square-inner {
  background: hsl(280deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(280deg, 80%, 30%), 0 0 30px hsl(280deg, 80%, 40%);
  animation-delay: -1.75s;
}
.mza-ring-core .mza-square:nth-child(9) {
  transform: rotate(288deg) translate(calc(var(--mza-size) * 0.16)) rotate(-288deg);
}
.mza-ring-core .mza-square:nth-child(9) .mza-square-inner {
  background: hsl(320deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(320deg, 80%, 30%), 0 0 30px hsl(320deg, 80%, 40%);
  animation-delay: -2s;
}
.mza-ring-core .mza-square:nth-child(10) {
  transform: rotate(324deg) translate(calc(var(--mza-size) * 0.16)) rotate(-324deg);
}
.mza-ring-core .mza-square:nth-child(10) .mza-square-inner {
  background: hsl(360deg, 80%, 72%);
  box-shadow: 0 0 10px hsl(360deg, 80%, 30%), 0 0 30px hsl(360deg, 80%, 40%);
  animation-delay: -2.25s;
}
@keyframes mza-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes mza-spin-reverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes mza-square-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes mza-center-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}