JSFiddle - React, Tailwind, and code Playground

by lasitha_prabodha

HTML

<script src="https://cdn.rawgit.com/svgdotjs/svg.js/ceaf24d5/dist/svg.min.js"></script>
<input type="text" value="8========D" placeholder="Type text here...">
<div id="drawing"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata');
#drawing {
	width: 100%;
	height: 300px;
}
tspan {
	fill: #e5e5e5;
	stroke: #f06;
	stroke-width: 0.85;
  font-family: 'Inconsolata';
}
input[type=text] {
	width: 100%;
  font-family: 'Inconsolata';
  font-size: 14px;
  outline: none;
  color: #666;
}

JavaScript

var input = document.querySelector('input[type=text]')
var draw = SVG('drawing').viewbox(0, 0, 300, 140)
var text = draw.text(function(add) {
	add.tspan( input.value )
})

text
	.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
	.animate(1000, '<>')
	.plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80')
	.loop(true, true)

input.addEventListener('keyup', updateText(text))

function updateText(textPath) {
	return function() {
		textPath.tspan(this.value)
	}				
}