[SVG] svg scale 애니메이션 효과 적용하는 방법

처음에 작은 원이 여러개가 커지면서 배경을 채우는 효과를 내고 싶어서 

 

시도했는데 

 

뭔가 생각처럼 효과가 나타나지 않았다...

 

 

제자리에서 크기가 커지는걸 원했는데 왜 위치가 바뀌는 것인가....

              <animateTransform 
              			attributeName="transform" 
                        type="scale"
                        from="0 0" to="1 1" 
                        begin="0s" 
                        dur="2.5s" 
                        repeatCount="indefinite">
              </animateTransform>

 

 

 

 

그래서 찾다보니  아래와 같은 원을 발견해서 

 

 

 

 

여러개의 svg 를 넣어 구현했다..

 

 

 

 

 

뭔가 석연찮았는데 괜찮은걸 발견해서 다시 구현했다.

스크립트로 하나의 svg 안에 여러개의 원을 추가하는 형태. 

 

d3 스크립트를 이용해 스크립트로 원을 추가하고 transition을 이용해 효과를 넣는다.

svg.insert("circle", "rect")
         .attr("cx", position[i][0])
         .attr("cy", position[i][1])
         .attr("r", 5) // 1e-6
         .style("fill", d3.hsl(100, .1, .6))
         .transition()
         .duration(2000)
         .ease(Math.sqrt)
         .attr("r", 200)
           .remove();
        }

 

 

 

 

 

 

참고한 코드 

https://codepen.io/jscottsmith/pen/ZGGapQ

SVG Particles