Animar cambios de ruta SVG en CSS

De vez en cuando me motiva a intentar dibujar algunas formas con path, la todopoderosa sintaxis de dibujo de SVG. Sólo entiendo un fragmento de lo que todo esto puede hacer, pero sé lo suficiente como para ser peligroso. Todos los comandos de sintaxis de línea recta (como L) son bastante sencillos y el Qcomando curvo me parece bastante intuitivo. Encuadrate en un dibujo viewBox="0 0 100 100"y dibuja cosas simples que no parecen tan malo.

Aquí hay un ejemplo clásico mío que dibuja cosas con todos los comandos básicos, pero también las animas con CSS (solo navegadores Chromium):

Extraño pero cierto:

svg viewBox="0 0 10 10"  path d="M2,2 L8,8" //svg

svg:hover path {  transition: 0.2s;  d: path("M8,2 L2,8");}

El otro día tuve una situación en la que necesitaba un elemento de la interfaz de usuario que tuviera un icono diferente según el estado en el que se encontrara. Tenía una especie de forma de “registro”, por lo que el valor predeterminado eran líneas rectas, algo así como un menú de hamburguesas (solo cuatro líneas). por lo que se lee más como líneas de texto), luego otros estados diferentes.

1. POR DEFECTO
2. ACTIVO
3. ÉXITO
4. ERROR

Primero escribí la máquina de estados más complicados del mundo:

const indicator = document.querySelector(".element");let currentState = indicator.dataset.state;indicator.addEventListener("click", () = {  let nextState = "";  if (currentState == "DEFAULT") {    nextState = "ACTIVE";  } else if (currentState == "ACTIVE") {    nextState = "SUCCESS";  } else if (currentState == "SUCCESS") {    nextState = "ERROR";  } else {    nextState = "DEFAULT";  }    indicator.dataset.state = nextState;  currentState = nextState;});

Eso abrió la puerta para diseñar estados con atributos de datos:

.element {    [data-state="DEFAULT"] {  }  [data-state="ACTIVE"] {  }  [data-state="SUCCESS"] {  }  [data-state="ERROR"] {  }}

Entonces, si mi elemento comienza con el estado predeterminado de cuatro líneas:

div data-state="DEFAULT"  svg viewBox="0 0 100 100"    path d="M0, 20 Q50, 20 100, 20"/path    path d="M0, 40 Q50, 40 100, 40"/path    path d="M0, 60 Q50, 60 100, 60"/path    path d="M0, 80 Q50, 80 100, 80"/path  /svg/div

…Puedo alterar esas rutas en CSS para el resto de los estados. Por ejemplo, puedo tomar esas cuatro líneas rectas y modificarlas en CSS.

Tenga en cuenta que las cuatro líneas “rectas” tienen convenientemente un punto curvo no utilizado. Solo los caminos que tienen el mismo número y tipo de puntos se pueden animar en CSS. Poner el punto de la curva allí abre puertas.

¡Estos cuatro nuevos caminos en realidad dibujaron algo parecido a un círculo!

.editor-indicator {    [data-state="ACTIVE"] {    .icon {      :nth-child(1) {        d: path("M50, 0 Q95, 5 100,50");      }      :nth-child(2) {        d: path("M100, 50 Q95, 95 50,100");      }      :nth-child(3) {        d: path("M50,100 Q5, 95 0, 50");      }      :nth-child(4) {        d: path("M0, 50 Q5, 5 50, 0");      }    }  }}

Para los otros estados, dibujé una tosca marca de verificación (para ÉXITO) y un tosco signo de exclamación (para FRACASO).

Aquí hay una demostración (nuevamente, Chromium), donde puedes hacer clic para cambiar los estados:

No termine de usarlo porque ni Firefox ni Safari lo admiten d: path();en CSS. No es que no los anime, simplemente no funciona y punto, así que para mí estaba descartado. Terminé cambiando los íconos en los diferentes estados.

Si necesitas transformar la forma en varios navegadores, tenemos un artículo completo al respecto.