@LastGeneral

Как сделать такой SVG эффект?

Хочу повторить такой же эффект как на этом сайте:
https://www.wappalyzer.com/technologies/linksmart
5dbd74a038857399736739.png
Как это возможно сделать?
  • Вопрос задан
  • 587 просмотров
Решения вопроса 2
origami1024
@origami1024
went out for a night walk
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
Ответ написан
Комментировать
RAX7
@RAX7
Держи, вроде похоже получилось
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AlexanderMarginal
@AlexanderMarginal
Frontend web developer
Particle js библиотека готовая
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы