In this Post ...

I experiment with using SMIL to animate SVG artwork inspired by nature.

Motivation

Continuing down the path of SVG Framework development I've recently been exploring the application of various techniques in an effort to catalog the different approaches to animating SVG. Recently, I was inspired by rare footage captured of a giant squid off the coast of Antarctica.

I've long been enthralled by nature-inspired art. Back in grad school I came across the works of Ernst Haeckel -- a famous biologist / artist and contemporary of Charles Darwin. Haeckel is renowned for his work, Art Forms in Nature in which he produced amazing depictions of a wide range of marine life with unbelievable detail achieved using line and color.

Figure 2: An example work from Haeckle's *Art forms in Nature*.

So when I saw the video of "Gonatus Antarcticus" I couldn't resist taking up an experiment in animation using SMIL.

The Animation

The subject of the squid in its natural habitat presents an ideal against which to test the limits of animating using SMIL. SMIL is one of several techniques that can be used to animate SVG content. Rather than thinking of SMIL as an "alternative", or, "competator" to CSS I see it as one of a number of technologies that can be brought to bear in creating SVG art. CSS may suffice for creating simple animations. Javascript can be used for a far wider range of effects. To me, SMIL falls somewhere in between. SMIL is ideal for:

1. Using a declaritive style to specify animation parameters,

2. Embedding animation to create self-contained modular SVG files,

3. Animating mulitple component parts on independent timelines.

One of the greatest benefits of SMIL (and something you simply cannot achieve in CSS) is that it can be used to morph paths over time. This capability provides rich support for animating organic shapes and features as can be seen with the squid example.

In this example, based on informal observation, I wanted to test the limits of SMIL by trying to animate 3 features increasing in complexity: (1) translation and rotation of the organism (to give the sense of the organism floating in the currents) (2) the flaps or fins on the creature's nose, and (3) the tentacles. The model is composed of largely organic shapes, for which SMIL is ideally suited. Below is the animation I created.

Reflecting on the Process

One of my goals in working through this animation was to understand and define a process for artists to animate content using SMIL. I find some things are simply best understood through hands-on experimentation.

First, the SVG model I created is necessarily a simplification. Nowhere near as intricate and detailed as naturalist's illustration since my intent was a quick experiment in animation. Nonetheless, I tried to capture some of the interesting features of the specimen well-suited to expression with SVG -- features like the bioluminescent outer skin, the underlying texture, etc..

In order simplify the most challenging of the animations, I deliberately reduced the number of tentacles in the model. I wanted to animate a sort-of abstract propulsion stroke cycle with clear bio mechanical intention. I wanted to see what challenges I'd come up against working to achieve a believable deformation across the key frames I created to represent the cycle:

1. A streamlined phase with tentacles tightly and aligned (a sort of post-pulse gliding state),

2. A preparation phase with tentacles relaxing and spreading to gather potential energy preparatory to a pulse, and

3. A power stroke with tentacles contracting.

Again -- make no mistake -- my aim wasn't so much to reflect the actual movements of the squid as to explore the challenges of creating a believable motion that "looks OK" given the constraints of morphing the Bézier paths I used to construct the model.

What I found was simultaneously encouraging and intimidating. Animating the outermost tentacles using SMIL worked surprisingly well given the tooling I had on hand. Basically I used Inkscape to define key frames and manually converted the data to SMIL animation tags (an exercise not for the feint of heart!) Since their control points follow more-or-less predictable, arcing trajectories across the phases of the propulsion cycle, it was relatively straight forward to define keys such that the structures remained consistently shaped. Animating the intermediate tentacles using SMIL proved more problematic. As the motion nears the squid’s mid-line, the Bézier paths become more tightly coupled in space, and achieving believable deformation across key-frames requires a delicate balance. In short I quickly discovered how sensitive SMIL path morphing is to even slight inconsistencies in control point placement and direction. Maintaining consistent shape and curvature across frames is critical -- and surprisingly difficult.

Looking Ahead

Despite these frustrations, the experience helped me clarify and better understand the strengths and limitations of SMIL animation. It helped me to further identify existing gaps in libraries and tooling currently available to support SVG. Going forward, one of the key challenges in expanding the SVG Creators Collaborative ™ Artworks Framework will be developing intuitive tools to make working with SMIL more efficient, flexible and expressive.

Resources

1. Art Forms in Nature