Darkest hour CSS animation

<svg viewBox="0 0 317.5 317.5">
  <path
    id="figure"
    fill="#cccccc"
    d="m 87.083985,149.2278 c -0.6893,-0.96299 -4.25814,-2.42425 -8.11066,-1.8157 -8.36483,1.32133 -20.71393,1.81758 -26.88091,0.50116 -3.74774,-12.29479 33.58078,-12.75049 41.45563,-17.67814 0.26325,-4.74225 -1.491,-13.34966 -1.76547,-19.9231 1.09871,-2.06261 2.85446,-2.4877 3.77231,-4.57346 0.70773,-9.125928 -2.31419,-22.273866 0.0837,-35.708043 1.13671,-6.368526 5.252665,-16.367602 10.742575,-20.734603 10.34056,-8.225504 27.29107,-12.455599 47.50691,-14.986631 18.53529,-2.320627 34.54612,-1.932143 47.27627,5.580345 13.67794,8.071809 17.45101,34.116724 23.17084,50.027948 3.02368,1.458906 2.20053,1.075439 4.99454,2.230224 l 3.40293,21.10446 c 23.89617,5.80552 24.92535,6.90815 42.76784,12.33108 9.19452,2.79451 15.29471,4.12727 15.03419,6.14363 -0.18779,1.45352 -4.0418,1.93703 -11.74222,2.2457 l -40.07877,1.76665 c -6.73446,0.29686 -2.75067,11.13367 -0.22969,15.32638 2.01999,3.35949 -1.38338,9.00821 -0.0315,12.39987 3.81919,9.58141 0.72886,4.21905 6.37868,15.1486 3.02576,4.90129 3.31089,5.81585 2.86972,9.14996 -1.19688,9.04536 -11.80312,8.16815 -13.69451,10.7173 -1.93153,3.05637 -2.72743,6.13347 -2.00978,8.45766 0.66569,2.15589 1.59447,1.71494 3.33112,2.53652 l 57.95364,20.55789 c 3.58296,1.27099 0.64377,9.13576 -3.17025,7.75091 L 233.4806,217.2222 c -0.97169,-0.35281 -3.24872,0.84532 -4.04989,2.37807 -1.0877,2.0809 -0.97776,2.99379 0.41728,7.03167 3.52992,10.21722 -1.33923,13.52951 -3.12935,14.99218 -5.52512,4.51446 -17.2945,9.99786 -19.88117,15.36075 -1.67687,3.47663 -1.87324,3.06103 0.0129,5.50936 l 23.96931,21.78209 c -76.11351,0.31552 -105.94387,0.10841 -208.222175,0.0163 12.812976,-31.62257 19.2255,-42.25639 40.24796,-81.51558 0.39972,-0.74647 -2.1732,-1.20291 -1.84754,-2.08145 1.91812,-5.17456 7.40174,-13.66054 10.33816,-17.08219 0.79619,-0.92776 2.18477,1.72841 3.10102,0.91754 11.98946,-10.6106 12.559,-24.67818 12.64682,-35.30312 z"
  />
  <path
    id="small-arm"
    fill="#000000"
    stroke="none"
    d="m 215.68229,171.86942 c -2.68206,-2.40607 -3.77743,-2.72993 -3.80091,-2.19012 -0.10835,2.48959 0.21563,2.19628 -0.42232,2.19444 -17.49184,-0.0505 -4.1776,0.10059 -26.74507,0.0852 -1.83322,-9.9e-4 -4.03715,4.0948 -3.98515,3.94293 0,0 -2.94765,-3.15551 -4.64762,-3.12335 -4.02075,0.0762 -8.34579,0.21912 -12.39043,0.22475 -4.2141,0.33016 -3.91053,6.07398 -10.65524,0.59552 -1.83012,-1.48654 -1.41763,-3.29543 -4.09655,-4.04766 2.65344,-0.73435 2.3384,-2.46898 4.11147,-4.04714 6.23146,-5.5465 7.56801,1.11637 10.59213,0.37355 4.05569,0.0137 8.38799,0.0445 12.49241,0.0826 1.53565,0.0137 4.52247,-3.92909 4.52247,-3.92909 0,0 2.16668,3.99911 4.16421,4.02607 22.93379,0.30943 11.02538,-0.0602 26.64724,0.27131 0.70094,0.0147 0.37595,-0.45651 0.41434,2.37454 0.0108,0.78862 1.32566,0.1754 3.79853,-2.2833 -0.16303,-0.002 3.22767,2.20865 3.28514,2.67287 0.0541,0.43714 -3.15707,2.53739 -3.28467,2.77696 z"
  />
  <path
    id="large-arm"
    fill="#000000"
    d="m 141.01872,66.459208 c 4.7926,32.536044 13.77195,63.593462 20.00685,95.519832 0.36939,2.22149 2.37618,3.76171 2.52916,3.8781 -1.97064,1.49799 -0.59133,4.14712 1.02621,4.59107 0.54391,0.1493 0.90867,0.62375 0.27546,1.11702 -1.79307,1.06937 -4.14639,4.41767 -4.37864,7.28842 -1.03382,-2.36966 -3.52224,-4.51961 -6.90433,-5.41854 -0.9435,-0.0818 -0.72727,-0.95774 -0.22944,-0.99606 1.93594,-0.14902 2.26075,-3.87728 -0.3131,-4.33729 0.67775,-1.54222 1.57934,-1.61592 0.56276,-4.71803 -3.87718,-31.12556 -10.80447,-64.516845 -16.13829,-96.35447 2.80847,-0.488852 0.37317,-0.08249 3.56336,-0.570052 z"
  />
  <ellipse
    cx="158.03711"
    cy="169.40802"
    fill="#000000"
    rx="6.7131753"
    ry="6.91713"
  />
  <path
    fill="#ffffff"
    d="m 159.68971,166.9845 c -0.001,-0.001 -0.003,-0.001 -0.004,0 l -1.66081,1.66328 -0.88368,-0.87802 1.65388,-1.66219 c 0.001,-0.001 9.9e-4,-0.003 1e-5,-0.004 l -0.795,-0.79105 c -0.001,-0.001 -0.003,-0.001 -0.004,-1e-5 l -2.40168,2.41379 c -10e-4,0.001 -10e-4,0.003 2e-5,0.004 l 0.0114,0.0113 -0.0415,0.0419 c -10e-4,0.001 -10e-4,0.003 0,0.004 l 1.66609,1.65543 -0.83787,0.83907 -1.61308,-1.61078 c -0.001,-0.001 -0.003,-0.001 -0.004,0 l -0.79242,0.7936 c -0.001,0.001 -0.001,0.003 -1e-5,0.004 l 2.40949,2.4061 c 0.001,0.001 0.003,0.001 0.004,-2e-5 l 0.005,-0.005 0.005,0.005 c 10e-4,0.001 0.003,0.001 0.004,-1e-5 l 1.62709,-1.62942 0.81128,0.80606 -1.6494,1.65681 c -0.001,0.001 -0.001,0.003 -8e-5,0.004 l 0.79482,0.79118 c 9.8e-4,0.001 0.003,0.001 0.004,-6e-5 l 1.65019,-1.65756 0.0101,0.0101 c 0.001,0.001 0.003,0.001 0.004,3e-5 l 0.78822,-0.79336 c 0.001,-0.001 0.001,-0.003 2e-5,-0.004 l -1.6188,-1.6083 0.85497,-0.85624 1.60788,1.6056 c 0.001,0.001 0.003,0.001 0.004,-4e-5 l 0.79232,-0.79351 c 0.001,-0.001 0.001,-0.003 0,-0.004 l -1.60786,-1.60554 0.008,-0.008 c 0.001,-10e-4 0.001,-0.003 -2e-5,-0.004 z"
  />
</svg>

* {
  box-sizing: border-box;
}

@property --radial-lightness {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

body {
  --animation-duration: 4s;

  min-height: 100dvh;
  margin: 0;

  display: grid;
  place-items: center;

  background-color: black;
  background-image: radial-gradient(
    circle at 50%,
    hsl(0, 100%, var(--radial-lightness)) 37%,
    black 38%
  );
  background-position: center;

  animation: darken var(--animation-duration);
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes darken {
  to {
    --radial-lightness: 10%;
  }
}

svg {
  width: 60%;
  max-width: 420px;
  mix-blend-mode: multiply;
}

@media screen and (min-width: 800px) {
  body {
    background-size: 800px;
    background-repeat: no-repeat;
  }
}

#figure {
  fill: hsl(0, 0%, 50%);
}

#large-arm {
  animation: rotate-large-arm var(--animation-duration);
  animation-timing-function: linear;
  animation-fill-mode: forwards;

  transform-origin: 50% 53.25%;
}

@keyframes rotate-large-arm {
  0%,
  90% {
    filter: blur(4px);
  }

  to {
    rotate: 8.032turn;
    filter: none;
  }
}

#small-arm {
  animation: rotate-small-arm var(--animation-duration);
  animation-timing-function: linear;
  animation-fill-mode: forwards;

  transform-origin: 50% 53.25%;
}

@keyframes rotate-small-arm {
  0%,
  90% {
    filter: blur(1px);
  }

  to {
    rotate: 0.725turn;
    filter: none;
  }
}