@-webkit-keyframes rotating {
  from {
    -webkit-transform: var(--scale) rotate(0deg);
    -o-transform: var(--scale) rotate(0deg);
    transform: var(--scale) rotate(0deg);
  }

  to {
    -webkit-transform: var(--scale) rotate(360deg);
    -o-transform: var(--scale) rotate(360deg);
    transform: var(--scale) rotate(360deg);
  }
}

@keyframes rotating {
  from {
    -ms-transform: var(--scale) rotate(0deg);
    -moz-transform: var(--scale) rotate(0deg);
    -webkit-transform: var(--scale) rotate(0deg);
    -o-transform: var(--scale) rotate(0deg);
    transform: var(--scale) rotate(0deg);
  }

  to {
    -ms-transform: var(--scale) rotate(360deg);
    -moz-transform: var(--scale) rotate(360deg);
    -webkit-transform: var(--scale) rotate(360deg);
    -o-transform: var(--scale) rotate(360deg);
    transform: var(--scale) rotate(360deg);
  }
}

body {
  margin: unset;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg#antivertical {
  --core-radius: 7px;
  --node-radius: 14px;
  --node-stroke: 2px;
  --width: 75px;
  --length: calc(var(--width) - (var(--node-radius) + var(--node-stroke)) * 2);
  --bisector: calc((var(--length) * sqrt(3)) / 2);
  --height: calc(
    var(--bisector) + (var(--node-radius) + var(--node-stroke)) * 2
  );
  --x1: calc(var(--node-radius) + var(--node-stroke));
  --y1: calc(var(--node-radius) + var(--node-stroke));
  --x2: calc(var(--width) - var(--node-radius) - var(--node-stroke));
  --y2: calc(var(--node-radius) + var(--node-stroke));
  --x3: calc(var(--width) / 2);
  --y3: calc(var(--bisector) + (var(--node-radius) + var(--node-stroke)));
  --scale: scale(2);
  --center-x: calc((var(--x1) + var(--x2) + var(--x3)) / 3);
  --center-y: calc((var(--y1) + var(--y2) + var(--y3)) / 3);
  --rotate: rotating 6s linear infinite;
  width: var(--width);
  height: var(--height);
  transform-origin: var(--center-x) var(--center-y);
  -webkit-animation: var(--rotate);
  -moz-animation: var(--rotate);
  -ms-animation: var(--rotate);
  -o-animation: var(--rotate);
  animation: var(--rotate);
}

svg#antivertical > circle.synapse {
  cx: var(--center-x);
  cy: var(--center-y);
  r: calc(var(--length) / 2.1);
  stroke-width: calc(var(--core-radius) * 0.9);
  stroke: black;
  fill: transparent;
}

svg#antivertical circle.node {
  r: var(--node-radius);
  stroke-width: var(--node-stroke);
  stroke: black;
  fill: transparent;
}

svg#antivertical > mask > circle.node {
  fill: black;
}

svg#antivertical > circle.core {
  r: var(--core-radius);
  fill: black;
}

svg#antivertical circle.node:nth-of-type(1),
svg#antivertical > circle.core:nth-of-type(4) {
  cx: var(--x1);
  cy: var(--y1);
}

svg#antivertical circle.node:nth-of-type(2),
svg#antivertical > circle.core:nth-of-type(5) {
  cx: var(--x2);
  cy: var(--y2);
}

svg#antivertical circle.node:nth-of-type(3),
svg#antivertical > circle.core:nth-of-type(6) {
  cx: var(--x3);
  cy: var(--y3);
}