Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Using Javascript to animate SVG with filter

Want to achive a reverse blurring effect

1:37 pm on Jan 19, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
votes: 0

I don't know if this belongs in Javascript, or XML Development or not, but here goes...

I want to use SVG for a logo, but have it animated, so that it starts blurred, and then becomes clearer over a couple of seconds. The main images is essentially a circle, and I'm using SVG gaussian filters to achive the effect, with animation via Javascript.

The full file is as follows:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
<svg width="4cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1" onload ="deblur()">
<filter id="blur" x="-10" y="-10" width="300" height="300">
<feGaussianBlur in="SourceGraphic" stdDeviation="60" id="wdth" />
<style type="text/css">
text {font-family:'Andale Mono','Lucida Console','Courier new'; font-size:

<script language="JavaScript1.2" type="text/javascript">
var wdth=60;
function deblur(){
document.getElementById('wdth').setStdDeviation(wdth, wdth)
wdth-=5; //can be changed to make it smoother
;//maybe need to remove filter here?
<desc>Visiongain logo</desc>
<circle id="vgc" cx="799" cy="184" r="200" fill="#0066ee"

filter="url(#blur)" />
<text y="220px" x="0px" fill="#0066ee">vision</text>
<text y="220px" x="610px" fill="white">gain</text>

I've been testing with Opera 9 (Firefox I don't think handles filters just yet).

Anyway, the problem is as follows: the circle starts nice and blurred, and gradually gets sharper, as desired. But after a certain stage, the edges get reasonably sharp, but not perfectly crisp. But even worse, is that it's not a circle any more. It's as if the whole thing is pixellated.

So am I going about this the right way? Or am I running into a bug? I think it would fine work with increasing blur, but it doesn't seem to this way. I thought of somehow removing the whole filter when the radius is so small, but I guess this would jump a bit. I thought of drawing a new circle, but this seems clumsy.

I just want to get my pure circle back once the animation is complete. Any suggestions?

[edited by: R1chard at 1:40 pm (utc) on Jan. 19, 2007]

1:17 pm on Jan 22, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
votes: 0

I guess Media might not be the best place - Just wondering if a mod could move this to somewhere more techy, as appropriate?
3:37 pm on Jan 22, 2007 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
votes: 0

Hi R1chard

Is there a specific reason why you have chosen the JS/SVG route?

I'm sure there is a JS guru here ho'd be able to supply you a neat slice of code...

But to me this rather seems like you are making work for yourself. Adding a simple animation of this type could quite easily be done using animated GIF or Flash.

If you want the SVG for print, then you could substitute it using CSS import.

12:55 pm on Jan 23, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
votes: 0

Thanks for the reply.

Well, we had developed the SVG logo just because we wanted it in SVG (we will probably use it for multi-purpose, including press packs, and also projection onto our cinema screen. I also notice that Wikipedia recommends SVG as the default image format in their media commons, which we may submit to later on)

And since we had it in (satisfactory/static) SVG, we thought we would go the extra step and make it exciting with the short (and bandwidth-negligible) animation.

In much the same way that I prefer DHTML over Flash for text animation/transitions, I figured this dSVG would be quick, easy and standards compliant. But that's when I ran into this unusual problem with the blockiness. I'm still not entirely sure if it's a coding bug on my part, or an implementation bug in the Opera browser.