origami1024

Можно хексом, если заменить решетку на %23
stroke='%23f00'

1. У тебя там path калечный какой-то. Пришлось половину точек выкинуть.
2. Точки пути таким образом как ты тут пытаешься не анимируются. Тут нужно использовать stroke-dasharray и stroke-dashoffset.
3. Вот тебе пример из твоего path, ковыряйся.

1) Линии через path.
2) Круги на местах соединений - через svg элемент<marker>.
3) Анимацию тегом animate.

<svg viewBox="0 0 140 140" width=100vw height=100vh>
  <defs>
    <marker id="markerCircle" markerWidth="8" markerHeight="8" refX="5" refY="5">
        <circle cx=5 cy=5 r=3 />
    </marker>
  </defs>
  <path d="M20 20 L30 40 L70 20 L90 80" fill="none" stroke="red" marker-start=url(#markerCircle) marker-mid=url(#markerCircle) marker-end=url(#markerCircle)>
    <animate 
           attributeName="d"
           values="M20 20 L30 40 L70 20 L90 80;
               M20 40 L30 10 L70 60 L90 110;
               M10 10 L15 80 L120 70 L150 75;
               M20 20 L30 40 L70 20 L90 80"
           dur="20s"
           repeatCount="indefinite"
           />
  </path>
</svg>

UPD: круги через svg marker

Вот вариант

Что-то он маску не хавает.
Если выкинуть маску, то работает. И весит меньше)

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
	<path d="M11.9826 4C9.93339 4 7.90628 4.80442 6.34377 6.36692C3.21874 9.49203 3.21874 14.5544 6.34377 17.6794C9.46879 20.8044 14.5312 20.8044 17.6562 17.6794C20.7813 14.5544 20.7813 9.49203 17.6562 6.36692C16.0937 4.80442 14.0318 4 11.9826 4V4ZM11.9826 5.11384C13.7441 5.11384 15.5053 5.78232 16.8557 7.13269C19.5563 9.83331 19.5563 14.1782 16.8557 16.8788C14.155 19.5795 9.81018 19.5795 7.10953 16.8788C4.40889 14.1782 4.40889 9.83331 7.10953 7.13269C8.45986 5.78232 10.2211 5.11384 11.9826 5.11384V5.11384ZM9.37203 8.03768L8.04934 9.39518L10.6947 12.0057L8.04934 14.6511L9.37203 15.9738L12.0174 13.3632L14.628 15.939L15.9507 14.6163L13.3401 12.0057L15.9507 9.39518L14.628 8.07249L12.0174 10.6831L9.37203 8.03768Z" fill="black"/>
</svg>

В самом начале у тебя идет

<svg viewbox="0 0 10 6.7" xmlns="http://www.w3.org/2000/svg">

Здесь в параметре viewbox задаются внутренние координаты (от 0 до 10 по оси X) и от (0 до 6.7 по оси Y).
Тоесть, например, по оси X твои 170px переводятся во внутренних координатах в 11 единиц(от 0 до 10).
Координаты у элементов внутри svg задаются в этих внутренних единицах.

Например, вот первый элемент в маске (прямоугольник):

<rect x=1 y=1 width="8" height="5" fill="white"></rect>

Он начинается по x с координаты 1 (не 0) и по y тоже с не нулевой координаты.
Width - длина в этих внутр единицах, и тд. Поизменяй эти цифры, посмотри что измениться, сам всё поймешь.
У кругов в маске (circle) координаты и радиус также заданы.

Если есть возможность на CSS управлять этими размерами было бы супер.

Да, просто даешь элементам внутри svg имя класса или id, чтобы выглядело вот так (class="circle1"):

<circle class="circle1" cx="9" cy="1" r="1" fill="black"></circle>

И потом в css:

.circle1{
  r: 3;
  cx: 5;
}

Вота, пофиксил твои круги, нарисованные через path,
У тебя два верхних path с названиями oval и oval2 съезжали на 80 точек вниз
Изспользовал transform="translate(0,-80)" в двух этих путях

https://codepen.io/origami1024/pen/PooNdGz

правда вот эти овал 3-12 вообще не показываются, они и должны быть невидимыми? Если принцип с транслэйтом понятен, сам уже доделай, ато мне нужно идти петь караоке срочно(

Вот, я быстрее чем ты сделал, лол


Еще и с анимациями, если нужно