Динамическая mask нескольких объектов

Question

Есть следующий SVG код:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: gray;
}
svg {
  height: 95vh;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 388.37 367.12" stroke="white" stroke-width="2" fill="none">
  <g id="axe_r">
    <path id="b" d="M492.13,267.07l-4.83-2s-28.54-6.32-45.19-16.36c-8.35-5-10.24-7.17-33.56-24.27L403,220.65l-5-2.37-6.67,5.61,1.35,6.25L403,248.8s.14,1,1.35.74c17.76-3.6,44,22.79,7.16,45.24l-5.75,32.61C421.92,320.26,482.79,280.23,492.13,267.07Z" transform="translate(-105.31 -216.35)"/>
    <path id="a" d="M408.56,224.47a52.51,52.51,0,0,0,4.84-6.7l22.88,15-6.17,7.71C425.72,237.22,419.5,232.49,408.56,224.47Zm-4.17,25.07c-1.21.24-1.35-.74-1.35-.74l-7.28-13.06A35.82,35.82,0,0,1,382,240.8s4.22,28.23-45.33,89C321,349.1,246,441,236.06,453.72c-15.51,19.19-37.18,53.86-47.42,73.61-6.73,13-23.3,39.32-25.52,42a1.84,1.84,0,0,0,0,2.35c1.85,2.24,5.71,6.77,7.35,7.84,2.2,1.44,20.62,3.67,22.49,2.65,4.41-2.41-1.65-19.24,31-81.45,10.74-18.74,26.1-43.63,72.57-98.15,36.69-43.05,45.49-50.85,63.89-75.18L420.06,253C415.26,249.94,409.48,248.51,404.39,249.54Z" transform="translate(-105.31 -216.35)"/>
    <mask id="maskR">
      <path d="M411.55,294.78l-5.75,32.61c16.12-7.13,77-47.16,86.33-60.32l-4.83-2s-28.54-6.32-45.19-16.36a128.15,128.15,0,0,1-12-8.23l6.17-7.71-22.88-15a52.51,52.51,0,0,1-4.84,6.7h0L403,220.65l-5-2.37-6.67,5.61,1.35,6.25,3.12,5.6A35.82,35.82,0,0,1,382,240.8s4.22,28.23-45.33,89C321,349.1,246,441,236.06,453.72c-15.51,19.19-37.18,53.86-47.42,73.61-6.73,13-23.3,39.32-25.52,42a1.84,1.84,0,0,0,0,2.35c1.85,2.24,5.71,6.77,7.35,7.84,2.2,1.44,20.62,3.67,22.49,2.65,4.41-2.41-1.65-19.24,31-81.45,10.74-18.74,26.1-43.63,72.57-98.15,36.69-43.05,45.49-50.85,63.89-75.18L420.06,253C432,260.74,437.85,278.76,411.55,294.78Z" transform="translate(-105.31 -216.35)" fill="black" />
    </mask>
  </g>
  <g id="axe_l">
    <path id="b-2" data-name="b" d="M106.85,267.07l4.84-2s28.53-6.32,45.18-16.36c8.36-5,10.25-7.17,33.56-24.27l5.58-3.81,5-2.37,6.67,5.61-1.35,6.25L196,248.8s-.14,1-1.35.74c-17.76-3.6-44,22.79-7.16,45.24l5.75,32.61C177.07,320.26,116.19,280.23,106.85,267.07Z" transform="translate(-105.31 -216.35)"/>
    <path id="a-2" data-name="a" d="M168.88,240.5l-6.17-7.71,22.88-15a53,53,0,0,0,4.83,6.7C179.48,232.49,173.26,237.22,168.88,240.5Zm10,12.54,59.59,74.39c18.4,24.33,27.2,32.13,63.89,75.18C348.87,457.13,364.23,482,375,500.76c32.68,62.21,26.63,79,31,81.45,1.87,1,20.29-1.21,22.49-2.65,1.63-1.07,5.49-5.6,7.35-7.84a1.83,1.83,0,0,0,0-2.35c-2.22-2.72-18.78-29.08-25.51-42-10.24-19.75-31.91-54.42-47.43-73.61C353,441,278,349.1,262.29,329.81,212.74,269,217,240.8,217,240.8a35.83,35.83,0,0,1-13.72-5.06L196,248.8s-.14,1-1.35.74C189.51,248.51,183.72,249.94,178.92,253Z" transform="translate(-105.31 -216.35)"/>
    <mask id="maskL">
      <path d="M187.44,294.78l5.75,32.61c-16.12-7.13-77-47.16-86.34-60.32l4.84-2s28.53-6.32,45.18-16.36a126.91,126.91,0,0,0,12-8.23l-6.17-7.71,22.88-15a53,53,0,0,0,4.83,6.7h0l5.58-3.81,5-2.37,6.67,5.61-1.35,6.25-3.12,5.6A35.83,35.83,0,0,0,217,240.8s-4.21,28.23,45.34,89C278,349.1,353,441,362.92,453.72c15.52,19.19,37.19,53.86,47.43,73.61,6.73,13,23.29,39.32,25.51,42a1.83,1.83,0,0,1,0,2.35c-1.86,2.24-5.72,6.77-7.35,7.84-2.2,1.44-20.62,3.67-22.49,2.65-4.41-2.41,1.64-19.24-31-81.45-10.74-18.74-26.1-43.63-72.57-98.15-36.69-43.05-45.49-50.85-63.89-75.18L178.92,253C167,260.74,161.13,278.76,187.44,294.78Z" transform="translate(-105.31 -216.35)" fill="black" />
    </mask>
  </g>
  <circle id="circle" cx="195.81" cy="178.37" r="165.85"/>
</svg>

Как сделать маску со следующим условием:

Обозночения:
А = топор который смотрит влево.
Б = топор который смотрит вправо.
Условие:
КРУГ "вычитается из" А и Б
Б "вычитается из" А

Т.е. результат должен быть следующий:

А динамичность заключается в том, что топоры будут двигаться и эти вычеты должны быть привязаны к группам axe_l и axe_r.

---

В принципе, анимация будет на JS, следовательно можно двигать и mask.

---

Получилось воссоздать одно из условий, оба топора вычитаются из круга.
А вот как вычесть один из другого - ума не приложу.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: linear-gradient(135deg, #666, #111);
}
svg {
  max-width: 90vw;
  height: 95vh;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 388.37 367.12" stroke="white" stroke-width="2" fill="none">
  <g id="axe_r">
    <path id="b" d="M492.13,267.07l-4.83-2s-28.54-6.32-45.19-16.36c-8.35-5-10.24-7.17-33.56-24.27L403,220.65l-5-2.37-6.67,5.61,1.35,6.25L403,248.8s.14,1,1.35.74c17.76-3.6,44,22.79,7.16,45.24l-5.75,32.61C421.92,320.26,482.79,280.23,492.13,267.07Z" transform="translate(-105.31 -216.35)"/>
    <path id="a" d="M408.56,224.47a52.51,52.51,0,0,0,4.84-6.7l22.88,15-6.17,7.71C425.72,237.22,419.5,232.49,408.56,224.47Zm-4.17,25.07c-1.21.24-1.35-.74-1.35-.74l-7.28-13.06A35.82,35.82,0,0,1,382,240.8s4.22,28.23-45.33,89C321,349.1,246,441,236.06,453.72c-15.51,19.19-37.18,53.86-47.42,73.61-6.73,13-23.3,39.32-25.52,42a1.84,1.84,0,0,0,0,2.35c1.85,2.24,5.71,6.77,7.35,7.84,2.2,1.44,20.62,3.67,22.49,2.65,4.41-2.41-1.65-19.24,31-81.45,10.74-18.74,26.1-43.63,72.57-98.15,36.69-43.05,45.49-50.85,63.89-75.18L420.06,253C415.26,249.94,409.48,248.51,404.39,249.54Z" transform="translate(-105.31 -216.35)"/>
    <mask id="maskR">
      <rect x="0" y="0" width="388.37" height="367.12" fill="white" stroke="none"/>
      <path d="M411.55,294.78l-5.75,32.61c16.12-7.13,77-47.16,86.33-60.32l-4.83-2s-28.54-6.32-45.19-16.36a128.15,128.15,0,0,1-12-8.23l6.17-7.71-22.88-15a52.51,52.51,0,0,1-4.84,6.7h0L403,220.65l-5-2.37-6.67,5.61,1.35,6.25,3.12,5.6A35.82,35.82,0,0,1,382,240.8s4.22,28.23-45.33,89C321,349.1,246,441,236.06,453.72c-15.51,19.19-37.18,53.86-47.42,73.61-6.73,13-23.3,39.32-25.52,42a1.84,1.84,0,0,0,0,2.35c1.85,2.24,5.71,6.77,7.35,7.84,2.2,1.44,20.62,3.67,22.49,2.65,4.41-2.41-1.65-19.24,31-81.45,10.74-18.74,26.1-43.63,72.57-98.15,36.69-43.05,45.49-50.85,63.89-75.18L420.06,253C432,260.74,437.85,278.76,411.55,294.78Z" transform="translate(-105.31 -216.35)" fill="black" />
    </mask>
  </g>
  <g id="axe_l">
    <path id="b-2" data-name="b" d="M106.85,267.07l4.84-2s28.53-6.32,45.18-16.36c8.36-5,10.25-7.17,33.56-24.27l5.58-3.81,5-2.37,6.67,5.61-1.35,6.25L196,248.8s-.14,1-1.35.74c-17.76-3.6-44,22.79-7.16,45.24l5.75,32.61C177.07,320.26,116.19,280.23,106.85,267.07Z" transform="translate(-105.31 -216.35)"/>
    <path id="a-2" data-name="a" d="M168.88,240.5l-6.17-7.71,22.88-15a53,53,0,0,0,4.83,6.7C179.48,232.49,173.26,237.22,168.88,240.5Zm10,12.54,59.59,74.39c18.4,24.33,27.2,32.13,63.89,75.18C348.87,457.13,364.23,482,375,500.76c32.68,62.21,26.63,79,31,81.45,1.87,1,20.29-1.21,22.49-2.65,1.63-1.07,5.49-5.6,7.35-7.84a1.83,1.83,0,0,0,0-2.35c-2.22-2.72-18.78-29.08-25.51-42-10.24-19.75-31.91-54.42-47.43-73.61C353,441,278,349.1,262.29,329.81,212.74,269,217,240.8,217,240.8a35.83,35.83,0,0,1-13.72-5.06L196,248.8s-.14,1-1.35.74C189.51,248.51,183.72,249.94,178.92,253Z" transform="translate(-105.31 -216.35)"/>
    <mask id="maskL">
      <rect x="0" y="0" width="388.37" height="367.12" fill="white" stroke="none"/>
      <path d="M187.44,294.78l5.75,32.61c-16.12-7.13-77-47.16-86.34-60.32l4.84-2s28.53-6.32,45.18-16.36a126.91,126.91,0,0,0,12-8.23l-6.17-7.71,22.88-15a53,53,0,0,0,4.83,6.7h0l5.58-3.81,5-2.37,6.67,5.61-1.35,6.25-3.12,5.6A35.83,35.83,0,0,0,217,240.8s-4.21,28.23,45.34,89C278,349.1,353,441,362.92,453.72c15.52,19.19,37.19,53.86,47.43,73.61,6.73,13,23.29,39.32,25.51,42a1.83,1.83,0,0,1,0,2.35c-1.86,2.24-5.72,6.77-7.35,7.84-2.2,1.44-20.62,3.67-22.49,2.65-4.41-2.41,1.64-19.24-31-81.45-10.74-18.74-26.1-43.63-72.57-98.15-36.69-43.05-45.49-50.85-63.89-75.18L178.92,253C167,260.74,161.13,278.76,187.44,294.78Z" transform="translate(-105.31 -216.35)" fill="black"  />
    </mask>
  </g>
  <circle id="circle" cx="195.81" cy="178.37" r="165.85" style="mask-image: url(#maskL), url(#maskR); mask-composite: intersect;"/>
</svg>

Answer 1

Из круга вырезаем маской два анимированных топора. Из нижнего топора вырезаем верхний.

body{
  margin: 0;
  position: relative;
}
video{
  display: block;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  object-position: center;
}
svg{
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: calc(50% - 50vh);
  left: calc(50% - 50vh);
  pointer-events: none;
  fill: none;
  stroke-width: 2px;
  stroke: #fff;
}

<video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" muted autoplay loop playsinline></video>

<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
    <symbol id="left-axe" width="600" height="600" viewBox="0 0 600 600">
    <path d="m168.9 160.5-6.17-7.71 22.88-15a53 53 0 0 0 4.83 6.7c-10.94 8-17.16 12.73-21.54 16.01zm10 12.54 59.59 74.39c18.4 24.33 27.2 32.13 63.89 75.18 46.51 54.52 61.87 79.39 72.64 98.15 32.68 62.21 26.63 79 31 81.45 1.87 1 20.29-1.21 22.49-2.65 1.63-1.07 5.49-5.6 7.35-7.84a1.83 1.83 0 0 0 0-2.35c-2.22-2.72-18.78-29.08-25.51-42-10.24-19.75-31.91-54.42-47.43-73.61-9.9-12.76-84.9-104.7-100.6-124-49.55-60.81-45.29-89.01-45.29-89.01a35.83 35.83 0 0 1-13.72-5.06l-7.28 13.06s-0.14 1-1.35 0.74c-5.14-1.03-10.93 0.4-15.73 3.46zm-72.03 14.03 4.84-2s28.53-6.32 45.18-16.36c8.36-5 10.25-7.17 33.56-24.27l5.58-3.81 5-2.37 6.67 5.61-1.35 6.25-10.33 18.68s-0.14 1-1.35 0.74c-17.76-3.6-44 22.79-7.16 45.24l5.75 32.61c-16.17-7.13-77.05-47.16-86.39-60.32z">
            <animateTransform attributeName="transform" attributeType="XML" dur="2s" repeatCount="indefinite" type="rotate" values="0 300 300;-15 300 300;0 300 300"/>
        </path>
  </symbol>
    <symbol id="right-axe" width="600" height="600" viewBox="0 0 600 600">
    <path d="m408.6 144.5a52.51 52.51 0 0 0 4.84-6.7l22.88 15-6.17 7.71c-4.39-3.26-10.61-7.99-21.55-16.01zm-4.17 25.07c-1.21 0.24-1.35-0.74-1.35-0.74l-7.28-13.06a35.82 35.82 0 0 1-13.76 5.06s4.22 28.23-45.33 89c-15.67 19.3-90.67 111.2-100.6 123.9-15.51 19.19-37.18 53.86-47.42 73.61-6.73 13-23.3 39.32-25.52 42a1.84 1.84 0 0 0 0 2.35c1.85 2.24 5.71 6.77 7.35 7.84 2.2 1.44 20.62 3.67 22.49 2.65 4.41-2.41-1.65-19.24 31-81.45 10.74-18.74 26.1-43.63 72.57-98.15 36.69-43.05 45.49-50.85 63.89-75.18l59.64-74.39c-4.8-3.06-10.58-4.49-15.67-3.46zm7.16 45.24-5.75 32.61c16.12-7.13 77-47.16 86.33-60.32l-4.83-2s-28.54-6.32-45.19-16.36a128.2 128.2 0 0 1-12-8.23l6.17-7.71-22.88-15a52.51 52.51 0 0 1-4.84 6.7l-5.56-3.82-5-2.37-6.67 5.61 1.35 6.25 3.12 5.6a35.82 35.82 0 0 1-13.8 5.06s4.22 28.23-45.33 89c-15.67 19.3-90.67 111.2-100.6 123.9-15.51 19.19-37.18 53.86-47.42 73.61-6.73 13-23.3 39.32-25.52 42a1.84 1.84 0 0 0 0 2.35c1.85 2.24 5.71 6.77 7.35 7.84 2.2 1.44 20.62 3.67 22.49 2.65 4.41-2.41-1.65-19.24 31-81.45 10.74-18.74 26.1-43.63 72.57-98.15 36.69-43.05 45.49-50.85 63.89-75.18l59.64-74.39c11.94 7.74 17.79 25.76-8.51 41.78zm0 0-5.75 32.61c16.12-7.13 77-47.16 86.33-60.32l-4.83-2s-28.54-6.32-45.19-16.36a128.2 128.2 0 0 1-12-8.23l6.17-7.71-22.88-15a52.51 52.51 0 0 1-4.84 6.7l-5.56-3.82-5-2.37-6.67 5.61 1.35 6.25 3.12 5.6a35.82 35.82 0 0 1-13.8 5.06s4.22 28.23-45.33 89c-15.67 19.3-90.67 111.2-100.6 123.9-15.51 19.19-37.18 53.86-47.42 73.61-6.73 13-23.3 39.32-25.52 42a1.84 1.84 0 0 0 0 2.35c1.85 2.24 5.71 6.77 7.35 7.84 2.2 1.44 20.62 3.67 22.49 2.65 4.41-2.41-1.65-19.24 31-81.45 10.74-18.74 26.1-43.63 72.57-98.15 36.69-43.05 45.49-50.85 63.89-75.18l59.64-74.39c11.94 7.74 17.79 25.76-8.51 41.78z" >
            <animateTransform attributeName="transform" attributeType="XML" dur="2s" repeatCount="indefinite" type="rotate" values="0 300 300;15 300 300;0 300 300"/>
        </path>
  </symbol>
    <mask id="two-axes" maskUnits="userSpaceOnUse">
        <rect width="100%" height="100%" fill="#fff" />
        <use href="#left-axe" x="0" y="0" width="100%" height="100%" fill="#000" stroke="#000" />
        <use href="#right-axe" x="0" y="0" width="100%" height="100%" fill="#000" stroke="#000" />
    </mask>
    <mask id="one-axe" maskUnits="userSpaceOnUse">
        <rect width="100%" height="100%" fill="#fff" />
        <use href="#left-axe" x="0" y="0" width="100%" height="100%" fill="#000" stroke="#000" />
    </mask>

    <use href="#left-axe" x="0" y="0" width="100%" height="100%" />
    <use href="#right-axe" x="0" y="0" width="100%" height="100%" mask="url(#one-axe)" />
    <circle cx="300" cy="300" r="180" mask="url(#two-axes)"/>
</svg>