CSS-doodle es una pequeña librería que convierte subconjunto ampliado de reglas CSS en gráficos generativos. Permite:
- Crear patrones y fondos sin usar Photoshop ni SVG
- Generar formas geométricas automáticamente
- Añadir variaciones aleatorias
- Repetir los diseños usando un «valor semilla» numérico
- Guardar el resultado como imagen PNG
La forma de utilizarlo es insertándolo en una web como cualquier etiqueta HTML, solo que en lugar de colocar imágenes se le dice algo así como «crea una cuadrícula» y se aplican reglas bastante simples: colores, tamaños o posiciones. El navegador repite esas reglas y crea el dibujo. El límite práctico es el propio lenguaje CSS y el rendimiento del navegador según el número de nodos generados.
En la práctica funciona como un «generador de arte» dentro del navegador: no se dibuja píxel a píxel, sino que se describe cómo debería ser… y el ordenador lo compone. Es ideal para fondos decorativos, gráficos matemáticos, logotipos o animaciones ligeras sin tener que programar gráficos complejos. Estas son algunas de sus características:
- Rejillas desde 1×1 hasta 64×64 (hasta 4.096 celdas en 1 dimensión)
- Funciones matemáticas y aleatorias integradas
- Selectores especiales (@nth, @row, @col, @random)
- Formas paramétricas (circle, hexagon, heart, hypocycloid, etc.)
- Soporte de trigonometría y π directamente en CSS
- Semillas para reproducir exactamente resultados anteriores
- API para JavaScript
Para ver algunas de sus posibilidades basta tocar los códigos de ejemplo, o saltar de un código a otro utilizando los pequeños rectángulos de la parte inferior. A partir de ahí, dedicarle un rato a codificar nuevas imágenes es la mejor forma de experimentar con sus posibilidades.
Relacionado:
