Fondo de texto animado con trazo SVG y CSS
| Autor: | twodogstar |
|---|---|
| Views Total: | 3,204 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 21, 2014 |
| Licencia: | Unknown |
Vista prévia
Descripción
Un efecto de texto fresco creado por < a href = "https://codepen.io/yoksel" target = "_ blank" rel = "noopener" > yoksel que llenan el texto con un fondo animado GIF, basado en SVG y CSS trazo propiedades.
Funcionamiento
Cree un elemento SVG que contenga el texto y un patrón SVG.
<svg> <pattern id="pt--demo" viewBox="0 0 256 256" width="256" height="256" patternUnits="userSpaceOnUse"> <image xlink:href="1.gif" width="256" height="256"/> </pattern> <text x="50%" y="155" class="t--demo" text-anchor="middle">Demo</text> </svg>
Rellene el texto con el patrón SVG formado por imágenes.
text {
stroke-width: 10;
stroke-opacity: .5;
font-size: 12em;
}
.t--demo {
fill: url(#pt--demo);
stroke: #004384;
}
