Jumpy Triangle | Learning Axis

HTML

CSS

@keyframes --scale { to { scale: 0.7 1.5; }}
@keyframes --translate { to { translate: 0 -600px; }}
@keyframes --rotate { to { rotate: 360deg; }}
svg {
  --anim-duration: 3000ms;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
  width: 70px;
  overflow: visible;
  .triangle-inner {
    transform-origin: 50% 66%;
    animation: var(--anim-duration) infinite --rotate;
    animation-timing-function: var(--rotate-time);
  }
  .triangle-outer {
    transform-origin: 50% 100%;
    animation:
      var(--anim-duration) infinite --translate,
      var(--anim-duration) infinite --scale;
    animation-timing-function: var(--translate-time), var(--scale-time);
  }
}
html, body {
  height: 100%;
  margin: 0;
  text-align: center;
  box-sizing: border-box;
}
body {
  background: radial-gradient(20vw 20vw at 10% 10%, #1846f725, transparent), radial-gradient(50vw 50vw at 90% 30%, #a100ff15, transparent), radial-gradient(40vw 40vw at 20% 90%, #a1458545, transparent), radial-gradient(30vw 30vw at 75% 70%, #4556a145, transparent), #060515;
  align-content: center;
  padding-top: 15vh;
  --rotate-time: linear(
    0.002,
    0.006 8.4%,
    0.02 10%,
    0.057 12%,
    0.169 17.2%,
    0.229 20.3%,
    0.282 23.9%,
    0.319 27.8%,
    0.335 32%,
    0.34 39.9%,
    0.354 41.6%,
    0.39 43.7%,
    0.502 49.3%,
    0.562 52.8%,
    0.614 56.7%,
    0.652 61.1%,
    0.666 66%,
    0.667 73.1%,
    0.682 74.6%,
    0.719 76.5%,
    0.833 81.2%,
    0.893 84.1%,
    0.946 87.4%,
    0.984 91.2%,
    0.998 95.3%,
    1.002
    );
  --translate-time: linear(
    0.00442,
    0.00674 7.227%,
    0.042181 8.6382%,
    0.133865 9.6336%,
    0.410934 11.3116%,
    0.687902 14.1296%,
    0.77946 16.5499%,
    0.805302 18.1152%,
    0.814726 19.956%,
    0.805966 21.7117%,
    0.780448 23.1914%,
    0.688706 25.4501%,
    0.409362 28.0526%,
    0.129755 29.7949%,
    0.037683 30.9782%,
    0.002944 32.7083%,
    0.006232 38.9859%,
    0.041727 40.4231%,
    0.135492 41.4897%,
    0.420158 43.4385%,
    0.704884 46.6874%,
    0.798724 49.3792%,
    0.825017 51.0933%,
    0.834324 53.0916%,
    0.825174 54.9564%,
    0.799312 56.5733%,
    0.707003 59.1602%,
    0.426947 62.4214%,
    0.147064 64.4191%,
    0.05497 65.4266%,
    0.02026 66.697%,
    0.02094 72.094%,
    0.056782 73.3538%,
    0.151071 74.5144%,
    0.437229 77.0536%,
    0.723895 80.742%,
    0.818819 83.3392%,
    0.845673 84.8823%,
    0.85555 86.61%,
    0.846526 88.3189%,
    0.819963 89.8026%,
    0.724229 92.1879%,
    0.432383 95.2831%,
    0.140134 97.3893%,
    0.043899 98.5383%,
    0.00761
    );
  --scale-time: linear(
    0.00442,
    -0.075344 1.508%,
    -0.248654 2.3986%,
    -0.421735 3.1098%,
    -0.500813 4.0795%,
    -0.3721 5.8906%,
    -0.087536 7.8479%,
    0.197138 9.8583%,
    0.326183 11.8286%,
    0.273403 12.8356%,
    0.158092 13.7841%,
    0.043282 15.7813%,
    0.005764 17.5194%,
    -0.00799 19.935%,
    0.007922 23.8683%,
    0.041134 25.811%,
    0.074139 26.8236%,
    0.089426 27.967%,
    0.055866 30.5875%,
    -0.01209 32.515%,
    -0.264449 33.7923%,
    -0.417641 34.691%,
    -0.486283 36.0206%,
    -0.359088 38.0294%,
    -0.078177 40.1112%,
    0.202828 42.1021%,
    0.330304 43.8382%,
    0.279305 45.0887%,
    0.167682 46.4568%,
    0.056059 48.8018%,
    0.019193 50.6092%,
    0.00506 52.983%,
    0.018609 56.7377%,
    0.048824 59.3074%,
    0.091808 62.5546%,
    0.054064 65.0219%,
    -0.01158 66.521%,
    -0.269293 67.9572%,
    -0.423569 69.0523%,
    -0.492978 70.3084%,
    -0.364892 72.1998%,
    -0.080499 74.2047%,
    0.204214 76.1404%,
    0.333262 77.8242%,
    0.280612 78.9621%,
    0.165646 80.3172%,
    0.05086 82.6445%,
    0.013064 84.4087%,
    -0.00125 86.699%,
    0.017309 88.8273%,
    0.058324 91.0344%,
    0.09987 93.1266%,
    0.120021 94.91%,
    0.102952 96.1639%,
    0.062889 97.2079%,
    0.022608 98.3754%,
    0.00488
    );
}