4

Мой прошлый вопрос был задан не корректно так как отсуствовала сама возможность анимировать эту фигуру.

Изначально требовалось создать обычный символ/букву или слово.

В итоге надо получить вот такую штуку как на картинке.

введите сюда описание изображения

Что бы не усложнять я выбрал просто произвольную форму вместо буквы

В codepen мой svg _https://codepen.io/topicstarter/pen/YBVWKx так как количество символов не позволяют поместить код в сниппет.

Как видно из примера, там 393 ellipse, которые залиты градиентом.

У меня есть мысль, - сделать прорисовку этих эллипсов подобно, как делается анимация stroke-dasharray и stroke-dashoffset, как показано здесь, но это не возможно сделать.

Но есть возможность повторить эффект скрыв все стили для всех элементов одним разом [class*="st"] и написать с important нужный css и в keyframes отображать с определённым интервалом эти эллипсы.

Вопрос : каким образом можно это реализовать без большого кол-ва кода css ??

Теги ставлю любые так как не знаю каким образом это сделать.

2 ответа 2

6

Вариант анимации с окружностями, эллипсами

Скажу сразу, он меня не устроил, прежде всего своей ресурсо-затратностью. Уже при количестве элементов <200, а нужно ещё больше, ощущаются заметные задержки в отрисовке.
Вторая причина,- невыразительность, при любой форме пути.

Просто покажу, что получилось.

.container {
   width:100%;
   height:100%;
   }
 <div class="container" >
  <svg id="svg1" viewBox="0 0 900 450">
 
  <defs>
       <linearGradient id="LG2"  x2="10%" y2="100%">
    <stop offset="70%" stop-color="dodgerblue"/>
	<stop offset="100%" stop-color="yellowgreen"/>
  </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#LG2)" />
 <g transform="translate(0 -50)">
 <path id="let_M" d="m38 265s17-32 27-48c7-11 15-22 23-33 6-8 13-15 20-22 5-5 11-11 17-15 5-4 9-8 15-9 3-0.9 8-3 10 0 3 4-0.8 10-2 14-10 27-19 48-30 72-5 11-23 42-16 32 24-32 23-32 35-47 6-7 13-14 19-21 7-8 14-15 21-23 6-6 12-12 18-18 5-4 10-9 16-12 2-1 8-6 8-3-2 11-5 18-8 27-3 9-7 18-10 28-4 10-8 21-12 31-3 6-5 13-8 19-2 6-7 17-7 17" fill="none" stroke="#00f000"/>
 
  <text  font-size="14"   >
 <textPath id="result"    xlink:href="#let_M">
 <tspan >&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan  dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan  dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan  dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;  </tspan>
 <tspan dx="-15" > &#10677;  </tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15" >&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
  <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 <tspan dx="-15">&#10677;</tspan> 
 <tspan dx="-15">&#10677;</tspan>
 
 
<animate  dur="10s" repeatCount="1" attributeName="startOffset" begin="svg1.click" values="-100%;0%" fill="freeze"/> 
</textPath>
</text>			
</g> 
 <text x="100" y="40" font-size="24" fill="gold">Click me</text>		
</svg>  
</div> 

Вариант stroke-dashoffset

Пошаговая инструкция

  • В векторном редакторе набираем слово для анимации. Выбираем шрифт и размер: MV Boli 144px

введите сюда описание изображения

Для анимации этого слова нам необходима средняя линия (path) каждой буквы

Убираем в редакторе заливку букв, чтобы не мешала рисовать среднюю линию.

введите сюда описание изображения

  1. Инструментом Рисовать кривые Безье наносим узловые точки
  2. Выделяем контур вместе с узловыми точками
  3. Делаем узловые точки автоматически сглаженными
  4. Рычагами управления узловых точек придаем нужную форму кривой, чтобы повторяла внешние контуры буквы.

Цифры в описании выше, соответствуют цифрам на картинке

  • Вот так должно получиться после выполнения этих этапов

введите сюда описание изображения

  • Сохраняем файл в формате - оптимизированный SVG и забираем из него патчи средних линий букв.
  • С помощью скрипта узнаем для каждой буквы максимальную длину средней линии

<script> function TotalLength(){ var path = document.querySelector('#check'); var len = Math.round(path.getTotalLength() ); alert("Длина пути - " + len); }; </script>

Анимация для одной буквы

<style>
  .container {
   width:100%;
   height:100%;
   }
</style> 
 <div class="container" >
  <svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 950 400">
  
	<path id="let_M" stroke-dashoffset="614.5"  stroke-dasharray="614.5"
    d="m38 265s17-32 27-48c7-11 15-22 23-33 6-8 13-15 20-22 5-5 11-11 17-15 5-4 9-8 15-9 3-0.9 8-3 10 0 3 4-0.8 10-2 14-10 27-19 48-30 72-5 11-23 42-16 32 24-32 23-32 35-47 6-7 13-14 19-21 7-8 14-15 21-23 6-6 12-12 18-18 5-4 10-9 16-12 2-1 8-6 8-3-2 11-5 18-8 27-3 9-7 18-10 28-4 10-8 21-12 31-3 6-5 13-8 19-2 6-7 17-7 17" fill="none"  stroke-width="20" stroke="black" stroke-linecap="round">
  
       <animate id="an_M"
	      attributeName="stroke-dashoffset"
		  begin="0s"
          dur="5s"
		  values="614;0;0"
		  fill="freeze"
		  repeatCount="indefinite"
		  restart="whenNotActive" /> 
</path> 
 </svg>

Повторяем анимацию для остальных букв, добавляем градиенты, фильтры. Тут можно долго экспериментировать с украшательствами

Для перезапуска лучше перегрузить сниппет. Так как после окончания анимации для того, чтобы изображение осталось на экране применена заморозка изображения fill="freeze"

Ниже полный код.

Анимация начинается после клика мышкой

.container {
   width:100%;
   height:100%;
   }
<div class="container" >
  <svg id="svg1"  version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 950 400">
 
  <defs>
   <linearGradient id="LG">
    <stop offset="10%" stop-color="violet"/>
	<stop offset="20%" stop-color="crimson"/>
	<stop offset="100%" stop-color="yellow"/>
  </linearGradient> 
     <linearGradient id="LG2"  x2="10%" y2="100%">
    <stop offset="70%" stop-color="white"/>
	<stop offset="100%" stop-color="black"/>
  </linearGradient> 
  
   <linearGradient id="LG3"  x2="10%" y2="100%">
    <stop offset="0%" stop-color="white"/>
	<stop offset="30%" stop-color="black"/>
	<stop offset="60%" stop-color="white"/> 
	<stop offset="100%" stop-color="black"/>
  </linearGradient> 
   <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
            <feDropShadow dx="2" dy="4" stdDeviation="3"/>
          <feGaussianBlur stdDeviation="3"/>
     <feOffset  dx="2" dy="4"/>
     <feMerge>
       <feMergeNode/>
       <feMergeNode in="SourceGraphic"/>
     </feMerge>         
  </filter>
  </defs>
  
  <rect width="100%" height="100%" fill-opacity="1" fill="url(#LG2)"/>
   

 <g stroke-width="20" stroke-linecap="round" fill="none" stroke="url(#LG3)" filter="url(#shadow)">
 
 <path id="let_M" stroke-dashoffset="613.5"  stroke-dasharray="613.5"
    d="m38 265s17-32 27-48c7-11 15-22 23-33 6-8 13-15 20-22 5-5 11-11 17-15 5-4 9-8 15-9 3-0.9 8-3 10 0 3 4-0.8 10-2 14-10 27-19 48-30 72-5 11-23 42-16 32 24-32 23-32 35-47 6-7 13-14 19-21 7-8 14-15 21-23 6-6 12-12 18-18 5-4 10-9 16-12 2-1 8-6 8-3-2 11-5 18-8 27-3 9-7 18-10 28-4 10-8 21-12 31-3 6-5 13-8 19-2 6-7 17-7 17"  >
  
       <animate id="an_M"
	      attributeName="stroke-dashoffset"
		  begin="svg1.click"
          dur="2s"
		  values="614;0"
		  fill="freeze"
		  restart="whenNotActive" />
</path> 
  <path id="let_A_A" stroke-dashoffset="73"  stroke-dasharray="73"
       d="m257 203s15 0.3 23-0.2c7-0.5 15-2 22-3 9-1 27-5 27-5v-0.2" > 
  
    <animate id="an_A_A"
	    attributeName="stroke-dashoffset"
	    begin="an_A.end"
		dur="0.5s"
		values="73;0"
    	fill="freeze"
		restart="whenNotActive" /> 
 </path>	
	 <path id="let_A" stroke-dashoffset="302"  stroke-dasharray="302"
	     d="m222 255s19-36 30-53c5-8 11-15 18-23 6-7 13-14 21-21 6-5 12-11 19-15 5-3 10-6 16-6 5 0.05 13 1 15 6 4 8 0.9 15 0 22-1 8-3 16-6 24-3 8-7 16-11 24-4 8-7 15-11 23-4 7-11 21-11 21l-0.3 0.3">
	
    	<animate id="an_A"
		  attributeName="stroke-dashoffset"
		  begin="an_M.end"
		  dur="1s"
		  values="302;0"
		  fill="freeze"
		  restart="whenNotActive" /> 
	</path>
	<path id="let_K2" stroke-dashoffset="132"  stroke-dasharray="132"
	   d="m378 215s15-3 22-6c9-4 17-9 24-15 7-5 13-11 19-16 5-5 10-9 15-14 6-5 11-10 16-16 8-8 7-10 7-10">
	     <animate id="an_K2"
		  attributeName="stroke-dashoffset"
		  begin="an_A_A.end"
		  dur="0.5s"
		  values="132;0"
		  fill="freeze"
		  restart="whenNotActive" /> 
	 </path>  
	   
	<path id="let_K3" stroke-dashoffset="119"  stroke-dasharray="119"
	   d="m378 217s12-3 19-5c5-1 10-2 16-2 3 0.08 6 0.8 9 2 3 1 6 3 9 5 3 2 7 5 9 8 2 2 4 5 6 8 2 3 3 6 3 10 0.9 4 1 8 1 12 0.1 3-0.2 9-0.2 9">
	   
	     <animate id="an_K3"
		 attributeName="stroke-dashoffset"
	     begin="an_K2.end"
		 dur="0.5s"
		 values="119;0"
		 fill="freeze"
		 restart="whenNotActive" /> 
	</path>
  <path id="let_K1" stroke-dashoffset="123"  stroke-dasharray="123"
       d="m358 262s7-21 11-32c4-10 9-20 14-30 4-9 9-17 13-26 4-8 10-25 10-25">
	     <animate id="an_K1"
		 attributeName="stroke-dashoffset"
	     begin="an_K3.end"
		 dur="0.5s"
		 values="123;0"
		 fill="freeze"
		 restart="whenNotActive" /> 
	</path>	 
	   
	   
   <path id="let_S" stroke-dashoffset="312"  stroke-dasharray="312"
     d="m612 133s-8-2-12-3c-4-0.3-9 0.04-13 0.8-5 0.9-10 2-14 4-3 1-7 3-10 5-4 2-9 5-13 8-4 3-8 6-12 9-3 3-6 5-9 8-3 3-5 6-7 9-1 3-2 7-0.4 10 1 3 4 6 7 8 3 2 7 0.7 11 0.8 4 0.07 8-0.3 11-0.4 4-0.06 8-0.2 12 0.04 4 0.2 8-0.2 11 1 3 1 5 3 7 6 1 2 2 5 1 8-0.3 3-2 6-3 9-2 4-4 7-7 10-3 4-6 7-9 10-3 3-6 6-10 9-3 3-6 5-10 7-3 2-7 4-10 6-4 2-8 3-12 4-4 0.8-7 1-11 1-3 0.05-6-0.2-9-0.8-3-0.7-6-2-9-3-3-1-7-4-7-4">
	 
	  <animate id="an_S"
	     attributeName="stroke-dashoffset"
	     begin="an_K1.end"
		 dur="1s"
		 values="312;0"
		 fill="freeze"
		 restart="whenNotActive" /> 
  </path>
   <path id="let_I" stroke-dashoffset="141"  stroke-dasharray="141"
      d="m606 263s6-15 10-23c3-8 7-15 11-23 3-6 6-13 9-19 3-5 5-10 8-16 5-11 7-14 11-21 2-4 5-8 7-12 3-4 8-11 8-11">
	  
	     <animate id="an_I"
		 attributeName="stroke-dashoffset"
	     begin="an_S.end"
		 dur="0.5s"
		 values="141;0"
		 fill="freeze"
		 restart="whenNotActive" /> 
  </path>
   <path id="let_M2" stroke-dashoffset="598"  stroke-dasharray="598"
      d="m655 263s10-18 15-26c5-9 11-18 17-26 4-6 8-13 13-19 5-7 11-14 16-20 4-5 9-10 14-15 5-4 10-8 15-12 4-2 7-5 11-7 2-0.8 5-2 7-0.9 2 0.8 3 3 3 5 0.7 3-1 7-2 10-2 6-5 12-7 18-3 7-5 14-8 20-2 6-5 12-7 18-3 7-6 13-9 19-3 7-6 13-9 20-2 4-7 14-5 11 9-12 10-14 15-21 4-6 8-12 12-18 4-5 8-10 12-15 6-7 12-13 18-20 5-6 10-12 16-17 5-5 10-9 15-14 4-3 8-7 12-10 3-2 0 0 10-6 2-1 3-0.9 5 0.7 3 3-0.5 9-2 13-1 5-4 10-6 15-2 6-5 12-7 18-2 6-4 12-7 17-2 5-4 10-6 15-3 7-5 13-8 20-2 5-7 16-7 16">
  
       <animate id="an_M2"
	     attributeName="stroke-dashoffset"
	     begin="an_I.end"
		 dur="1s"
		 values="598;0"
		 fill="freeze"
		 restart="whenNotActive" /> 
  </path>  
      
</g>   
    <text x="100" y="40" font-size="36" fill="black">Click me</text>		
</svg>  
</div>

Live Demo

4
  • самый нижний не работает .... в 71.0.3578.98 (Официальная сборка), (64 бит) windows 10 pro license , лан наверно это не возможно ... 3 фев 2019 в 22:41
  • @ПавелВаршавский у меня всё работает везде, кроме IE У меня тоже десятка 3 фев 2019 в 22:45
  • Интересно, надо проэксперементировать с этим. Что за редактор? Не Illustrator явно, у меня жена в нём днями висит? Inkscape?
    – user262779
    5 фев 2019 в 19:04
  • @L.F.C. Да, здесь Inkscape Но в принципе любой редактор можно, где есть возможность рисовать кривые Безье 5 фев 2019 в 19:23
2

Я обратился за помощью к бывшему участнику ru.stackoverflow.com а он сам дуб дубом и он задал вопрос на q&a и благодаря этому ответу а точнее именно участнику 0xD34F решение этого вопроса оказалось доступным ...

Результат в примере но с градиентом :

let state = true;
document.querySelector('button').onclick = () => {
  state = !state;
  const items = document.querySelectorAll('circle');
  items.forEach((n, i) => {
    setTimeout(() => {
      n.classList[state ? 'add' : 'remove']('st0');
    }, (state ? items.length - i : i) * 3);
  });
};
circle {
  display: none;
}

circle.st0 {
  display: inline;
  stroke: #fff;
  stroke-width: 0px;
  fill: url(#linear);
}
<button>click me</button>

<svg id="parent" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1008 612"><style/><linearGradient id="linear"><stop offset="0%" stop-color="gold"/><stop offset="100%" stop-color="teal"/></linearGradient><circle class="st0" cx="120.5" cy="205.2" r="28.5"/><circle class="st0" cx="116.7" cy="203.7" r="28.5"/><circle class="st0" cx="112.9" cy="202.5" r="28.5"/><circle class="st0" cx="108.9" cy="201.3" r="28.5"/><circle class="st0" cx="105.1" cy="200" r="28.5"/><circle class="st0" cx="101.4" cy="198.6" r="28.5"/><circle class="st0" cx="97.9" cy="196.8" r="28.5"/><circle class="st0" cx="94.8" cy="194.6" r="28.5"/><circle class="st0" cx="91.2" cy="191.3" r="28.5"/><circle class="st0" cx="90" cy="188.5" r="28.5"/><circle class="st0" cx="88.6" cy="184.8" r="28.5"/><circle class="st0" cx="87.2" cy="181" r="28.5"/><circle class="st0" cx="85.8" cy="177.3" r="28.5"/><circle class="st0" cx="84.4" cy="173.5" r="28.5"/><circle class="st0" cx="83" cy="169.8" r="28.5"/><circle class="st0" cx="81.6" cy="166" r="28.5"/><circle class="st0" cx="81.2" cy="162.2" r="28.5"/><circle class="st0" cx="82" cy="158.2" r="28.5"/><circle class="st0" cx="82.9" cy="154.3" r="28.5"/><circle class="st0" cx="83.7" cy="150.4" r="28.5"/><circle class="st0" cx="84.5" cy="146.5" r="28.5"/><circle class="st0" cx="85.4" cy="142.6" r="28.5"/><circle class="st0" cx="86.2" cy="138.7" r="28.5"/><circle class="st0" cx="87.1" cy="134.8" r="28.5"/><circle class="st0" cx="87.9" cy="130.9" r="28.5"/><circle class="st0" cx="88.8" cy="127" r="28.5"/><circle class="st0" cx="89.6" cy="123.1" r="28.5"/><circle class="st0" cx="90.4" cy="119.2" r="28.5"/><circle class="st0" cx="91.3" cy="115.3" r="28.5"/><circle class="st0" cx="93.6" cy="112" r="28.5"/><circle class="st0" cx="96" cy="108.9" r="28.5"/><circle class="st0" cx="98.5" cy="105.7" r="28.5"/><circle class="st0" cx="100.9" cy="102.5" r="28.5"/><circle class="st0" cx="103.4" cy="99.4" r="28.5"/><circle class="st0" cx="105.8" cy="96.2" r="28.5"/><circle class="st0" cx="108.3" cy="93.1" r="28.5"/><circle class="st0" cx="110.7" cy="89.9" r="28.5"/><circle class="st0" cx="113.2" cy="86.8" r="28.5"/><circle class="st0" cx="115.6" cy="83.6" r="28.5"/><circle class="st0" cx="118.1" cy="80.5" r="28.5"/><circle class="st0" cx="120.6" cy="77.4" r="28.5"/><circle class="st0" cx="124" cy="75.2" r="28.5"/><circle class="st0" cx="127.4" cy="73.1" r="28.5"/><circle class="st0" cx="130.8" cy="71" r="28.5"/><circle class="st0" cx="134.1" cy="68.9" r="28.5"/><circle class="st0" cx="137.5" cy="66.7" r="28.5"/><circle class="st0" cx="140.9" cy="64.6" r="28.5"/><circle class="st0" cx="144.3" cy="62.5" r="28.5"/><circle class="st0" cx="147.7" cy="60.4" r="28.5"/><circle class="st0" cx="151.1" cy="58.3" r="28.5"/><circle class="st0" cx="154.6" cy="56.5" r="28.5"/><circle class="st0" cx="158.5" cy="55.6" r="28.5"/><circle class="st0" cx="162.4" cy="54.7" r="28.5"/><circle class="st0" cx="166.3" cy="53.8" r="28.5"/><circle class="st0" cx="170.2" cy="52.9" r="28.5"/><circle class="st0" cx="174.1" cy="52" r="28.5"/><circle class="st0" cx="178" cy="51.1" r="28.5"/><circle class="st0" cx="181.9" cy="50.2" r="28.5"/><circle class="st0" cx="185.8" cy="49.3" r="28.5"/><circle class="st0" cx="189.7" cy="48.4" r="28.5"/><circle class="st0" cx="193.6" cy="47.5" r="28.5"/><circle class="st0" cx="197.5" cy="46.6" r="28.5"/><circle class="st0" cx="201.4" cy="46.1" r="28.5"/><circle class="st0" cx="205.4" cy="46.7" r="28.5"/><circle class="st0" cx="209" cy="48.3" r="28.5"/><circle class="st0" cx="212.4" cy="50.3" r="28.5"/><circle class="st0" cx="215.8" cy="52.4" r="28.5"/><circle class="st0" cx="219.2" cy="54.5" r="28.5"/><circle class="st0" cx="222.6" cy="56.6" r="28.5"/><circle class="st0" cx="226.1" cy="58.7" r="28.5"/><circle class="st0" cx="229.5" cy="60.8" r="28.5"/><circle class="st0" cx="232.9" cy="62.9" r="28.5"/><circle class="st0" cx="236.3" cy="65" r="28.5"/><circle class="st0" cx="239.7" cy="67.1" r="28.5"/><circle class="st0" cx="242.7" cy="69.7" r="28.5"/><circle class="st0" cx="245.8" cy="72.2" r="28.5"/><circle class="st0" cx="248.8" cy="74.8" r="28.5"/><circle class="st0" cx="251.9" cy="77.4" r="28.5"/><circle class="st0" cx="254.9" cy="80" r="28.5"/><circle class="st0" cx="258" cy="82.5" r="28.5"/><circle class="st0" cx="261.1" cy="85.1" r="28.5"/><circle class="st0" cx="264.1" cy="87.7" r="28.5"/><circle class="st0" cx="267.2" cy="90.3" r="28.5"/><circle class="st0" cx="269.2" cy="93.6" r="28.5"/><circle class="st0" cx="270" cy="97.5" r="28.5"/><circle class="st0" cx="270.8" cy="101.4" r="28.5"/><circle class="st0" cx="271.7" cy="105.3" r="28.5"/><circle class="st0" cx="272.5" cy="109.2" r="28.5"/><circle class="st0" cx="273.4" cy="113.1" r="28.5"/><circle class="st0" cx="274.2" cy="117" r="28.5"/><circle class="st0" cx="275.1" cy="121" r="28.5"/><circle class="st0" cx="275.9" cy="124.9" r="28.5"/><circle class="st0" cx="276.7" cy="128.8" r="28.5"/><circle class="st0" cx="277.6" cy="132.7" r="28.5"/><circle class="st0" cx="278.4" cy="136.6" r="28.5"/><circle class="st0" cx="279.3" cy="140.5" r="28.5"/><circle class="st0" cx="280.1" cy="144.4" r="28.5"/><circle class="st0" cx="281" cy="148.3" r="28.5"/><circle class="st0" cx="281.8" cy="152.2" r="28.5"/><circle class="st0" cx="282.6" cy="156.1" r="28.5"/><circle class="st0" cx="283.5" cy="160" r="28.5"/><circle class="st0" cx="284.3" cy="163.9" r="28.5"/><circle class="st0" cx="284" cy="167.9" r="28.5"/><circle class="st0" cx="283.1" cy="171.7" r="28.5"/><circle class="st0" cx="282.2" cy="175.6" r="28.5"/><circle class="st0" cx="281.3" cy="179.5" r="28.5"/><circle class="st0" cx="280.4" cy="183.4" r="28.5"/><circle class="st0" cx="279.5" cy="187.3" r="28.5"/><circle class="st0" cx="278.6" cy="191.2" r="28.5"/><circle class="st0" cx="277.7" cy="195.1" r="28.5"/><circle class="st0" cx="276.8" cy="199" r="28.5"/><circle class="st0" cx="275.8" cy="202.9" r="28.5"/><circle class="st0" cx="274.9" cy="206.8" r="28.5"/><circle class="st0" cx="274" cy="210.7" r="28.5"/><circle class="st0" cx="273.1" cy="214.6" r="28.5"/><circle class="st0" cx="272.2" cy="218.5" r="28.5"/><circle class="st0" cx="271.3" cy="222.3" r="28.5"/><circle class="st0" cx="270.4" cy="226.2" r="28.5"/><circle class="st0" cx="269.5" cy="230.1" r="28.5"/><circle class="st0" cx="268.6" cy="234" r="28.5"/><circle class="st0" cx="267.7" cy="237.9" r="28.5"/><circle class="st0" cx="266.8" cy="241.8" r="28.5"/><circle class="st0" cx="265.9" cy="245.7" r="28.5"/><circle class="st0" cx="265" cy="249.6" r="28.5"/><circle class="st0" cx="264.1" cy="253.5" r="28.5"/><circle class="st0" cx="263.2" cy="257.4" r="28.5"/><circle class="st0" cx="262.3" cy="261.3" r="28.5"/><circle class="st0" cx="261.4" cy="265.2" r="28.5"/><circle class="st0" cx="260.5" cy="269.1" r="28.5"/><circle class="st0" cx="259.6" cy="273" r="28.5"/><circle class="st0" cx="258.7" cy="276.8" r="28.5"/><circle class="st0" cx="257.8" cy="280.7" r="28.5"/><circle class="st0" cx="256.9" cy="284.6" r="28.5"/><circle class="st0" cx="256" cy="288.5" r="28.5"/><circle class="st0" cx="255.1" cy="292.4" r="28.5"/><circle class="st0" cx="254.2" cy="296.3" r="28.5"/><circle class="st0" cx="253.3" cy="300.2" r="28.5"/><circle class="st0" cx="252.3" cy="304.1" r="28.5"/><circle class="st0" cx="251.4" cy="308" r="28.5"/><circle class="st0" cx="250.5" cy="311.9" r="28.5"/><circle class="st0" cx="249.7" cy="315.8" r="28.5"/><circle class="st0" cx="251" cy="319.4" r="28.5"/><circle class="st0" cx="254.5" cy="320.8" r="28.5"/><circle class="st0" cx="258.1" cy="318.9" r="28.5"/><circle class="st0" cx="260.9" cy="316.1" r="28.5"/><circle class="st0" cx="263.8" cy="313.3" r="28.5"/><circle class="st0" cx="266.6" cy="310.6" r="28.5"/><circle class="st0" cx="269.5" cy="307.8" r="28.5"/><circle class="st0" cx="272.4" cy="305" r="28.5"/><circle class="st0" cx="275.2" cy="302.2" r="28.5"/><circle class="st0" cx="278.1" cy="299.4" r="28.5"/><circle class="st0" cx="280.9" cy="296.6" r="28.5"/><circle class="st0" cx="283.8" cy="293.8" r="28.5"/><circle class="st0" cx="286.7" cy="291" r="28.5"/><circle class="st0" cx="289.5" cy="288.2" r="28.5"/><circle class="st0" cx="292" cy="285.1" r="28.5"/><circle class="st0" cx="294" cy="281.7" r="28.5"/><circle class="st0" cx="295.9" cy="278.2" r="28.5"/><circle class="st0" cx="297.9" cy="274.7" r="28.5"/><circle class="st0" cx="299.8" cy="271.2" r="28.5"/><circle class="st0" cx="301.8" cy="267.7" r="28.5"/><circle class="st0" cx="303.7" cy="264.2" r="28.5"/><circle class="st0" cx="305.7" cy="260.7" r="28.5"/><circle class="st0" cx="307.6" cy="257.2" r="28.5"/><circle class="st0" cx="309.6" cy="253.8" r="28.5"/><circle class="st0" cx="311.5" cy="250.3" r="28.5"/><circle class="st0" cx="313.5" cy="246.8" r="28.5"/><circle class="st0" cx="315.4" cy="243.3" r="28.5"/><circle class="st0" cx="317.4" cy="239.8" r="28.5"/><circle class="st0" cx="319.3" cy="236.3" r="28.5"/><circle class="st0" cx="321.3" cy="232.8" r="28.5"/><circle class="st0" cx="323.2" cy="229.3" r="28.5"/><circle class="st0" cx="325.2" cy="225.8" r="28.5"/><circle class="st0" cx="327.1" cy="222.4" r="28.5"/><circle class="st0" cx="329.1" cy="218.9" r="28.5"/><circle class="st0" cx="331" cy="215.4" r="28.5"/><circle class="st0" cx="333" cy="211.9" r="28.5"/><circle class="st0" cx="334.9" cy="208.4" r="28.5"/><circle class="st0" cx="336.9" cy="204.9" r="28.5"/><circle class="st0" cx="338.8" cy="201.4" r="28.5"/><circle class="st0" cx="341.1" cy="198.2" r="28.5"/><circle class="st0" cx="343.5" cy="194.9" r="28.5"/><circle class="st0" cx="345.8" cy="191.7" r="28.5"/><circle class="st0" cx="348.1" cy="188.4" r="28.5"/><circle class="st0" cx="350.4" cy="185.2" r="28.5"/><circle class="st0" cx="352.8" cy="181.9" r="28.5"/><circle class="st0" cx="355.1" cy="178.7" r="28.5"/><circle class="st0" cx="357.4" cy="175.4" r="28.5"/><circle class="st0" cx="359.7" cy="172.2" r="28.5"/><circle class="st0" cx="362.1" cy="168.9" r="28.5"/><circle class="st0" cx="364.4" cy="165.7" r="28.5"/><circle class="st0" cx="366.7" cy="162.4" r="28.5"/><circle class="st0" cx="369" cy="159.2" r="28.5"/><circle class="st0" cx="371.4" cy="155.9" r="28.5"/><circle class="st0" cx="373.7" cy="152.7" r="28.5"/><circle class="st0" cx="376" cy="149.4" r="28.5"/><circle class="st0" cx="378.4" cy="146.2" r="28.5"/><circle class="st0" cx="380.7" cy="142.9" r="28.5"/><circle class="st0" cx="383" cy="139.7" r="28.5"/><circle class="st0" cx="385.3" cy="136.4" r="28.5"/><circle class="st0" cx="387.7" cy="133.2" r="28.5"/><circle class="st0" cx="390" cy="129.9" r="28.5"/><circle class="st0" cx="392.3" cy="126.7" r="28.5"/><circle class="st0" cx="394.6" cy="123.4" r="28.5"/><circle class="st0" cx="397" cy="120.2" r="28.5"/><circle class="st0" cx="399.3" cy="116.9" r="28.5"/><circle class="st0" cx="401.6" cy="113.7" r="28.5"/><circle class="st0" cx="403.9" cy="110.4" r="28.5"/><circle class="st0" cx="406.3" cy="107.2" r="28.5"/><circle class="st0" cx="409.1" cy="104.4" r="28.5"/><circle class="st0" cx="412" cy="101.6" r="28.5"/><circle class="st0" cx="414.8" cy="98.8" r="28.5"/><circle class="st0" cx="417.7" cy="96" r="28.5"/><circle class="st0" cx="420.6" cy="93.2" r="28.5"/><circle class="st0" cx="424" cy="91" r="28.5"/><circle class="st0" cx="427.6" cy="91.9" r="28.5"/><circle class="st0" cx="429.4" cy="95.1" r="28.5"/><circle class="st0" cx="428" cy="99" r="28.5"/><circle class="st0" cx="426" cy="102.4" r="28.5"/><circle class="st0" cx="423.9" cy="105.8" r="28.5"/><circle class="st0" cx="421.8" cy="109.2" r="28.5"/><circle class="st0" cx="419.8" cy="112.6" r="28.5"/><circle class="st0" cx="417.7" cy="116.1" r="28.5"/><circle class="st0" cx="415.6" cy="119.5" r="28.5"/><circle class="st0" cx="413.6" cy="122.9" r="28.5"/><circle class="st0" cx="412.1" cy="126.6" r="28.5"/><circle class="st0" cx="410.9" cy="130.4" r="28.5"/><circle class="st0" cx="409.7" cy="134.2" r="28.5"/><circle class="st0" cx="408.5" cy="138" r="28.5"/><circle class="st0" cx="407.3" cy="141.9" r="28.5"/><circle class="st0" cx="406.1" cy="145.7" r="28.5"/><circle class="st0" cx="404.9" cy="149.5" r="28.5"/><circle class="st0" cx="403.7" cy="153.3" r="28.5"/><circle class="st0" cx="402.5" cy="157.1" r="28.5"/><circle class="st0" cx="401.3" cy="160.9" r="28.5"/><circle class="st0" cx="400.1" cy="164.7" r="28.5"/><circle class="st0" cx="398.9" cy="168.5" r="28.5"/><circle class="st0" cx="397.7" cy="172.4" r="28.5"/><circle class="st0" cx="396.5" cy="176.2" r="28.5"/><circle class="st0" cx="395.3" cy="180" r="28.5"/><circle class="st0" cx="394.2" cy="183.8" r="28.5"/><circle class="st0" cx="393" cy="187.6" r="28.5"/><circle class="st0" cx="391.8" cy="191.4" r="28.5"/><circle class="st0" cx="390.6" cy="195.2" r="28.5"/><circle class="st0" cx="389.4" cy="199" r="28.5"/><circle class="st0" cx="388.2" cy="202.9" r="28.5"/><circle class="st0" cx="387.4" cy="206.2" r="28.5"/><circle class="st0" cx="386.7" cy="209.4" r="28.5"/><circle class="st0" cx="386" cy="212.9" r="28.5"/><circle class="st0" cx="385.2" cy="216.5" r="28.5"/><circle class="st0" cx="384.4" cy="220.4" r="28.5"/><circle class="st0" cx="383.6" cy="224.4" r="28.5"/><circle class="st0" cx="382.7" cy="228.6" r="28.5"/><circle class="st0" cx="381.8" cy="232.8" r="28.5"/><circle class="st0" cx="380.9" cy="237.2" r="28.5"/><circle class="st0" cx="380" cy="241.5" r="28.5"/><circle class="st0" cx="379.1" cy="245.9" r="28.5"/><circle class="st0" cx="378.2" cy="250.3" r="28.5"/><circle class="st0" cx="377.3" cy="254.7" r="28.5"/><circle class="st0" cx="376.4" cy="259" r="28.5"/><circle class="st0" cx="375.5" cy="263.2" r="28.5"/><circle class="st0" cx="374.7" cy="267.4" r="28.5"/><circle class="st0" cx="373.8" cy="271.3" r="28.5"/><circle class="st0" cx="373" cy="275.1" r="28.5"/><circle class="st0" cx="372.3" cy="278.8" r="28.5"/><circle class="st0" cx="371.6" cy="282.2" r="28.5"/><circle class="st0" cx="370.9" cy="285.4" r="28.5"/><circle class="st0" cx="370.2" cy="288.3" r="28.5"/><circle class="st0" cx="369.6" cy="291.5" r="28.5"/><circle class="st0" cx="368.9" cy="294.7" r="28.5"/><circle class="st0" cx="368.1" cy="298.2" r="28.5"/><circle class="st0" cx="367.3" cy="301.7" r="28.5"/><circle class="st0" cx="366.5" cy="305.4" r="28.5"/><circle class="st0" cx="365.7" cy="309.2" r="28.5"/><circle class="st0" cx="364.8" cy="313.1" r="28.5"/><circle class="st0" cx="364" cy="317.1" r="28.5"/><circle class="st0" cx="363.1" cy="321.2" r="28.5"/><circle class="st0" cx="362.1" cy="325.3" r="28.5"/><circle class="st0" cx="361.2" cy="329.6" r="28.5"/><circle class="st0" cx="360.3" cy="333.8" r="28.5"/><circle class="st0" cx="359.3" cy="338.2" r="28.5"/><circle class="st0" cx="358.3" cy="342.5" r="28.5"/><circle class="st0" cx="357.4" cy="346.9" r="28.5"/><circle class="st0" cx="356.4" cy="351.3" r="28.5"/><circle class="st0" cx="355.4" cy="355.7" r="28.5"/><circle class="st0" cx="354.5" cy="360" r="28.5"/><circle class="st0" cx="353.5" cy="364.4" r="28.5"/><circle class="st0" cx="352.5" cy="368.7" r="28.5"/><circle class="st0" cx="351.6" cy="373" r="28.5"/><circle class="st0" cx="350.6" cy="377.3" r="28.5"/><circle class="st0" cx="349.7" cy="381.4" r="28.5"/><circle class="st0" cx="348.8" cy="385.5" r="28.5"/><circle class="st0" cx="347.9" cy="389.6" r="28.5"/><circle class="st0" cx="347" cy="393.5" r="28.5"/><circle class="st0" cx="346.2" cy="397.3" r="28.5"/><circle class="st0" cx="345.3" cy="401" r="28.5"/><circle class="st0" cx="344.5" cy="404.6" r="28.5"/><circle class="st0" cx="343.8" cy="408.1" r="28.5"/><circle class="st0" cx="343" cy="411.4" r="28.5"/><circle class="st0" cx="342.3" cy="414.6" r="28.5"/><circle class="st0" cx="341.6" cy="417.7" r="28.5"/><circle class="st0" cx="339.3" cy="420.9" r="28.5"/><circle class="st0" cx="336.8" cy="424" r="28.5"/><circle class="st0" cx="334.2" cy="427" r="28.5"/><circle class="st0" cx="331.7" cy="430.1" r="28.5"/><circle class="st0" cx="329.1" cy="433.2" r="28.5"/><circle class="st0" cx="326.5" cy="436.2" r="28.5"/><circle class="st0" cx="324" cy="439.3" r="28.5"/><circle class="st0" cx="321.4" cy="442.4" r="28.5"/><circle class="st0" cx="318.9" cy="445.4" r="28.5"/><circle class="st0" cx="316.3" cy="448.5" r="28.5"/><circle class="st0" cx="313.7" cy="451.6" r="28.5"/><circle class="st0" cx="311.2" cy="454.7" r="28.5"/><circle class="st0" cx="308.6" cy="457.7" r="28.5"/><circle class="st0" cx="306.1" cy="460.8" r="28.5"/><circle class="st0" cx="303.5" cy="463.9" r="28.5"/><circle class="st0" cx="300.9" cy="466.9" r="28.5"/><circle class="st0" cx="298.4" cy="470" r="28.5"/><circle class="st0" cx="295.8" cy="473.1" r="28.5"/><circle class="st0" cx="292.9" cy="475.8" r="28.5"/><circle class="st0" cx="289.9" cy="478.5" r="28.5"/><circle class="st0" cx="286.9" cy="481.1" r="28.5"/><circle class="st0" cx="284" cy="483.8" r="28.5"/><circle class="st0" cx="281" cy="486.4" r="28.5"/><circle class="st0" cx="278" cy="489.1" r="28.5"/><circle class="st0" cx="275" cy="491.7" r="28.5"/><circle class="st0" cx="272" cy="494.3" r="28.5"/><circle class="st0" cx="269" cy="497" r="28.5"/><circle class="st0" cx="266" cy="499.6" r="28.5"/><circle class="st0" cx="263" cy="502.3" r="28.5"/><circle class="st0" cx="260" cy="504.9" r="28.5"/><circle class="st0" cx="257" cy="507.6" r="28.5"/><circle class="st0" cx="254" cy="510.2" r="28.5"/><circle class="st0" cx="250.6" cy="512.2" r="28.5"/><circle class="st0" cx="246.9" cy="513.7" r="28.5"/><circle class="st0" cx="243.2" cy="515.3" r="28.5"/><circle class="st0" cx="239.5" cy="516.8" r="28.5"/><circle class="st0" cx="235.8" cy="518.3" r="28.5"/><circle class="st0" cx="232.1" cy="519.9" r="28.5"/><circle class="st0" cx="228.4" cy="521.4" r="28.5"/><circle class="st0" cx="224.7" cy="522.9" r="28.5"/><circle class="st0" cx="221.1" cy="524.5" r="28.5"/><circle class="st0" cx="217.4" cy="526" r="28.5"/><circle class="st0" cx="213.7" cy="527.5" r="28.5"/><circle class="st0" cx="210" cy="529.1" r="28.5"/><circle class="st0" cx="206.3" cy="530.6" r="28.5"/><circle class="st0" cx="202.6" cy="532.1" r="28.5"/><circle class="st0" cx="198.9" cy="533.7" r="28.5"/><circle class="st0" cx="195.2" cy="535.2" r="28.5"/><circle class="st0" cx="191.5" cy="536.7" r="28.5"/><circle class="st0" cx="187.7" cy="537.7" r="28.5"/><circle class="st0" cx="183.8" cy="538.5" r="28.5"/><circle class="st0" cx="179.8" cy="539.3" r="28.5"/><circle class="st0" cx="175.9" cy="540.1" r="28.5"/><circle class="st0" cx="172" cy="541" r="28.5"/><circle class="st0" cx="168.1" cy="541.8" r="28.5"/><circle class="st0" cx="164.2" cy="542.6" r="28.5"/><circle class="st0" cx="160.3" cy="543.4" r="28.5"/><circle class="st0" cx="156.4" cy="544.2" r="28.5"/><circle class="st0" cx="152.5" cy="545" r="28.5"/><circle class="st0" cx="148.5" cy="545.8" r="28.5"/><circle class="st0" cx="144.6" cy="546.6" r="28.5"/><circle class="st0" cx="140.7" cy="547.5" r="28.5"/><circle class="st0" cx="136.8" cy="548.3" r="28.5"/><circle class="st0" cx="132.9" cy="549.1" r="28.5"/><circle class="st0" cx="129" cy="549.8" r="28.5"/><circle class="st0" cx="125.1" cy="548.9" r="28.5"/><circle class="st0" cx="121.3" cy="547.6" r="28.5"/><circle class="st0" cx="117.5" cy="546.4" r="28.5"/><circle class="st0" cx="113.7" cy="545.1" r="28.5"/><circle class="st0" cx="110" cy="543.8" r="28.5"/><circle class="st0" cx="106.2" cy="542.6" r="28.5"/><circle class="st0" cx="102.4" cy="541.3" r="28.5"/><circle class="st0" cx="98.6" cy="540" r="28.5"/><circle class="st0" cx="94.8" cy="538.8" r="28.5"/><circle class="st0" cx="91" cy="537.5" r="28.5"/><circle class="st0" cx="87.2" cy="536.2" r="28.5"/><circle class="st0" cx="83.4" cy="534.9" r="28.5"/><circle class="st0" cx="80.7" cy="532.2" r="28.5"/><circle class="st0" cx="78.6" cy="528.8" r="28.5"/><circle class="st0" cx="76.5" cy="525.4" r="28.5"/><circle class="st0" cx="74.4" cy="522" r="28.5"/><circle class="st0" cx="72.3" cy="518.5" r="28.5"/><circle class="st0" cx="70.2" cy="515.1" r="28.5"/><circle class="st0" cx="68.1" cy="511.7" r="28.5"/><circle class="st0" cx="66.6" cy="508.1" r="28.5"/><circle class="st0" cx="67.3" cy="504.2" r="28.5"/><circle class="st0" cx="68.3" cy="500.3" r="28.5"/><circle class="st0" cx="69.2" cy="496.5" r="28.5"/><circle class="st0" cx="70.2" cy="492.6" r="28.5"/><circle class="st0" cx="71.1" cy="488.7" r="28.5"/><circle class="st0" cx="72.1" cy="484.8" r="28.5"/><circle class="st0" cx="73.5" cy="481.1" r="28.5"/><circle class="st0" cx="76.6" cy="478.6" r="28.5"/><circle class="st0" cx="79.7" cy="476.1" r="28.5"/><circle class="st0" cx="82.8" cy="473.6" r="28.5"/><circle class="st0" cx="86" cy="471.1" r="28.5"/><circle class="st0" cx="89.1" cy="468.6" r="28.5"/><circle class="st0" cx="92.2" cy="466.1" r="28.5"/><circle class="st0" cx="95.3" cy="463.7" r="28.5"/><circle class="st0" cx="98.5" cy="461.2" r="28.5"/><circle class="st0" cx="101.6" cy="458.7" r="28.5"/><circle class="st0" cx="104.7" cy="456.2" r="28.5"/><circle class="st0" cx="107.9" cy="453.7" r="28.5"/><circle class="st0" cx="111" cy="451.2" r="28.5"/><circle class="st0" cx="114.1" cy="448.7" r="28.5"/><circle class="st0" cx="117.2" cy="446.2" r="28.5"/><circle class="st0" cx="120.4" cy="443.8" r="28.5"/><circle class="st0" cx="123.5" cy="441.3" r="28.5"/><circle class="st0" cx="127.1" cy="439.5" r="28.5"/><circle class="st0" cx="130.6" cy="437.6" r="28.5"/><circle class="st0" cx="134.1" cy="435.7" r="28.5"/><circle class="st0" cx="137.7" cy="433.9" r="28.5"/><circle class="st0" cx="141.2" cy="432" r="28.5"/><circle class="st0" cx="144.8" cy="430.2" r="28.5"/><circle class="st0" cx="148.3" cy="428.3" r="28.5"/><circle class="st0" cx="151.8" cy="426.4" r="28.5"/><circle class="st0" cx="155.4" cy="424.6" r="28.5"/><circle class="st0" cx="158.9" cy="422.7" r="28.5"/><circle class="st0" cx="162.4" cy="420.8" r="28.5"/><circle class="st0" cx="166" cy="419" r="28.5"/><circle class="st0" cx="169.5" cy="417.1" r="28.5"/><circle class="st0" cx="173" cy="415.3" r="28.5"/><circle class="st0" cx="176.6" cy="413.4" r="28.5"/><circle class="st0" cx="180.1" cy="411.5" r="28.5"/><circle class="st0" cx="183.6" cy="409.7" r="28.5"/><circle class="st0" cx="187.2" cy="407.8" r="28.5"/><circle class="st0" cx="190.7" cy="406" r="28.5"/><circle class="st0" cx="194.3" cy="404.1" r="28.5"/><circle class="st0" cx="197.8" cy="402.2" r="28.5"/><circle class="st0" cx="201.3" cy="400.4" r="28.5"/><circle class="st0" cx="204.9" cy="398.5" r="28.5"/><circle class="st0" cx="208.5" cy="396.9" r="28.5"/><circle class="st0" cx="212.3" cy="395.5" r="28.5"/><circle class="st0" cx="216" cy="394.1" r="28.5"/><circle class="st0" cx="219.8" cy="392.8" r="28.5"/><circle class="st0" cx="223.5" cy="391.4" r="28.5"/><circle class="st0" cx="227.3" cy="390" r="28.5"/><circle class="st0" cx="231" cy="388.6" r="28.5"/><circle class="st0" cx="234.8" cy="387.2" r="28.5"/><circle class="st0" cx="238.5" cy="385.8" r="28.5"/><circle class="st0" cx="242.3" cy="384.5" r="28.5"/><circle class="st0" cx="246" cy="383.1" r="28.5"/><circle class="st0" cx="249.8" cy="381.7" r="28.5"/><circle class="st0" cx="253.5" cy="380.3" r="28.5"/><circle class="st0" cx="257.3" cy="378.9" r="28.5"/><circle class="st0" cx="261" cy="377.6" r="28.5"/><circle class="st0" cx="264.8" cy="376.2" r="28.5"/><circle class="st0" cx="268.5" cy="374.8" r="28.5"/><circle class="st0" cx="272.3" cy="373.4" r="28.5"/><circle class="st0" cx="276" cy="372" r="28.5"/><circle class="st0" cx="279.8" cy="370.7" r="28.5"/><circle class="st0" cx="283.5" cy="369.3" r="28.5"/><circle class="st0" cx="287.3" cy="367.9" r="28.5"/><circle class="st0" cx="291" cy="366.5" r="28.5"/><circle class="st0" cx="294.8" cy="365.1" r="28.5"/><circle class="st0" cx="298.5" cy="363.8" r="28.5"/><circle class="st0" cx="302.3" cy="362.4" r="28.5"/><circle class="st0" cx="306" cy="361" r="28.5"/><circle class="st0" cx="309.8" cy="359.6" r="28.5"/><circle class="st0" cx="313.5" cy="358.2" r="28.5"/><circle class="st0" cx="317.3" cy="356.9" r="28.5"/><circle class="st0" cx="321" cy="355.5" r="28.5"/><circle class="st0" cx="324.8" cy="354.1" r="28.5"/><circle class="st0" cx="328.5" cy="352.7" r="28.5"/><circle class="st0" cx="332.3" cy="351.3" r="28.5"/><circle class="st0" cx="336" cy="349.9" r="28.5"/><circle class="st0" cx="339.8" cy="348.6" r="28.5"/><circle class="st0" cx="343.5" cy="347.2" r="28.5"/><circle class="st0" cx="347.2" cy="345.8" r="28.5"/><circle class="st0" cx="350" cy="344.5" r="28.5"/><circle class="st0" cx="353.2" cy="343.2" r="28.5"/><circle class="st0" cx="356.8" cy="341.9" r="28.5"/><circle class="st0" cx="360.6" cy="340.7" r="28.5"/><circle class="st0" cx="364.7" cy="339.4" r="28.5"/><circle class="st0" cx="369" cy="338.1" r="28.5"/><circle class="st0" cx="373.5" cy="336.8" r="28.5"/><circle class="st0" cx="378.1" cy="335.4" r="28.5"/><circle class="st0" cx="382.7" cy="334" r="28.5"/><circle class="st0" cx="387.3" cy="332.5" r="28.5"/><circle class="st0" cx="391.9" cy="331" r="28.5"/><circle class="st0" cx="396.4" cy="329.5" r="28.5"/><circle class="st0" cx="400.8" cy="327.8" r="28.5"/><circle class="st0" cx="405" cy="326.1" r="28.5"/><circle class="st0" cx="408.9" cy="324.3" r="28.5"/><circle class="st0" cx="412.6" cy="322.4" r="28.5"/><circle class="st0" cx="415.9" cy="320.4" r="28.5"/><circle class="st0" cx="418.8" cy="318.3" r="28.5"/><circle class="st0" cx="421.4" cy="316.1" r="28.5"/><circle class="st0" cx="423.4" cy="313.8" r="28.5"/><circle class="st0" cx="424.9" cy="311.3" r="28.5"/><circle class="st0" cx="425.9" cy="308.7" r="28.5"/><circle class="st0" cx="426.2" cy="305.9" r="28.5"/></svg>

Отдельное спасибо Не нашему участнику 0xD34F и нашему участнику AlexandrTT Здесь всё равно отображается stroke в codepen нет : https://codepen.io/topicstarter/pen/GzEmXr https://codepen.io/topicstarter/pen/ZwyKzr

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.