📘 Módulo 19: CSS Avanzado – Animaciones con SVG y Canvas

Aprender a integrar SVG en animaciones CSS. Introducir animaciones con Canvas controladas por CSS y JavaScript.

Objetivos

Aprender a integrar SVG en animaciones CSS.
Usar propiedades como stroke-dasharray y stroke-dashoffset para animar trazos.
Introducir animaciones con Canvas controladas por CSS y JavaScript.
Crear efectos visuales complejos y dinámicos para iconos, gráficos y fondos.

🔹 1. Animaciones con SVG (líneas y trazos)

css

svg path {
  stroke: #003366;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 300;   /* longitud del trazo */
  stroke-dashoffset: 300;  /* oculto inicialmente */
  animation: dibujar 3s linear forwards;
}

@keyframes dibujar {
  to { stroke-dashoffset: 0; }
}

👉 El trazo de un icono se dibuja progresivamente.

🔹 2. Animaciones de relleno en SVG

css

svg circle {
  fill: transparent;
  stroke: #ff6600;
  stroke-width: 4;
  transition: fill 0.5s ease;
}

svg circle:hover {
  fill: #ff6600;
}

👉 El círculo se rellena al pasar el ratón.

🔹 3. Canvas con CSS y JS

Canvas requiere JavaScript, pero se puede combinar con CSS para efectos visuales.

html

<canvas id="animacion" width="400" height="400"></canvas>

const ctx = document.getElementById("animacion").getContext("2d");
let x = 0;
function animar() {
  ctx.clearRect(0, 0, 400, 400);
  ctx.fillStyle = "#003366";
  ctx.beginPath();
  ctx.arc(x, 200, 20, 0, Math.PI * 2);
  ctx.fill();
  x += 2;
  requestAnimationFrame(animar);
}
animar();

👉 Una bola se mueve suavemente dentro del canvas.

🔹 4. Combinación SVG + CSS

Iconos que se dibujan solos al cargar la página.
Gráficos con líneas animadas que muestran datos progresivamente.
Botones con iconos SVG interactivos que cambian color y forma.

📝 Actividad práctica

Crea un icono SVG cuyo trazo se dibuje progresivamente con stroke-dasharray.
Implementa un círculo SVG que se rellene al hover.
Diseña una animación en Canvas con una bola que rebote dentro del área.

MÓDULO 20 CSS Integración multimedia