'Terima kasih' dengan efek

Demo

HTML view ▼

<div class="corak">
 <svg width="100%" height="100%">
   <defs>
     <pattern id="polka-dots" x="0" y="0" width="50" height="50"
               patternUnits="userSpaceOnUse">
       <circle fill="#000" cx="25" cy="25" r="1"></circle>
      </pattern> 
     </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
<text x="50%" y="50%"  text-anchor="middle"  >
   Terima kasih
   </text>
  </svg>
 </div>
<style>
.corak {
  height: 35vh;
}
svg text {
  letter-spacing: 3px;
  stroke: #111;
  font-size: 42px;
  font-weight: bold;
  stroke-width: 1;
  animation: textAnimate 4s infinite alternate;
}
@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(200, 68%, 75%)
} 
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(200, 68%, 75%,0%)
  }  
}
</style>

Tutup

CSS disesuaikan, dipetik dari codepen.