Разгонятор MRDN 9000

Стенд анимации логотипа: настройка поведения, готовый код вставки со статичным SVG-фоллбеком. Без Lottie: библиотека весит 4 КБ.

Скачать анимированный SVG (SMIL)

Код для вставки

URL библиотеки:
Код 1 — объявление: спрайт с глифом, лого, библиотека. Один раз на страницу. 

    

      Код 2 — переиспользование статичного лого (футер и другие места). Требует спрайт из кода 1.
      
    

    

  


  

    
Инструкция для программиста

    
    
      
  1. Никакого Lottie. Логотип — SVG, который собирает и крутит библиотека mrdn-logo.js (4 КБ gzip, ноль зависимостей). Линии сетки — прозрачные дыры до фона страницы, логотип можно класть на любой фон.
    2. 
      
  2. Фоллбек уже в разметке. Внутри контейнера лежит статичный SVG — он виден на пререндере, до загрузки JS и без JS вообще. Библиотека при старте заменяет его на анимированную версию. Первый кадр анимации совпадает со статичным лого попиксельно, подмена не видна.
    3. 
      
  3. Подключение одним тегом <script src="..." defer>. Библиотека сама находит все [data-mrdn-logo] на странице и монтирует их на DOMContentLoaded. Для контента, который появляется позже, вызовите MrdnLogo.init(node).
    4. 
      
  4. Hover-события уже внутри. Библиотека вешает mouseenter/mouseleave на сам контейнер. Если hover-зона больше (ссылка-обёртка), передавайте её через MrdnLogo.create(el, { hoverTarget }) вместо data-атрибутов.
    5. 
      
  5. Доступность заложена. При prefers-reduced-motion показывается статичный глиф. Hover-поведение отключено на ширине меньше 600px. Размер задаёт контейнер: SVG растягивается на его ширину.
    6. 
      
  6. Постоянная скорость не ест CPU. Равномерное вращение идёт на CSS-анимации без JS в кадре; JS просыпается только на разгонах и торможениях.
    7. 
      
  7. Safari поддержан через фоллбек. Safari не умеет CSS-анимацию свойства d, поэтому там библиотека автоматически строит те же кейфреймы как SMIL и управляет ими через setCurrentTime. Картинка и поведение одинаковые во всех браузерах.
    8.