animated distortion filter pack

Started from the previous filter packs as a base -so with two hue rotations animated in the chain-, using them to alter the look of displacements. The filtered area is of the original object's bounding box, and affected image is composited over the original. In addition the offsetting isn't adjusted at all, therefore it is suggested to involve clipping when using these filters.



svg source

animated gas filter pack

Using the same smil animation on a hue rotate colormatrix filter primitive to produce a loop.
Not as gas looking as it could be, but at least the svg animation doesn't lag too much.
Way for improvement.



svg source



Edit:
Made another pack for the same concept, but with two primitives animated here.

halftone animated waves

Two very similar kind.

One has an animated reflection rendered with a still halftone filter,
and the other having a static reflection with the halftone effect animated.



svg source 1

svg source 2

animated waves 2

More in the animated reflection theme.
The hue rotation let's creating a repeating animation, so it was also the source for the concentric waves. Therefore the filtered object was an ellipse with a radial gradient fill of the spectrum.
Check the svg source for the animation.



svg source

animated waves

Been experimenting with filter animations, lately with wavy reflections.
The distortion is very simple, use a fractal noise for a displacement map. For the animation, add a hue rotate filter on top of the fractal noise.
Set the displacement map using the reds for x, and alpha for y. Because of the latter, make sure the source has 50% opacity everywhere.

In a nutshell.

Too bad this blog doesn't allow to embed svg-s (which is the main reason why I'm not up to thate with this recent work), so definitely check the svg source below.



svg source

endless knot

Animated with a filter. Since cannot embed svg-s here, follow this link to the real animation, not just a still image. A huerotate was animated so the spectrum fill seems moving.

The image presented here was drawn previously, with clipping, grouping, cloning etc. As somehow chrome doesn't composite clipping right, had to eliminate those for the animation and ended up redrawing the whole thing in a different z-order. Here is a video of the issue.

So the original had a z order of top to bottom like black stroke, gradient fill, black stroke, gradient fill. By that, these outlines can be switched off and their widths adjusted.
The animated one has two layers of gradient fills atop eachother with the black outline atop in a third layer.

A slightly larger version of the still image is available here.



Edit: made some improvements, this version looks closer to steam circulating around.

noisy transmission

With the "animate" tag, starting to experiment with animated filters. This time, turbulence primitive's seed value and an offset value is varied. Somehow chrome doesn't really follow the duration time. Also it gets laggy by random with size. 



svg source 1
svg source 2