SOURCE

<svg class="bu" width="600px" height="600px" >
    <!-- 流光字 -->
<!-- <text class="zi1" font-size="80" fill="none" stroke-width="4" x="10" y="200"stroke="red">Song He Fei</text>
<text class="zi2" font-size="80" fill="none" stroke-width="4" x="10" y="200"stroke="blue">Song He Fei</text>
<text class="zi3" font-size="80" fill="none" stroke-width="4" x="10" y="200"stroke="green">Song He Fei</text>
<text class="zi4" font-size="80" fill="none" stroke-width="4" x="10" y="200"stroke="yellow">Song He Fei</text> -->
<!-- <path d="M0 0 L100 0 100 100 0 100 0 0 " fill="none" stroke="red" stroke-width="1"/>
<!-- <path d="M0 0 L100 0 100 100 0 100 0 0 " fill="none" stroke="red" stroke-width="1"/><!-- <path d="M0 0 L100 0 100 100 0 100 0 0 " fill="none" stroke="red" stroke-width="1"/>
<!-- <path d="M0 0 L100 0 100 100 0 100 0 0 " fill="none" stroke="red" stroke-width="1"/>
<path d="M0 10 L100 10 M0 20 L100 20 M0 30 L100 30 M0 20 L100 20 M0 30 L100 30 M0 40 L100 40 M0 50 L100 50 M0 60 L100 60 M0 70 L100 70 M0 80 L100 80 M0 90 L100 90" fill="none" stroke="red" stroke-width="0.5"/>
<path d="M10 0 L10 100 M20 0 L20 100 M30 0 L30 100 M40 0 L40 100 M50 0 L50 100 M60 0 L60 100 M70 0 L70 100 M80 0 L80 100 M90 0 L90 100"fill="none" stroke="red" stroke-width="0.5"/> -->

<defs>
<!-- <g>
    <circle id="hei" cx="0" cy="0" r="3"/>
</g>

<g>
     <circle id="bai" cx="0" cy="0" r="3" fill="#fff"/>
</g> -->

</defs>

<circle class="yuan1" r=30 cx="60" cy="40" fill="#ff6677"/>
<circle class="yuan2" r=30 cx="160" cy="40" fill="#66ff00"/>
<circle class="yuan3" r=30 cx="260" cy="40" fill="#ff33ff"/>
<circle class="yuan4" r=30 cx="360" cy="40" fill="#9966cc"/>





<!-- <use xlink:href="#hei" x="10" y="10"/>
<use xlink:href="#bai" x="20" y="20"/> -->
<!-- <ellipse rx="30" ry="15" cx="40" cy="40"/> -->
<!-- <circle r="2" cx="10" cy="10"fill="white" class="t1"/>
<circle r="2" cx="15" cy="10"fill="white" class="t2"/>
<circle r="2" cx="20" cy="10"fill="white" class="t3"/> -->




</svg>

.bu{
    background-color:black;
}

/* @keyframes tiao{
    0%{
        transform: translate(0px,0px);
    }
     50%{
        transform: translate(0px,10px);
    }
     100%{
        transform: translate(0px,-5px);
     }
}
.t1{
    animation: tiao 1s infinite;
}
.t2{
    animation: tiao 1s 0.5s infinite;
}
.t3{
    animation: tiao 1s infinite;
} */


/* 流光字 */
/* .zi1{
    animation: dong 1s infinite linear
}
.zi2{
     animation: dong1 1s 0.3s infinite linear
}
.zi3{
    animation: dong2 1s 0.2s infinite linear
}
.zi4{
    animation: dong3 1s  0.1s infinite linear
}
@keyframes dong{
    from{stroke-dasharray:20};
    to{stroke-dasharray:4}
}
@keyframes dong1{
    from{stroke-dasharray:40};
    to{stroke-dasharray:50}
}
@keyframes dong2{
    from{stroke-dasharray:10};
    to{stroke-dasharray:12}
}
@keyframes dong3{
    from{stroke-dasharray:8};
    to{stroke-dasharray:25}
} */

@keyframes y1{
0%{
    cx:60;
     cy: 40
}
100%{
    cx:60;
     cy: 500
}
}
@keyframes y2{
0%{
    cx:160;
     cy: 40
}
100%{
    cx:160;
     cy: 500
}
}
@keyframes y3{
0%{
    cx:260;
     cy: 40
}
100%{
    cx:260;
     cy: 500
}
}
@keyframes y4{
0%{
    cx:360;
     cy: 40
}
100%{
    cx:360;
     cy: 500
}
}

.yuan1{
    animation: y1 5s infinite linear
}
.yuan2{
    animation: y2 5s infinite ease
}
.yuan3{
    animation: y3 5s infinite ease-in
}
.yuan4{
    animation: y4 5s infinite ease-out
}