SOURCE

<!-- <svg width="1000" height="1000">
    <!-- <rect x="100" y="150" width="150" height="450"
    fill="balck" stroke="#5567df" stroke-width="10" stroke-dasharray="0 300 200 100"/> -->
    <!-- <rect  rx="20" x="100" y="150" width="200" height="400" fill="balck""/>
    <circle r="40" cx="200" cy="250" fill="red"/>
    <circle r="40" cx="200" cy="350" fill="yellow"/>
    <circle r="40" cx="200" cy="450" fill="green"/>
    <ellipse cx="150" cy="100" rx="60" ry="30" fill="#678abc"/>
    <ellipse cx="100" cy="150" rx="60" ry="30" fill="#678abc"/>
    <ellipse cx="50" cy="200" rx="60" ry="30" fill="#678abc"/> -->
    <!-- <polygon points="100,20" "130,45" "120,85" "80,85" fill="none" stroke="red"/> -->
    <!-- <circle r="49" cx="100" cy="140" fill="green"/>
    <circle r="9" cx="80" cy="119" fill="white"/>
    <circle r="9" cx="120" cy="119" fill="white"/>
    <rect x="80" y="155" width="45" height="15"fill="red" stroke="red"/>
    <polygon points="160,70 80,50 40,30 95,20" fill="none" stroke="bule"/> -->
    <!-- <rect x="100" y="150" width="200" height="100"
    fill="red" stroke="green" stroke-width="15"
    stroke-dasharray="0 300 200 100" transform="rotate(5)"
</svg> -->



<!-- <svg width="600" height="600">
    <text class="a1" x="0" y="220" font-size="100"stroke="red" stroke-width="3" fill="none" stroke-dasharray="6">小姨小怡</text>
    <text class="a2" x="0" y="220" font-size="100"stroke="green" stroke-width="5" fill="none" stroke-dasharray="6">小姨小怡</text>
    <text class="a3" x="0" y="220" font-size="100"stroke="bule" stroke-width="4" fill="none" stroke-dasharray="6">小姨小怡</text>
    <text class="a4" x="0" y="220" font-size="100"stroke="pink" stroke-width="6" fil="none" stroke-dasharray="6">小姨小怡</text>
</svg> -->

<svg width="900" height="300" class="ziti">
<text class="a4" x="40" y="200" font-size="120" stroke="green" stroke-width="6" stroke-dasharray="6">xiaoyi</text>
<text class="a1" x="40" y="200" font-size="120" stroke="pink" stroke-width="6" stroke-dasharray="6">xiaoyi</text>
<text class="a2" x="40" y="200" font-size="120" stroke="yellow" stroke-width="6" stroke-dasharray="6">xiaoyi</text>
<text class="a3" x="40" y="200" font-size="120" stroke="blue" stroke-width="6" stroke-dasharray="6">xiaoyi</text>
</svg>

@keyframes xiaoyi{
    0%{
    stroke-dasharray: 180;
    }
    50%{
     stroke-dasharray: 30;
    }
    100%{
     stroke-dasharray: 10;
    }
}
.a1{
    animation: xiaoyi 20s infinite;
}
.a2{
    animation: xiaoyi1 25s infinite;
}
.a3{
    animation: xiaoyi2 30s infinite;
}
.a4{
    animation: xiaoyi3 35s infinite;
}
@keyframes xiaoyi1{
    0%{
    stroke-dasharray: 180;
    }
    50%{
     stroke-dasharray: 30;
    }
    100%{
     stroke-dasharray: 10;
    }
}
@keyframes xiaoyi2{
    0%{
    stroke-dasharray: 200;
    }
    50%{
     stroke-dasharray: 300;
    }
    100%{
     stroke-dasharray: 400;
    }
}
@keyframes xiaoyi3{
    0%{
    stroke-dasharray:150;
    }
    50%{
     stroke-dasharray: 270;
    }
    100%{
     stroke-dasharray: 190;
    }
}
@keyframes xiaoyi4{
    0%{
    stroke-dasharray: 180;
    }
    50%{
     stroke-dasharray: 70;
    }
    100%{
     stroke-dasharray: 300;
    }
}