<text id="sintext" x=‘100‘ y=‘220‘ 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>
