JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<svg xmlns="http://www.w3.org/2000/svg" id="h" viewBox="0 0 168 204" width="168" height="204"><polygon points="0,0 46,0 46,79 122,79 122,0 168,0 168,204 122,204 122,119 46,119 46,204 0,204"/></svg>

JavaScript

var start1 = 79,
	start2 = 79,
    start3 = 119,
    start4 = 119;
    
var end1 = 0,
    end2 = 0,
    end3 = 204,
    end4 = 204;
    
var point1,
	point2,
    point3,
    point4;

document.getElementById('h').addEventListener('click', function() {   
    point1 = start1;
    point2 = start2;
    point3 = start3;
    point4 = start4;
    
    changePoints(point1, start1, end1, 50);
    changePoints(point2, start2, end2, 50);
});

function changePoints(point, start, end, duration) {
	//console.log(point);
    
    var range = end - start;
    var current = start;
    var increment = end > start? 1 : -1;
    var stepTime = Math.abs(Math.floor(duration / range));
    
    var timer = setInterval(function(){
    	current += increment;
		point1 = current;
        point2 = current;
        if (current == end) {
        	clearInterval(timer);
        }
        document.getElementById('h').firstChild.setAttribute('points', '0,0 46,0 46,' + point1 + '  122,' + point2 + '  122,0 168,0 168,204 122,204 122,' + point3 + ' 46,' + point4 + ' 46,204 0,204');
    }, stepTime);
}