<svg>
<symbol id="word">
<text text-anchor="middle" x="50%" y="60%">
These are my words
</text>
</symbol>
<use href="#word"></use>
</svg>
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');
body{
font-family:'Libre Baskerville', serif;
background: gray;
}
svg{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width:100%;
height:350px;
}
svg text{
font-size:120px;
fill: rgba(0,0,0,0.3);
stroke-width: 2px;
stroke:white;
stroke-linejoin: round;
/*stroke-dasharray: 80;*/
animation-name: animate;
animation-duration:2s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes animate{
from {
stroke-dasharray: 80;
}
to {
stroke-dasharray: 160;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.