Как сделать такие же пиксельные логотипы?
Привет, я тут увидел вот это
Не подскажите, как они могли сделать это?
Ответы (3 шт):
Автор решения: Pux
→ Ссылка
там используется canvas.
Тег добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео.
быть может, это просто гифка.
Автор решения: darinka poznyak
→ Ссылка
<svg viewBox="0 0 1 1" width="48" height="48"><path d="M0.3542 0.1458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3125 0.1875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3542 0.1875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3958 0.1875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2708 0.2292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3125 0.2292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3542 0.2292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3958 0.2292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.2292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6875 0.2292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2708 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3125 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3958 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6458 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6875 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7292 0.2708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2292 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2708 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6042 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6458 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6875 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7292 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7708 0.3125 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2292 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2708 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6042 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6458 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7292 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7708 0.3542 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1875 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2292 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5208 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5625 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6042 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7708 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8125 0.3958 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1875 0.4375 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2292 0.4375 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5208 0.4375 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5625 0.4375 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7708 0.4375 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8125 0.4375 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1458 0.4792 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1875 0.4792 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5208 0.4792 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5625 0.4792 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8125 0.4792 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8542 0.4792 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1458 0.5208 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1875 0.5208 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5208 0.5208 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5625 0.5208 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8125 0.5208 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8542 0.5208 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1042 0.5625 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1458 0.5625 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.5625 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5208 0.5625 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8542 0.5625 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8958 0.5625 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0625 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1042 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1458 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.5208 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8542 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8958 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9375 0.6042 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0625 0.6458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1042 0.6458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.6458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.6458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8958 0.6458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9375 0.6458 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0208 0.6875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0625 0.6875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.6875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4792 0.6875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9375 0.6875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9792 0.6875 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0208 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0625 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1042 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1458 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1875 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2292 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2708 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3125 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3542 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3958 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.4375 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6458 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6875 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7292 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7708 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8125 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8542 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8958 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9375 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9792 0.7292 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.0625 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1042 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1458 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.1875 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2292 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.2708 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3125 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3542 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.3958 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6042 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6458 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.6875 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7292 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.7708 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8125 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8542 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.8958 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 M0.9375 0.7708 m-0.0208,0 a0.0208,0.0208 0 1,0 0.0416,0 a0.0208,0.0208 0 1,0 -0.0416,0 " fill="var(--ds-gray-1000)">
</path>
<path d="" fill="var(--ds-gray-1000)" opacity="0.5"></path>
</svg>В данном случае - это svg
Автор решения: Stepanov
→ Ссылка
Если увеличить эти svg элементы, то можно увидеть, что автор создал их из маленьких точек, имитируя при этом подобие пикселей, но круглых.
Предполагаю, что далее автор просто анимировал каждую точку средствами JavaScript или фреймворков, путём простого изменения цвета каждой точки с течением времени.