Генератив / фон · css-doodle

CSS Doodle

Генеративные фоны и паттерны на чистом CSS (~2 Кб вайба)

Tier 1Легко с AIОк на мобилеfree (MIT)Web Component + CSS

Design DNA

«CSS как язык программирования для рисования. Сетка сама генерируется по правилам, а не клепается вручную.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Сделай уникальный hero-фон на CSS Doodle: одна css-doodle, генеративный паттерн, минимум веса.
Mobile: меньше ячеек или статичный кадр. prefers-reduced-motion → без анимации.
Не подключай WebGL/particles параллельно «для красоты».

Что умеет

·Повторяющиеся паттерны и анимированные сетки
·Псевдо-случайные визуальные эффекты минимальным кодом
·Лёгкий hero-фон без WebGL

Чего не умеет

·Не игровые механики и сложная логика
·Не замена полноценному canvas/WebGL-арт

Когда брать

·Уникальный «живой» фон hero, который почти ничего не весит
·Генеративный паттерн без tsParticles/Vanta

Когда не брать

·Интерактивная игра → Phaser/p5
·Шейдерная жидкость → Curtains

С чем сочетается

AutoAnimateMotionZdog

Альтернативы

mesh-gradientVantatsParticlesp5.js

Типичные ошибки

·Слишком плотная сетка на mobile
·Анимировать каждую клетку без меры

Демо и ссылки

css-doodle.com