Moving SVG with Paper.js


development process ︎
run on gitlab ︎


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. If you are interested in the SVG and paper.js libraries, please visit our blog page.

p5.js
Dec 11, 2018