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.
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.
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.
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.
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.
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.
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.
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.
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 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:
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!
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:
![]()
SVGFree Course: Using SVG Sprites![]()
QuizQuiz: Do You Understand SVG?![]()
SVGHow to Use “animateTransform” for Inline SVG Animation![]()
SVGCreate an Animated SVG Loader Using GreenSock’s DrawSVG![]()
SVGSVG Files: From Illustrator to the Web
