Очень рептилийский стиль!
Добавьте один, повернутый на 60 градусов против часовой стрелки, затем на 180 градусов вокруг оси Y, и вы получите глаза воскрешённого
Добавьте зеркальное отражение, повернутое вокруг оси Y, чтобы получить два изображения (глаза).
Идите на Discourse, тираннозавр.
Да, не могу выкинуть это из головы, и мне определённо нужно больше выбираться из дома.
Я добавил здесь загрузчик для одноколёсника! https://unicyclist.com
Классно!
Исходная анимация была создана мной с использованием только CSS, и я попросил Gemini «преобразовать» её (так сказать) в SVG.
На экране загрузки https://unicyclist.com полоса загрузки, кажется, выходит за пределы фона.
Спасибо. Пользователь сообщил об этом. Были некоторые странности с SVG (?), из-за которых изображение выглядело… странно при загрузке в пост, но не на экране загрузки.
Например, вот эта старая версия:
Здесь она выглядит полностью сломанной, даже при клике на неё (показывается двойная полоса загрузки…).
Но выглядит нормально при использовании в качестве загрузочного экрана.
Я бездумно попросил Gemini «исправить это», и он создал SVG, который я опубликовал, и он выглядит нормально, однако, по-видимому, у некоторых пользователей есть проблема с полосой прогресса. Я предполагаю, что именно это вы видите:
У меня нет никаких проблем в Windows Chrome/Firefox или Android/Chrome.
Не знаю, есть ли какая-либо связь между Discourse и этими сбоями.
Итак, чтобы оставаться в теме: кроме анимаций, не основанных на CSS, есть ли что-то, о чём следует помнить, когда мы хотим использовать анимированный SVG для загрузочного экрана?
Я использую clipPaths в моих SVG, чтобы предотвратить выход элементов за границы.
Возможно, было бы эффективно дать команду Gemini следующим образом:
В этом SVG полоса загрузки выходит за пределы фона. Пожалуйста, измените её так, чтобы она оставалась в пределах фона, используя clipPath.
Спасибо большое за эту функцию! Я тоже попробовал, пока не совсем доволен, но работаю над исправлением 
Я отдельно открыл соответствующую черновую реализацию, но общая идея заключается лишь в возможном продолжении этой функции:
Текущий подход с использованием одного SVG-файла и переменных var(--primary), var(--secondary) и var(--tertiary) остаётся наиболее чистым и простым решением для большинства сайтов, особенно в случаях, когда один и тот же SVG-файл должен лишь адаптировать свои цвета.
Сценарий, который я исследовал, представляет собой пограничный случай, когда заставка в тёмном режиме требует по-настоящему другого ресурса или оптической обработки, а не просто перекрашивания того же SVG. Например, для заголовка в тёмном режиме после входа в систему может лучше всего подойти один вариант с прозрачным логотипом/фоном, тогда как для анонимного представления входа/заставки может потребоваться немного другой угольно-серый фон или скорректированный SVG для лучшего контраста.
Таким образом, идея не в том, чтобы заменить текущий подход на основе переменных, а в том, чтобы предоставить возможность отступления для сайтов, где графика заставки в тёмном режиме действительно должна отличаться от графики заставки в светлом/режиме по умолчанию.
Буду рад получить отзывы о том, стоит ли реализовать это как отдельную настройку splash_screen_image_dark, или же существующий подход с одним SVG-файлом и цветовыми переменными должен остаться единственным поддерживаемым вариантом.
Изначально я попытался использовать анимированный SVG для стартового экрана. Хотя на десктопе это работало, я обнаружил, что на мобильных устройствах прямая анимация сложных путей или внутренних элементов SVG приводит к подтормаживаниям и даже остановке анимации.
Чтобы обеспечить плавный пользовательский опыт, я перенёс логику анимации в стандартный HTML-контейнер (div), обернувший SVG. Применяя CSS-анимации (transform, scale, opacity) к обёртке div, а не к самому SVG, мобильные браузеры могут гораздо эффективнее использовать аппаратное ускорение без подтормаживаний.
Я задумался, можно ли расширить функцию для поддержки анимированного формата WebP или же она жёстко привязана к CSS-трансформациям?
Я имею в виду, что файлы GIF тяжёлые, а WebP сейчас является распространённым стандартом без потерь. Я получаю 5 секунд анимации 200x200 пикселей при 15 кадрах в секунду размером 50/100 КБ. Это можно ещё больше сократить до 2–3 секунд при зацикливании.
Возможно ли предусмотреть варианты тёмной и светлой темы?
