SVG анимация, перемещение с копированием

03 декабря 2021, 21:30

Как анимировать такой эффект, перемещая и копируя контур с изменением свойств, что целесообразно использовать для этого? Чтобы контур копировался перемещаясь по заданному вектору с заданым числом шагов, изменяя свой цвет.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 427.4 348"><polyline points="67.6 93.2 349.6 157.2 67.6 215.2 " style="fill:none;stroke-width:3;stroke:#EE1F51"/></svg>

Answer 1

Если сильно надо именно svg - предлагаю что-то такое:

let i = 0, x = 0, y = 0, dx = 2, dy = 2; 
let l1 = document.querySelector('#g1 polyline'); 
let l2 = document.querySelector('#g2 polyline'); 
requestAnimationFrame(draw); 
 
function draw() { 
  i <10 && requestAnimationFrame(draw); 
  x += dx; 
  y += dy; 
  i++; 
  g1.innerHTML += `<g stroke='hsl(${i*8},55%,55%)' transform=translate(${x},${y})>${l1.outerHTML}<g>` 
  g2.innerHTML += `<g stroke='hsl(${i*8},55%,55%)' transform=translate(${x},${y})>${l2.outerHTML}<g>` 
}

polyline { 
  fill: none; 
  stroke-width: 3; 
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 70 427.4 348"> 
<g id=g1> 
  <polyline points="67.6 93.2 349.6 157.2" /> 
</g> 
<g id=g2> 
  <polyline points="349.6 157.2 67.6 215.2" /> 
</g> 
</svg>