老师没有给出代码 我在这里贴一下（代码需要优化，console.table(y)会被很快的执行很多次，资源也没有及时释放）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<!-- pattern 笔刷 -->
<svg xmlns="http;//www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<path stroke="#F0F0F0" fill="none" d="M 0 0,H 20,V 20"></path>
</pattern>
</defs>
<rect width="1200" height="1000" fill="url(#grid)"></rect>
<text id="sintext" x='100' y='160' style="font-size:14px;font-family:'Arial';">
</text>
<path d="M 100 0,V 200,M 0 160,H 200" transform="translate(0,60)" stroke="red"></path>
</svg>
<script type="text/javascript">
var text = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var n = text.length;
var x = [];
var i = n;
var y = null;
var s = 100,w = 0.02,t = 0;
while(i--){
x.push(10);
var tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
tspan.textContent = text[n - i - 1];
sintext.appendChild(tspan);
var h = Math.round(360 / 26 * i);
tspan.setAttribute('fill','hsl(' + h + ',100%,80%)');
}
function arrange(t){
y = [];
var ly = 0,cy;
for(i = 0;i < n; ++i){
cy = -s * Math.sin(w* i *20 +t);
y.push(cy - ly);
ly = cy;
}
//console.table(y);
}
function render(){
sintext.setAttribute('dx',x.join(' '));
sintext.setAttribute('dy',y.join(' '));
}
function frame(){
t += 0.01;
arrange(t);
render();
requestAnimationFrame(frame);
}
arrange(0);
render();
frame();
</script>
</body>
</html>
