<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
svg{
width:1000px;
height:1000px;
}
.zt{
font-size:100px;
stroke:white;
stroke-width:5px;
stroke-dasharray:5px;
fill:none;
animation:ztg 9s infinite;
}
.zt1{
font-size:100px;
stroke:blue;
stroke-width:5px;
stroke-dasharray:9px;
fill:none;
animation:zt1g 3s infinite;
}
.zt2{
font-size:100px;
stroke:yellow;
stroke-width:5px;
stroke-dasharray:5px;
fill:none;
animation:zt2g 5s infinite;
}
.zt3{
font-size:100px;
stroke:skyblue;
stroke-width:5px;
stroke-dasharray:5px;
fill:none;
animation:zt3g 7s infinite ;
}
@Keyframes zt3g{
0%,100%{
stroke-dasharray:5px;
}
35%{
stroke-dasharray:20px;
}
60%{
stroke-dasharray:100px;
}
95%{
stroke-dasharray:30px;
}
}
@Keyframes zt2g{
0%,100%{stroke-dasharray:10px;}
45%{
stroke-dasharray:150px;
}
55%{
stroke-dasharray:250px;
}
80%{
stroke-dasharray:350px;
}
@Keyframes zt1g{
0%,100%{
stroke-dasharray:15px;
}
15%{
stroke-dasharray:170px;
}
35%{
stroke-dasharray:270px;
}
85%{
stroke-dasharray:370px;
}
@Keyframes ztg{
0%,100%{
stroke-dasharray:20px;
}
5%{
stroke-dasharray:100px;
}
20%{
stroke-dasharray:190px;
}
65%{
stroke-dasharray:20px;
}
</style>
</head>
<body>
<svg>
<text x="50" y="200" class="zt">
DDDDDDD
</text>
<text x="50" y="200" class="zt1">
DDDDDDD
</text>
<text x="50" y="200" class="zt2">
DDDDDDD
</text>
<text x="50" y="200" class="zt3">
DDDDDDD
</text>
</svg>
</body>
</html>