svg morphing

ector graphics has always been my fascinating topic ever since the time of DOS (and Borland C++ 3.1): path, stroke, fill functions… Never really consider JavaScript as “real programming” 😀, but today, we’ve got many of the 2D, 3D capabilities with this language, and sometime we just need to have our idea implemented quick! The little fun below tries morphing the drawing paths, hence transforming one painting into another. Vector graphics are acquired using AutoTrace, the open source tool that helps converting (tracing) bitmap image into vector form (SVG). Loading SVG and morphing paths are easily done with the Raphaël.js library.


Click on the white arrow button to begin animating, click again to reverse the transformation, move mouse over each path to get it highlighted. Click here to see the artist‘s original paintings and finer SVG tracings!