Изображение в self-drawing SVG: как это работает и зачем оно нужно

Недавно я наткнулся на интересный инструмент, который превращает любое изображение в анимированный SVG с эффектом “саморисования”. Идея звучит круто, особенно для портфолио или презентаций, но на практике всё оказалось не так просто. Давайте разберёмся, как это работает и где может быть полезно.

Как это работает?

Автор инструмента решил упростить процесс создания анимированных SVG из изображений. Вместо того чтобы вручную настраивать пути и анимации, вы просто загружаете изображение, и инструмент делает всё за вас. Основной стек включает React для интерфейса и anime.js для анимации. Процесс выглядит так:

1. Загрузка изображения: Вы загружаете изображение через интерфейс.
2. Конвертация в SVG paths: Инструмент автоматически преобразует изображение в SVG-пути, используя настройки порога (threshold) и инверсии цвета.
3. Анимация: Пути анимируются с эффектом рисования, как если бы их рисовали ручкой.

Настройки и фичи

Инструмент предлагает несколько настроек, которые позволяют кастомизировать результат:

• Цвета: Вы можете выбрать цвет линий и фона.
• Настройки трассировки: Порог (threshold), инверсия цветов и другие параметры, которые влияют на качество SVG.
• Анимация: Длительность, задержка между путями, easing, направление (вперёд, назад, ping-pong) и возможность зацикливания.

Результат можно экспортировать как SVG код, файл или даже как самодостаточный HTML файл.

Практическое применение

Этот инструмент отлично подходит для создания анимаций для портфолио, презентаций или просто для того, чтобы добавить “вау-эффект” на ваш сайт. Однако есть и ограничения:

• Качество изображений: Инструмент лучше всего работает с иллюстрациями, мультяшками и чистыми линиями. Реальные фотографии могут быть сложнее для конвертации и требуют дополнительной обработки.
• Производительность: Анимации SVG могут быть ресурсоёмкими, особенно если они сложные или длинные. Это стоит учитывать при использовании на сайтах с высокой нагрузкой.

Пример использования

Предположим, у вас есть логотип компании, и вы хотите добавить его на сайт с эффектом рисования. Вот как это может выглядеть:

import { useEffect, useRef } from 'react';
import anime from 'animejs';

const SelfDrawingLogo = ({ paths }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    anime({
      targets: svgRef.current.querySelectorAll('path'),
      strokeDashoffset: [anime.setDashoffset, 0],
      easing: 'easeInOutSine',
      duration: 1000,
      delay: (el, i) => i * 100,
      loop: true,
    });
  }, [paths]);

  return (
    <svg ref={svgRef} width="200" height="200" viewBox="0 0 200 200">
      {paths.map((path, i) => (
        <path key={i} d={path} fill="none" stroke="black" strokeWidth="2" />
      ))}
    </svg>
  );
};

export default SelfDrawingLogo;

Заключение

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

Если вы хотите попробовать его сами, вот ссылки на репозиторий и демо. Автор открыт для обратной связи, так что не стесняйтесь делиться своими идеями и предложениями.

Попробуй сам: Vercel — Edge Functions и serverless деплой.

Источник: https://www.reddit.com/r/reactjs/comments/1ul15x2/i_built_a_tool_that_turns_any_image_into/