Controla iconos e ilustraciones SVG con CSS moderno: fill, stroke, variables y animaciones ligeras.
SVG permite gráficos nítidos en cualquier resolución y CSS te da control visual directo sobre ellos.
Con propiedades como <code>fill</code>, <code>stroke</code> y <code>stroke-width</code> puedes tematizar iconos sin exportar variantes.
Las animaciones de trazo son ligeras y perfectas para microinteracciones.
Preferible usar SVG inline para control completo.
Cuando el SVG está inline en HTML, puedes seleccionar sus nodos como cualquier elemento DOM.
Esto facilita temas claros/oscuros con variables CSS y estados hover/focus consistentes.
Efecto de línea trazada con dasharray/dashoffset.
El patrón clásico de "draw" usa <code>stroke-dasharray</code> y anima <code>stroke-dashoffset</code> desde el total del trazo hasta 0.
Es útil para logos, checkmarks y onboarding visual.
Controla iconos e ilustraciones SVG con CSS moderno: fill, stroke, variables y animaciones ligeras.
Código del tema: display: grid; gap: 1rem;
Preferible usar SVG inline para control completo.
Cuando el SVG está inline en HTML, puedes seleccionar sus nodos como cualquier elemento DOM.
Esto facilita temas claros/oscuros con variables CSS y estados hover/focus consistentes.
.icon path { fill: #1d4ed8; }
.icon circle { stroke: #0f172a; stroke-width: 2; }
.icon:hover path { fill: #7c3aed; }Efecto de línea trazada con dasharray/dashoffset.
El patrón clásico de "draw" usa stroke-dasharray y anima stroke-dashoffset desde el total del trazo hasta 0.
Es útil para logos, checkmarks y onboarding visual.
.line {
stroke-dasharray: 180;
stroke-dashoffset: 180;
animation: draw 1.2s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}