Каталог / Схема связей с бегущими импульсами
Схема связей с бегущими импульсами
Центральная плитка-иконка, вокруг — узлы: цветные плитки с глифами и аватары-заглушки. Между ними прорисовываются линии, по которым бегут точки-импульсы.
Демо
Как устроено
Вся схема — один SVG. Позиции узлов считаются в JS и задаются атрибутами transform, линии — пути с pathLength=100: прорисовка идёт CSS-переходом stroke-dashoffset по классу is-on. Узлы и хаб появляются по таймерам тоже классами, цвета — через CSS-переменные на контейнере и токены кита, поэтому inline-стилей нет и строгий CSP не мешает. Импульсы — маленькие круги, которые Web Animations API ведёт по точкам ломаной с долями по длине сегментов; прозрачность гасится на концах. Аватары — градиентные заглушки через defs с уникальными id. Без DOM mount ничего не делает. При prefers-reduced-motion (или data-motion=off на html) схема сразу прорисована, импульсы не бегут.
Параметры
| Название | Ключ | Тип | По умолчанию | Значения |
|---|---|---|---|---|
| Число узлов | count | number | 6 | 2…8 |
| Радиус схемы | radius | number | 210 | 120…320 px |
| Время пробега импульса | pulseSpeed | number | 2200 | 600…8000 мс |
| Цвет линий | lineColor | color | "var(--zg-stroke)" | |
| Цвет импульсов | pulseColor | color | "var(--zg-brand)" | |
| Цвет центральной плитки | hubColor | color | "var(--zg-brand)" | |
| Задержка старта | startDelay | number | 200 | 0…3000 мс |
| Анимация | motion | select | "auto" | По настройке системы, Всегда включена, Без движения |
Код
Исходный код доступен в платной версии рецепта.