Moving SVG with Paper.js

Aug 9, 2019

paper.js 라이브러리를 이용해서 adobe illustrator로 그린 SVG 이미지를 움직이게 만들었습니다. 각 SVG는 윈도우 창을 인식하며, 계속해서 파도치는 물결 역시 실시간으로 인식해서 튕겨나갑니다. 서로 부딛힐 때도 느리지만 부드럽게 튕기도록 만들었습니다.

SVG 이미지에 마우스를 가져다대면 색상이 흰색으로 바뀝니다. 또한 각 아이콘이 겹칠 때 컬러 블렌드를 활용해 답답함을 없앴습니다. 다만 인터넷 익스플로러에서는 블렌드 기능을 제공하지 않으므로, IE에서는 렌더되지 않습니다.

블로그(commoners.co.kr/9112360)에 해당 프로젝트 개발 과정을 정리해서 올렸습니다. SVG와 paper.js 라이브러리에 관심 있으시다면 가볍게 들려주세요.

--------------------------------------

I used paper.js library to animate SVG images draw with the adobe illustrator. Each icon recognizes the window frame and bounces off. Particularly, at the bottom of the window, which is continuously waving itself, SVGs dynamically bounces off. They also hit each other and bounce off in the opposite direction.

When you mouse over SVGs, they turn white. Also, when they overlap each other, color blend filter works so that the color of the intersected areas changes in a certain way. However, this color-changing does not work in Internet Explorer because IE lacks the technology to implement the filter.

I've posted the development process of this project on our blog(commoners.co.kr/9112360). If you are interested in the SVG and paper.js libraries, please visit our blog page.