Crea textos con bordes animados sólo con SVG y CSS

Con el elemento SVG es posible construir textos animados, asignándoles a estos últimos los mismos atributos de cualquier vector gráfico escalable (SVG por sus siglas en inglés); para entender cómo hacerlo hablemos un poco de lo que vamos a necesitar.

Conceptos
1. El elemento <symbol> define objetos (como textos, círculos, etc) como una plantilla gráfica que será instanciada por el elemento <use> a través de un atributo ID. Si esto no es del todo entendible para ti, no te preocupes, ya lo veremos con un ejemplo de código.
2. El elemento <text> de SVG nos permitirá dibujar gráficos a partir de letras, haciendo posible aplicarles gradientes, filtros, máscaras de capa, etc; sin necesidad de usar CSS.
3. Finalmente, el elemento <use> a través del atributo ID toma un nodo existente dentro del elemento SVG (como por ejemplo el <symbol>) para pintarlo en pantalla.

Veamos todo esto con un ejemplo; en nuestro archivo HTML, dentro del body vamos a crear el siguiente código:
  
      
          
              CrissMaldonadoH
          
      
      
      
   

Nota como el elemento <symbol> tiene su atributo ID el cual es relacionado en el elemento <use>, así mismo, dentro del elemento <symbol> incluimos el elemento <text> el cual, como lo mencionamos, nos permitirá dibujar gráficos a partir de letras; en otras palabras, el elemento <use> pintará en pantalla lo que el elemento con el ID que se le asignó contiene dentro, en este caso el elemento <symbol>.

Al ejecutar este código debes obtener algo así, pero con tu texto:
CrissMaldonadoH
No es exactamente lo que queremos obtener, por eso, le agregaré el siguiente código de CSS para conseguir el objetivo.
body{
    padding: 0;
    background-image: linear-gradient(49deg, #1F3145, #112235);
    font-family: 'Lato', sans-serif;
    background-size: cover;
}
svg {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 350px;
}
svg text{
    font-size: 100px;
    fill: rgba(0, 0, 0, .1);
    stroke-width: 2px;
    stroke: #ffbb00;
    stroke-linejoin: round;
    stroke-dasharray: 80;
    animation: animate 1s alternate infinite;
}
@keyframes animate {
    100% {
        stroke-dasharray: 160;
    }
}

En el código anterior lo realmente importante sucede cuando se le dan estilos al elemento <text> (lo demás es solo agregar un color de fondo y darle una posición al elemento SVG), si te fijas, en el penúltimo bloque de código implementamos los atributos “stroke”, los cuales nos permiten jugar con el formato de la línea de los elementos SVG, veamos que permite hacer cada uno de ellos:

stroke: establece el color de la línea
stroke-width: establece el ancho a la línea
stroke-dasharray: permite mostrar la línea como un conjunto de punto, su valor establece la longitud de puntos que conformarán la línea
stroke-linejoin: establece la forma en donde se encuentran las líneas

Finalmente, al elemento <text> le asignamos una animación para poder aumentar la longitud de puntos que conformarán el borde de las letras

El resultado que debes obtener es el siguiente: Cuéntame, ¿obtuviste el mismo resultado?

Post a Comment

Artículo Anterior Artículo Siguiente