JSFiddle - React, Tailwind, and code Playground

by Sukhrob Khusamov

HTML

<script src="https://yastatic.net/jquery/3.1.1/jquery.min.js"></script>
<svg width="100%" height="100%">
			<rect x="600" y="50" width="100px" height="150px" class="elevator"></rect>

			<circle class="my-circle" r="30" cx="50" cy="50" fill="orange" />


		</svg>

JavaScript

$(function() {
	$('svg rect.elevator').append(`
		<animate 
			attributeName="x"
			from="600"
			to="50" 
			dur="1s"
			begin="0s"
			fill="freeze"
		/>
	`);
	$('svg circle.my-circle').append(`
		<animate 
			attributeName="cx"
			from="50"
			to="450" 
			dur="1s"
			begin="0s"
			fill="freeze" 
		/>
	`);
});