const button = document.getElementById('next')
const svg = document.getElementById('svg1')
const paths = document.querySelectorAll('#svg1 paths')
button.addEventListener('click',handleClick)

let index = 0;


const transforms = [
    {scale: 3.2, x: -5, y: 34 },
    {scale: 6.5, x: -4, y: 25 },
    {scale: 11, x: -5 , y: 25 },
    {scale: 20, x: -6 , y: 23.3 }
]

function handleClick(){
    svg.style.transform =  
    `scale(${transforms[index].scale}) 
    translateY(${transforms[index].y}%) 
    translateX(${transforms[index].x}%)`

    index++;   

    if(index>=4){
        button.removeEventListener('click',handleClick)
    }
    
}


