End result

Why

For my video conference displays, I'd like to have a (subtly) animated background. Not too animated as to be distracting, but if you look close enough, you should be able to see that the background changes over time.

SVG animations

Instead of getting into Blender or ShaderToy, I decided to go with simple animated SVG. SVG has <animate> elements that allow me to specify how a single DOM node should animate over time.

In the end the background is just some Bezier curves morphing into another, and some CPU-gobbling filter effects for blur.

My goal is to create the illusion of waves travelling across the image by animating each path into the next one and having all these animations play in a loop. Here, only the second line is animated to animate into the third:

Workflow

I do the basic SVG editing in Inkscape, and luckily it keeps existing <animate> elements alive even if it does not know about them. Working in Inkscape makes it easy to get the layout of lines and trace existing images without having to guess the coordinates.

Inkscape does not display the animations, but that's fine, I add these later in a post-processing step.

<animate> tag

If all lines slowly animate into their next neighbour, this will create the intended illusion of lines flowing across the screen. The <animate> element is a good fit for my animation goal, with a small snag. There seems to be no easy way to tell SVG "animate from shape with id foo to id bar in 5 seconds". I can only describe "animate the shape of the element from this (explicit) path into another (explicit) path":

<path
 d="M 9.0454762,0 C -7.6337807,60.410349 -84.36489,310.51971 137.97241,386.67508..."
 id="line_009"
 ><animate
   attributeName="d"
   dur="20s"
   repeatCount="indefinite"
   keyTimes="0; 1"
   values="M 9.0454762,0 C -7.6337807,60.410349 -84.36489,310.51971 137.97241,386.67508...
           M parameters-of-next-line />
</path>

This animation between two paths is still workable, but I have to copy the path parameters into the animation parameters of each line and its preceding animation element whenever I change the shape of a line.

Perl

To update the paths in the animation elements, I wrote me a short Perl script that reads the XML, finds all lines that I want to animate, sorts them by X offset and adds an animation to them that animates the line into the next line:

my $dom = XML::LibXML->load_xml( location => 'lines.svg' );
my @lines = $dom->findnodes('//svg:*[@id="layer1"]//svg:path[@d]');

# Sort the lines
my %line_offset = map {
    0+$_ => $_->getAttribute( 'd' ) =~ /^\s*M\s*(-?[\d.]+),/i
} @lines;
@lines = sort {
    $line_offset{ 0+$a }
    <=>
    $line_offset{ 0+$b }
} @lines;

# Add animations
for my $i (0..$#lines-1) {
    my $line = $lines[ $i ];
    my $next = $lines[ $i+1 ];
    # Now, remove all animation nodes and other children:
    $line->removeChildNodes();

    my $ani = $dom->createElement('animate');
    $ani->setAttribute( 'attributeName' => 'd' );
    $ani->setAttribute( 'dur' => '20s' );
    $ani->setAttribute( 'repeatCount' => 'indefinite' );
    $ani->setAttribute( 'keyTimes' => '0; 1' );
    $ani->setAttribute( 'values' =>
        sprintf "%s; %s", $line->getAttribute('d'), $next->getAttribute('d') );
    $line->appendChild($ani);
}

open my $output, '>:raw', 'lines-animated.svg';
print $output $dom->toString;

Live reloading

I really prefer interactive tools when doing graphics, so to get away from manually reloading the SVG animation in the browser, I wanted live reloading of the browser tab whenever the file changed. Adding SVG support was a fairly simple addition to App::Mojo::AssetReloader, but work on that is not finished, as the animation resets on each reload. I need to think about how to preserve the current animation time. Likely this is "easily" done by saving the time from .getCurrentTime() and restoring it after reload via .setCurrentTime(). But then I also need to figure out how/when I want to reset the animation time to the start instead of keeping it.

Further ideas: WebMIDI integration / knob integration

Integrating the whole thing with WebMIDI would be fun for an all-in-one thing. Twisting a knob is so much more fun for adjusting animation parameters than manually editing a number via the keypad. I have MIDI and non-MIDI hardware though, so going a custom route is also interesting.