Анимация атома из слов

Рейтинг: 0Ответов: 1Опубликовано: 17.07.2023

Помогите пожалуйста, сделать похожую анимацию, только за место кружков будут слова.

<svg width="100%" height="100%" viewBox="0 100 210 297" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     
    <path id="path" d="m71.062636 139.92242c-14.55985 9.68339-7.492636 16.22044-7.492636 16.22044 10.246628 8.52181 41.9927 11.48821 62.35494 8.97865 0.37127-0.0458-0.0516-0.11729 0.31323-0.17721 6.25449-1.02743 29.07707-9.26261 20.84864-20.96068-10.1474-14.4262-62.425692-13.10521-76.024174-4.0612z" fill="none" stroke="#003f3a" stroke-width="1"/>
      
    <path id="path1" d="m131.91368 174.91369c0 17.53504-8.97693 14.55208-8.97693 14.55208-15.72153-3.83816-33.551167-29.49286-40.348961-48.38095-0.126682-0.35199 0.126926-0.0176-0.0134-0.35964-2.405628-5.86406-7.386524-29.08997 6.911467-28.74452 16.016924 0.38699 42.427824 45.39799 42.427824 62.93303z" fill="none"  stroke-width="1" stroke="#003f3a"/>
    
    <path id="path2"  d="m79.366467 174.53571c0 17.53504 8.97693 14.55208 8.97693 14.55208 15.721523-3.83816 33.551163-29.49286 40.348953-48.38095 0.12669-0.35199-0.12692-0.0176 0.0134-0.35964 2.40563-5.86406 7.38653-29.08997-6.91146-28.74452-16.01693 0.38699-42.427823 45.39799-42.427823 62.93303z" fill="none" stroke="#003f3a" stroke-width="1"/>
       
    
      
    <path transform="translate(-120,-133)"d="m125.62053 133.7262a3.3571483 3.1681601 0 0 1-3.35713 3.16815 3.3571483 3.1681601 0 0 1-3.35716-3.16815 3.3571483 3.1681601 0 0 1 3.35716-3.16816 3.3571483 3.1681601 0 0 1 3.35713 3.16816z" fill="#800000">
       <animateMotion dur="10s" repeatCount="indefinite">
           <mpath xlink:href="#path"/>
       </animateMotion>   
    </path>
    
      <path transform="translate(-88,-140)" d="m94.059517 143.1756a3.3571483 3.1681601 0 0 1-3.35713 3.16815 3.3571483 3.1681601 0 0 1-3.357159-3.16815 3.3571483 3.1681601 0 0 1 3.357159-3.16816 3.3571483 3.1681601 0 0 1 3.35713 3.16816z" fill="#800000">
       <animateMotion dur="10s" repeatCount="indefinite">
           <mpath xlink:href="#path1"/>
       </animateMotion>       
      </path>
      
      <path transform="translate(-113,-184)" d="m117.87202 185.50893a3.3571483 3.1681601 0 0 1-3.35713 3.16815 3.3571483 3.1681601 0 0 1-3.35716-3.16815 3.3571483 3.1681601 0 0 1 3.35716-3.16816 3.3571483 3.1681601 0 0 1 3.35713 3.16816z" fill="#800000">
        <animateMotion dur="10s" repeatCount="indefinite">
           <mpath xlink:href="#path2"/>
       </animateMotion>      
      </path>
    </svg>

svg анимация
Источник: Stack Overflow на русском

Ответы

▲ 1Принят
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>atom</title>
</head>
<body>
<svg width="100%" height="100%" viewBox="0 100 210 297" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 
<path id="path" d="m71.062636 139.92242c-14.55985 9.68339-7.492636 16.22044-7.492636 16.22044 10.246628 8.52181 41.9927 11.48821 62.35494 8.97865 0.37127-0.0458-0.0516-0.11729 0.31323-0.17721 6.25449-1.02743 29.07707-9.26261 20.84864-20.96068-10.1474-14.4262-62.425692-13.10521-76.024174-4.0612z" fill="none" stroke="#003f3a" stroke-width="1"/>
<text font-size="10" fill="#000000">
<textPath xlink:href="#path" side="left"> Lorem
<animate attributeName="startOffset" from="0%" to="100%" dur="3s" repeatCount="indefinite"/>
</textPath>
</text>
  
<path id="path1" d="m131.91368 174.91369c0 17.53504-8.97693 14.55208-8.97693 14.55208-15.72153-3.83816-33.551167-29.49286-40.348961-48.38095-0.126682-0.35199 0.126926-0.0176-0.0134-0.35964-2.405628-5.86406-7.386524-29.08997 6.911467-28.74452 16.016924 0.38699 42.427824 45.39799 42.427824 62.93303z" fill="none"  stroke-width="1" stroke="#003f3a"/>
<text font-size="10" fill="#000000">  
<textPath xlink:href="#path1" side="left">ipsum
<animate attributeName="startOffset" from="0%" to="100%" dur="3s" repeatCount="indefinite"/>
</textPath>
</text>

<path id="path2"  d="m79.366467 174.53571c0 17.53504 8.97693 14.55208 8.97693 14.55208 15.721523-3.83816 33.551163-29.49286 40.348953-48.38095 0.12669-0.35199-0.12692-0.0176 0.0134-0.35964 2.40563-5.86406 7.38653-29.08997-6.91146-28.74452-16.01693 0.38699-42.427823 45.39799-42.427823 62.93303z" fill="none" stroke="#003f3a" stroke-width="1"/>
<text font-size="10" fill="#000000">  
<textPath xlink:href="#path2" side="left">dolor
<animate attributeName="startOffset" from="0%" to="100%" dur="3s" repeatCount="indefinite"/>
</textPath>
</text>
</svg>
</body>
</html>

P.s. на всякий случай загрузила код и в codepen. Сюда с телефона не совсем удобно теги переписывать. Извиняюсь). Полагаю, Вы хотели увидеть такую анимацию. Ну, или похожую) https://codepen.io/darinka-poznyak/pen/yLQjGVr