Archive for the 'SVG' Category a zoomable interface with SVG

Last december 15th, I wrote in this blog: “Anyway, I’m currently working on a new site, my “self-titled”, maybe online next week.”
Well, the ‘maybe’ was useful for the following days because the challenge I imposed to myself was very hard: after, I wanted to show in a HTML5 site one the main super-power of SVG, scalability, creating a zoomable interface like the epic series of Flash sites of the late 90s that introduced the concept of depth in web design, something usual after the arrival of Google Maps.

(This is a post in progress)

Nomination at the SXSW Interactive Awards

Just a quick note to announce that for the second time (I won in 2007 as ‘Best CSS’) I’ve been named as a finalist – with – for the SXSW Interactive Awards in the ‘Motion Graphics’ category. Go SVG, go!

Awwwards SotD and more…

After two months and half, it seems that has been well received out there, from SVG/HTML5 guys to motion graphics passionates to simple video lovers, not forgetting my neighbour Gustavo – a man with very personal tastes – that says that is “Ok.”.

For example, it won:

Awwwards Site of Day

CSS Design Awards SOTD

The 1° position in Design Charts

or for example the (more…)

Playing with SVG Design

I wrote a guest article for Web Designer Wall:

Playing with SVG Design

a “behind the scene” of with a small tutorial to create what I call a “wheelayout”.

SVG logos vs. pure CSS3 logos

I like so much the recent experiments with HTML + CSS3 pure logos, great examples of creative use of :before and :after pseudo-elements and border, transform and gradients new properties.
But: for ‘real’ pages will you spent hours and hours to combine a lot of tags (semantics 404?) and a lot of selectors to just create something difficult to transform, scale and animate? This remembered me the guy that in 2004 jokes to build a page with only <small> or <big> tags.

Maybe in this case is better use SVG: for example… (more…), SVG version
To introduce my new experiment, I will begin from my memories like grannies or business managers with black long-sleeved mock turtleneck.
In late 2003/first months of 2004 I was exploring, among the other things, two new aspects of the web world:
(next slide- stock image with people angry with computers and smiling videomakers on fisheye)
SVG: the Scalable Vector Graphics standard that deceived a lot of people for his potential alternative to Macromedia Flash, but was stopped from the lack of Microsoft native support until the born of Explorer 9. Here’s a simple file i made later for this blog for the first Mozilla native support, or here’s the paper of the tool i worked for as researcher, introduced at SVG Open 2005);
videoblogs: a lot of expert or wannabe videomakers started to use the web to let their creation available to people as .mov files linked by thumbnails in Blogspot posts, extending the experience to the jungle of icons of your desktop where the files were downloaded.

(next slide- stock image of a dawn and smiling people playing ring-a-ring-a-roses [or better, rosellas])
thanks to Javascript libraries like SVGWeb or Dmitry Baranovskiy’s Raphaël (that I chose) plus the native support the target of SVG is near to 95%, and in the years i collected hundreds of motion graphics masterpieces or vintage unforgettable footage, so I could created in last few days a circular rotating paper’s collage-like HTML5-powered motion graphics primitive shapes SVG animations-fueled like-and-favourites-from-Vimeo-and-Youtube showcase as the fourth version of :

(next slide- stock image of handshake)
Updates (still some bugs around) in this post or in my Twitter or Facebook profiles.


TextorizerTextorizer is a tool that transform a raster image in a vectorial image selecting edges e replacing them with text inserted by user.
The exit format is not a Flash movie, like some previous tools very similar, but a small size SVG file, available at last to “the big audience” (that didn’t download the plugins) thanks to the recent native support in Firefox 1.5.
Source code in C and PHP languages is instead available in this page.

Here's the list of topics.

Here's the months' archive.