- var particles = 300 /*make sure to synchronize this number with what you have in SCSS*/
.archimedean
  - for (var i=0; i<particles; i++) {
  .arm
  - }

@use "sass:math";
$particles: 300; /*make sure to synchronize this number with what you have in Pug */

body {
  margin: 0;
  background-color: #000;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: .95vmin;
}

.logarithmic {
  position: relative;
  display: flex;
  height: 100em;
  aspect-ratio: 1;  
  justify-content: center;
}

.arm { /* the single joint depositing the dots */
  --particles: #{$particles};
  --loops: 5;
  position: absolute;
  bottom: 50em;
  height: calc(50em*var(--shrinkage));
  width: 5em;
  transform-origin: bottom;
  rotate: calc(360deg/var(--particles)*var(--turnStep)*var(--loops));
}

.arm::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  aspect-ratio: 1;
  --increment: calc(360deg/var(--particles)*var(--loops));
  --color: calc(var(--turnStep)*var(--increment));
  background-image: radial-gradient(at 33% 33%, white, hsl(var(--color) 100% 50%) 50%);
  border-radius: 50%;
  scale: var(--shrinkage);
  box-shadow: inset -1em -1em 1em #000b;
  border-right: 1px solid var(--color);
  rotate: calc(-360deg/var(--particles)*var(--turnStep)*var(--loops));
}

@for $i from 1 through $particles { /* in our case that's 300*/
  .arm:nth-child(#{$i}) {
    --turnStep: #{$i - 1};
    --shrinkage: #{ math.pow(.99, $i - 1) };
  }
}

/*
A detailed tutorial on how to create this on my blog:
https://dev.to/mackfitz/particles-spiral-patterns-in-css-part-iv-g4b
https://mackfitz.hashnode.dev/particles-spiral-patterns-in-css-part-iv
*/