Vlog.it, 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.


  • Gravatar , Casey Yee said: 1

    Hey man, real cool stuff. I really dig the effects and transitions on the page. any insights about the build? what were some of the challenges? what besides the drawing libraries did you use? would you be open to sharing the code? perhaps even a tutorial? (i know its asking much!) :)

    Good stuff

  • Gravatar , Tom said: 2

    Awesome project! I’d love to see the maths behind the wheel or how you got to the dynamic images around the wheel to crop and move into position/animate. I think a lot of people would ;)

    Great job!

  • Gravatar , Marco Rosella said: 3

    Hi Casey and Tom, here’s a behind-the-scene/tutorial i wrote about vlog.it on Web Designer Wall:

  • Gravatar , praveen vijayan said: 4

    vlogit is just super cool & inspirational.

  • Gravatar , Marco Rosella said: 5

    thank you praveen

  • Gravatar , Inspirational Websites Set 4 Containing Fresh and Latest Sites | All Design Stuffs said: 6

    […] Vlog Vlog is an absolutely awesome experiment on SVG created by Marco Rosella. Vlog is a random HTML5-powered (with SVG animations) rotating collection of his 313 Vimeo Likes and 1011 YouTube Favorites. To know more about the experiment check post on his site centralscrutinizer […]

  • Gravatar , Sagar Ranpise said: 7

    Absolutely awesome experiment! I hope you liked it to be showcased on my blog!

  • Gravatar , Piergi said: 8

    Doesn’t work without Javascript?
    I thought it was HTML5+SVG.


  • Gravatar , Piergi said: 9

    By the way, amazing design! :-D

  • Gravatar , Marco Rosella said: 10

    Thank you. It’s an experiment with motion graphics with SVG (by the way, there’s not a “+” with HTML5, it’s included in the specs of the latter), and javascript works for the correct separation of the behavior from the markup, avoiding an heavy HTML full of svg’s tags (impossibile to manage without variables, loops etc. of the js).
    Here the presentation is the main content: if it was the case of a different site with a lot of text, I could build it with the progressive enhancement in mind.

  • Gravatar , Danelle Menzella said: 11

    I’m not really a whole lot of a on-line viewer actually but the web page extremely decent, continue with the fine work! I am going to take note of your webpage and revisit later on. Regards.

  • Gravatar , nana said: 12

    syg ikmal tap ikmal x syg nana lag

  • Gravatar , Lini said: 13

    how i can make vlog???

  • Gravatar , francesco carabelli said: 14

    ciao amici di Vlog!Salve amici dell’ ENS!
    vi scrivo dalla redazione di Volo in diretta, il programma condotto da Fabio Volo in onda su Raitre.

    Nella puntata che andrà in onda stasera dalle 23.20 a 00.00
    avremo ospite in collegamento da Roma
    MASSIMILIANO MONDELLO, l’interprete di Lingua dei Segni Italiana per Sordi che lavora per il tg3 LIS.

    Nella puntata, l’ospite qui in studio a Milano sarà il giornalista del Tg3 Mannoni.

    Con lui si parlerà di quelle parole del linguaggio giornalistico che vengono abusate
    e di cui spesso si dà per scontata la conoscenza nel pubblico
    (tipo spread, sistema elettorale porcellum, bicamerale …ecc):

    Mannoni dovrà riuscire a spiegarcele in modo chiaro e sintetico
    facendosi aiutare appunto da Massimiliano col linguaggio dei segni!

    siamo lieti di ospitare Massimiliano!
    facciamo un po’ di pubblicità alla cosa!
    grazie mille

    redazione Volo in diretta

  • Gravatar , Puls zycia sprawdziany do pobrania said: 15

    Puls zycia sprawdziany do pobrania

  • Gravatar , Phebe Perrott said: 16

    I have to tell you that it’s hard to find your articles in google, i found this one on 14 spot, you should
    build some quality backlinks in order to rank your site, i know how to help
    you, just search in google – k2 seo tips

Leave a Reply

Here's the list of topics.