Advertisement
  1. Web Design
  2. SVG
Webdesign

SVG Brilliance: 10 Inspiring Examples From Around the Web

by
Length:ShortLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Inspiration: Online Stores Where Products Are Placed Front and Center
A Few Juicy, Inspirational New Websites

Scalable vector graphics (SVG) need no introduction for web designers. They scale up and down crisply, play nicely with animations, they’re a powerful format for icons and so much more. This inspiration post is part of an ongoing series at Envato Tuts+, pulling together a list of ten websites which make inspirational use of SVG in a tech or a creative sense.

Waark

Waark is a creative web studio which prides itself in creating elegant and functional custom-designed websites. When first released it took the community by storm with all its glorious, cutting edge motion leveraging Canvas and, of course, SVG.

httpwaaarkcom
waaark.com

Some of my favorite motion happens in these types of loading sequences where the middle graphic comes to life on page load and continues with subtle movements. Its also good to note that most of the SVG animations are using the GreenSock library. Make sure to watch this video posted from I Hate Tomatoes deconstructing in further detail:

Supremo’s Typeterms

Type Terms is an animated typographic cheat sheet. If you’re new to typography, or just want to refresh your memory, Type Terms is the perfect tool for you.

httpswwwsupremotvtypeterms
www.supremo.tv/typeterms/

A really inspiring use of SVG to teach about typographic terminology. Each character of the lesson calls to attention the term of discussion making it easy to identify what’s being presented. While I don’t consider this site to be technically inspiring, I find its use very creative. Many of the SVG motion examples are split up bits, using CSS for the movement.

Cuberto

Cuberto is a digital creative agency based in the United Kingdom and is a team with a keen eye for design and motion. The way the Cuberto website uses SVG is just wonderful; from simple letter movements, to the tiny mouse indicator giving insight for the user to scroll.

httpcubertocom
cuberto.com

Each of the letters’ motion is 100% SVG. Cuberto utilizes masking in order to make each character form with separated texture. A very inspiring site and creative use of SVG and motion. A final note is GreenSock fanatics will be excited to know that GSAP is in use. Awesome.

Horizon

Horizon is what they coin as a “Realtime JavaScript Backend” that helps to rapidly build and deploy using a simple API.

httphorizonio
horizon.io

My favorite part about this site, and really the only place that uses SVG, is the screens that contain a moving scene. This uses GSAP and a series of masks and clip-paths. The other aspect I really enjoyed discovering is the fact that you can nest an SVG inside an SVG! Amazing!

SVG Porn

Where do you go when you want quality SVG logos? SVG Porn of course! A great collection of logos for developers, publishers and designers that cover a large spectrum of categories. 

httpsvgporncom
svgporn.com

It's simple, intuitive and to the point. SVG Porn provides a space for SVG logos (including this familiar example above) which are open to the public that are optimized (having removed duplicated paths, without excessive grouping, no empty defs, linting, etc.) and available on GitHub.

React Icons

This particular tool shows how to create mathematically-generated graphics using SVG, JavaScript and React.

httpjxnblkcomreact-iconslive-demo
jxnblk.com/react-icons/#live-demo

Using each slider, a user can update the SVG path points and even change the diameter.

This is used to create pixel perfect, mathematically-derived graphics that most applications can’t get right. I love these kinds of tools displaying code live as you update and become almost magic-like as the graphic morphs and changes shape when moving each slider. Truly inspiring and truly fantastic.

Fleximize Squad

Fleximize is a company which offers small businesses financial lending with a mission to revolutionize the world of business funding.

Fleximize Squad is a playful experience based entirely on SVG animations. Through three different interrelated stories, users can access a smart way to ask for a loan.

httpsfleximizecommission
fleximize.com/mission

This mind blowing site brings together audio with SVG motion and, of course, using GreenSock. This is a very linear experience, so don’t expect to hit the back button with this monster, but it is still a fantastic example you will enjoy for days with the DevTools inspector open.

Mo.js

The Mo.js project by LegoMushroom is a library for creating fast, silky smooth animations and effects for the Web.

What I find really inspiring with this project is the use of physics in the motion, such as blurs, bouncing, and so much more–plus it’s open source and anyone can contribute to help improve the code under the hood. Did I mention it also combines audio? Check this project out immediately!

Demos: https://github.com/legomushroom/mojs#demos

Trulia: Rental Resumé

Trulia is a mobile and online real estate resource that makes finding a home by providing buyers, renters, and sellers the insights they need to make informed decisions about where to live.

httpwwwtruliacomrentrental-resume
www.trulia.com/rent/rental-resume

Sometimes the most satisfying motions are the ones which are subtle, and in this case that’s exactly what captured my attention. This SVG animation (designed by Jon Campos, animated by Sarah Drasner) really sells the idea on submitting a resume and walks through the steps visually on how easy a form submission can be. So much awesome that’s every bit SVG and GreenSock.

SVG Generation

Want some killer SVG patterns for your next project? SVG Generation is a great place to get those and customize before you download. Create anything from complicated zig-zags, coils, cubes, striping and so much more. Even blue jeans:

httpwwwsvgenerationcomrecipesBlue-Jean
www.svgeneration.com/recipes/Blue-Jean

Customize parameters such as stroke colors, size and fills. A killer project that’s also open-source on GitHub. You can checkout another great SVG pattern maker by Philip Rogers and based on Lea Verou’s CSS3 Pattern Gallery.

Circulus & SVG Coordinate System Viewer

Anyone that understands SVG knows Sara’s work. I chose both these demos as I find them truly useful in every sense of education and in a project form.

If you have a hard time understanding what the viewBox attribute does look no further. This demo will remove the mystery that is viewBox and show you in realtime how the values affect the result. Outstanding work Sara!

httpssarasoueidancomdemosinteractive-svg-coordinate-system
sarasoueidan.com/demos/interactive-svg-coordinate-system/

Circulus is another one of those real-time demonstration tools that can also be used to include the result in your project. Circle menus are pretty hip especially when you can watch them created and customized right in front of you!

Conclusion

SVG is all around us on the web these days! Let us know which inspiring websites you’ve spotted SVG brilliance on, and check out these learning resources on Tuts+ to get yourself up to speed:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.