Don't Panic

SVG stroke animation test

by UDany

HTML

<svg width="320" height="240">
 <defs>
  <linearGradient y2="1" x2="1" y1="0" x1="0" id="svg_9">
   <stop offset="0" stop-color="#ff0000"/>
   <stop offset="1" stop-color="#ffff00"/>
  </linearGradient>
 </defs>
 <g class="stroke-anim">
  <title>Layer 1</title>
  <text fill-opacity="0" stroke="url(#svg_9)" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="101" id="svg_1" y="96" x="6" stroke-width="4" fill="#000000">DON'T</text>
  <text fill-opacity="0" stroke="url(#svg_9)" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="101" id="svg_6" y="216" x="6" stroke-width="4" fill="#000000">PANIC</text>
 </g>
</svg>

CSS

body {
  background: black;
  text-align: center;
}

.stroke-anim {
    stroke-dasharray: 5px 250px;
    stroke-dashoffset: 2000px;
    opacity: 0;
    transition: stroke-dasharray 10s, opacity .5s;
}

.stroke-anim.play {
    opacity: 1;
    stroke-dasharray: 500px 150px;  
}

JavaScript

setTimeout(() => {
	$(".stroke-anim").addClass('play');
}, 100)