Create an animated SVG wallpaper – searching the WOW effect.

High fashion today in the field of web design is to show that we can take advantage of the latest Webtechs by loading CSS3 effects and javascript, based on html5 .

Hence the parallax effects, horizontal sites, puzzles, games, etc. … with canvas beacons… and I forget, often bringing only 2 minutes of distraction, each visitor subculturing and improving, when he can, the ideas of others.

The arrival of SVG tag is also important because it « forced » to have the latest browsers supporting this format natively ( in the case of IE9). We can interact with the elements included in this tag using javascript (Raphael.js) but in this case we must consider the SVG as part of the site, a frame not a picture.

And this is what bothers me-

In fact we can even assign a CSS3 background to the tag-as well as <body>, so that one can decorate a vector image with a pixel image (photo) without making part of the SVG beacon.

You can also animate and render all interactive as in this example: http://www.netriver.co.uk/demo/animated-svg-background.html (thanx to http://davidsbigthoughts.blogspot.fr/)

I personally have a more affordable solution, I applied to this blog:

I call my SVG file containing SMIL animations by CSS! Such attributes are part of the image itself and are understood by a compatible browser: your wallpapers are moving 🙂 Warning: this does not work with javascript animations and you can’t interact with it . In the case of a browser that does not support SMIL you have to « think » your image as a fixed one. Of course you can think about doing the same by calling a .gif cinemagraph with CSS, but the weight will not be the same (!)

Ditto for CSS animations, if you do not have the software (expensive) good luck … Here my file weights only 10 K0 and 22 K0 for this example:

 

Nota: For those telling that it’s heavy looking at cpu loads I’ve got 2 Tips:

  1.  You can stop it once by pushing “Esc” key
  2. Want to make it with flash? Hey let me know and show me something “universal” and lighter that you can stop whenever you want.

SMIL Animated star button

Today one little thing;  I’m preparing  something bigger . I just need more time;

This is an animated star with SMIL attributes, even I know we can do it with ecmascript.

So I’ve tested there a synchronisation between all elements after an interaction with the visible star.

Well, if you want the interaction working well you have to implement it in a Html5 based page ,there you’ll have to display it full to see the animation; to adjust size and position change the height, width and viewBox parameters.

Study it to understand 🙂

You can do almost the same  with CSS3 I think, but with multiple images called, must be heavier than that…

A QRCode ‘SVG + SMIL’ based game

That’s not a new idea, someone has already given it a name: Qrcoderoulette;

the idea is to submit multiple QRCodes to the user who has to fall on the « right one » not pointing-for example- on an internet shock site, putting at risk the device scanning these codes.
But all this remained hopelessly static and require more display space on the concerned page. (Http://blogs.mcafee.com/mobile/no-winners-at-qr-code-roulette)
I do not wish here to implement this type of practice, I take the idea in order to make -at choice: a game, a joke, a piece (!)
How to reuse the concept saving space, attracting the eye and interest?
Take inkscape, SMIL attributes, an Internet browser, mix them together and you get something like this:

qrcodejeu

Note: my animation is not perfect because there is a gap between two QRCodes. Image weight: 44.8 KB

Here 2 QRCode on 3 refer to the phrase “you’ve lost”, the other pointing “www.fabkzo.com”; changing colors and animation are just there to spice up the game, this idea can be used for competitions, small gains etc etc …

Obviously we could do animation in javascript or .gif format, or anything else, I’ve chosen SMIL for its ‘natural’ implementation in most browsers (except IE of course, and it seems some browsers’ mini ‘smartphones like Opera mini), animations are part of the image and might not be blocked unless you decide not to display the picture.

In the case of these browsers that do not support SVG animations I propose converting it to video (. Ogg,. Webm,. Mp4). If you find a (simple) way to convert it to .gif just let me know.

Don’t forget to remove any way to easily determine which is the winning qrcode.

If you want to learn how to make yours, follow me there ==> Coming soon

 

SVG rotations with SMIL

Trying something misused

This is my own complete creation, made last year. I wanted to innovate and start from nothing, creating a « logo »and  a slogan I had never met. It ‘s time for me to share it, you can use it only for personnal use.

naturetakecare2

Licence Creative Commons
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Partage dans les Mêmes Conditions 3.0 non transposé

it represents what I love with SVG and animations : You can edit it in inkscape directly and work on it, print it, export it as usual, but when you open it with the right browser …. tadaaa! it turns 🙂 (you’ll just have to remove the 1ms ie case path before )