<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<rect width="100%" height="100%" fill="#000" />
</svg>
const svg = document.querySelector('svg');
const svgns = 'http://www.w3.org/2000/svg';
let newRect1 = document.createElementNS(svgns, 'polygon');
gsap.set(newRect1, {
attr: {
x: 50,
y: 150,
width: 100,
height: 100,
fill: 'red',
class: 'target',
points: '205,462 292,400 346,483.9 258,526',
},
});
svg.appendChild(newRect1);
document.querySelector('.col').addEventListener('mouseenter', () => {
gsap.to(newRect1, {
attr: {
x: 150,
y: 150,
width: 100,
height: 100,
fill: '#5cceee',
class: 'target',
points: '205,462 267,496 346,483.9 258,526',
},
});
});
document.querySelector('.col').addEventListener('mouseleave', () => {
gsap.to(newRect1, {
attr: {
x: 50,
y: 150,
width: 100,
height: 100,
fill: 'red',
class: 'target',
points: '205,462 292,400 346,483.9 258,526',
},
});
});