Petals | Learning Axis

HTML

CSS

@property --hue-offset {
  syntax: "<number>";
  inherits: true;
  initial-value: 20;
}
@property --hue {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --rotation {
  syntax: "<angle>";
  inherits: false;
  initial-value: -135deg;
}
:root {
  --petal-size: calc((calc(100vmin - 40px) * 0.5) - 1px);
}
body {
  background-color: rgb(25, 25, 25);
  overflow: hidden;
  height: 100vh;
  animation: 60s linear infinite hueOffset;
}
div{
  --amt: calc(var(--i) / 20);
  --hue: calc(var(--amt) * 30 + var(--hue-offset));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--petal-size);
  height: var(--petal-size);
  border-radius: 0 100%;
  border: calc(var(--petal-size) / 10) solid hsla(var(--hue), 100%, 50%, 1);
  background-color: hsla(var(--hue), 100%, 50%, 0.1);
  mix-blend-mode: soft-light;
  transform: translate(-50%, -50%) rotate(calc(var(--rotation) + var(--amt) * 180deg ));
  animation: 300s linear infinite rotation;
  &:nth-child(odd){
    animation-direction: reverse;
  }
}
@keyframes hueOffset {
  from{
    --hue-offset: 20;
  }
  to{
    --hue-offset: 380;
  }
}
@keyframes rotation {
  0% {
    --rotation: 0deg;
  }
  100% {
    --rotation: 360deg;
  }
}