homepage Welcome to WebmasterWorld Guest from 54.237.95.6
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderator: open

Site Graphics and Multimedia Design Forum

    
Using Javascript to animate SVG with filter
Want to achive a reverse blurring effect
R1chard




msg:3224800
 1:37 pm on Jan 19, 2007 (gmt 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"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1" onload ="deblur()">
<defs>
<filter id="blur" x="-10" y="-10" width="300" height="300">
<feGaussianBlur in="SourceGraphic" stdDeviation="60" id="wdth" />
</filter>
</defs>
<style type="text/css">
text {font-family:'Andale Mono','Lucida Console','Courier new'; font-size:

160px}
</style>
<script language="JavaScript1.2" type="text/javascript">
var wdth=60;
function deblur(){
if(wdth>0){
document.getElementById('wdth').setStdDeviation(wdth, wdth)
wdth-=5; //can be changed to make it smoother
setTimeout('deblur()',1);
}
else
;//maybe need to remove filter here?
}
</script>
<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>
</svg>

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]

 

R1chard




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

I guess Media might not be the best place - Just wondering if a mod could move this to somewhere more techy, as appropriate?

limbo




msg:3227622
 3:37 pm on Jan 22, 2007 (gmt 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.

R1chard




msg:3228623
 12:55 pm on Jan 23, 2007 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved