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 = 205,
    end4 = 205;
    
var	point1 = { v: 0 };
var	point2 = { v: 0 };
var	point3 = { v: 0 };
var	point4 = { v: 0 };

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

function updatePoints(point, start, end) {   
    if(start < end) {
        var interval = setInterval(function() {
            point.v = start;
            if (start == end) {
                clearInterval(interval);
                return;
            }
            start++;
            updateValues();
        }, 5);
    }
    
    if(end < start) {
        var interval = setInterval(function() {
            point.v = start;
            if (end >= start) {
                clearInterval(interval);
                return;
            }
            start--;
            updateValues();
        }, 5);
    }
}

function updateValues() {
	document.getElementById('h').firstChild.setAttribute('points', '0,0 46,0 46,' + point1.v + '  122,' + point2.v + '  122,0 168,0 168,204 122,204 122,' + point3.v + ' 46,' + point4.v + ' 46,204 0,204');
}