SVG.js_Crazy_Animation

    
        $ cd svgjs
        $ ls 
         Main.css	crazy_ani.html

crazy_ani.html

    
        <!DOCTYPE html>
        <html>
        <head>
          <title>SVG.js</title>
          <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
        </head>
        <body>
        
        
         <link rel="stylesheet" type="text/css" href="Main.css" />
        
        <input type="text" value="Dragon----- - - - ->" placeholder="Type text here...">
        <div id="drawing"></div>
        
        <script>
        var input = document.querySelector('input[type=text]')
        var draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
        var text = draw.text(function(add) {
        	add.tspan( input.value )
        })
        
        textPath = text.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
        
        textPath.animate(1000).ease('<>')
        	.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
        	.loop(true, true)
        
        input.addEventListener('keyup', updateText(textPath))
        
        function updateText(textPath) {
        	return function() {
        		textPath.tspan(this.value)
        	}				
        }
        </script>
        
        </body>
        </html>

Main.css

    
        // Vanilla js
        var ns = 'http://www.w3.org/2000/svg'
        var div = document.getElementById('drawing') 
        var svg = document.createElementNS(ns, 'svg')
        svg.setAttributeNS(null, 'width', '100%')
        svg.setAttributeNS(null, 'height', '100%')
        div.appendChild(svg)
        var rect = document.createElementNS(ns, 'rect')
        rect.setAttributeNS(null, 'width', 100)
        rect.setAttributeNS(null, 'height', 100)
        rect.setAttributeNS(null, 'fill', '#f06')
        svg.appendChild(rect)