Menu

Marbling Animation: An experiment of svg animation on marbling

Home / portfolio / Marbling Animation: An experiment of svg animation on marbling

SVG+marbling+animation

I have been tring to find different ways of using my marbling patterns. Turning marblings into svg gave me quite a some inspiration and motivation on web programming. The image-traced marbling svgs are normally amazing, yet giant due to complicate colors and shapes.

As you can tell from my webpage, I have been using Vivus to add simple animations to my svg files and absolutely had fun during the process. I did something simialr to marbling patterns and they are charming to look at.

Let's take a look at an example here.

First, get an original marbling scan and use Illustrator to image-trace. A full marbling can be giant after the image tracing, so I am only showing a part of it.

Since Vivus has the limitation of only animate strokes in svg, we need to add strokes to the svg files. I used javascript to add so the stroke color match the fill color, but manually doing it is ok.

Lastly, let's call vivus! For web-programming, it's easy to import and use vivus.js, but for simple and not-likely-to-change tasks, vivus also provide this wonderful instant-tool where the animations can be added and stored in svg files.

After viewing the example, let's see a complete example. In this example, I also added animation for fills, yet the fill style in the default svg animation doesn't look like a drawing, so I might need to do some future work on this.

Click on the button below to load the image. Note: the loading would take some time, thanks for being patient.

Share