web design

10 Cool and Inspirational SVG Examples

by Mike Ditka

10 Cool and Inspirational SVG Examples – SVG is a vector graphic image format. It literally means Scalable Vector Graphics (SVG). SVG has so far been built on a royalty free basis developed and managed by the W3C Working Group. Basically, you can use SVG on the web easily, but there’s a lot you should know.

SVG looks like HTML, because they are both basically XML (tags that are named in parentheses and contain their content). SVG also supports almost every browser out there and only has issues with IE8 and later and Android 2.3 and below. In this article, TWD will present 10 examples of SVGs that we think are quite interesting to look at and hopefully become motivational.

  1. Trajan
    Trajans are very interactive, allowing you to choose which part of the image to pull out. This is a very nice animated deconstruction of architecture for you to see.

Trajan

  1. You! Animation and Audio Sync
    You is a synchronous andio and graphic animation combined with SVG, javascript and camera simulation. Created by Vincent Hardy.
  2. Animated Song Lyrics With SVG
    SVG This lyrics is a work of Vincent Hardy. It combines SVG, webfonts and audio tags to create fun, visually animated lyrics that sync with the music track.

Also Read: Collection of SVG Tools for Web Designers & Developers

  1. Analytics with Raphael and SVG
    Analytics with Raphael & SVG is a javascript library that helps simplify vector graphics on websites. Supporting browsers from IE6+ and up, this site has some cool and impressive SVG examples of data visualization.

Raphael

  1. Creepy Mouth
    Creepy Mouth is an experiment that allows you to see inside a human’s mouth with SVG. It combines vector graphics with animation to help improve online education in the way that FLASH did a few years ago.

theCreepyMouth

  1. Rube Goldberg machine
    In this example you can see a paper airplane fly past to hit the ball which then triggers another chain reaction, causing a domino effect and finally the lights go on, check here.
  2. Envilen EM
    Enliven ’em is a Jquery plugin that lets you animate any vector graphic in SVG form in different ways when the illustration is visible in the viewport’s browser viewport.
  3. Trianglify
    Trianglify is a javascript library for generating colorful triangles that can be used as SVG images and CSS backgrounds.

trianglify

  1. Page Loading Effects
    Page Loading Effects is a collection of very creative loading effects created using SVG animation with snap.svg. The idea is to show an overlay with an attractive animation shape when new content is about to load.
  2. Blobular
    Blobular is an example of an SVG created by Cameron Adams. It allows you to change the color, thickness, and size easily. You can experiment with expanding the edges of blobs, you can draw, combine blobs. Interesting enough to try.

Blobular

—

Those are some very cool and interesting SVG examples that you can try, hopefully they can inspire you, and make you love the world of web design even more 🙂

Greetings Indonesian web design.

Share To Social Media