You can do some pretty crazy stuff with SVGs. It’s possible for developers to code graphics onto a page without any image files just using the SVG & canvas feature.
This leads to really cool projects like the pure SVG landscapes I’ve listed here.
All of these projects are totally free to edit and clone on CodePen. They work on SVG code along with some basic CSS & JS to create animations, distortions, and parallax effects.
This example of a beautiful bay landscape was developed by Louis Coyle. It follows a poly-styled look mimicking the polygon display typically found in 3D rendering.
Louis uses the TweenMax library to create the animations which are elegant in both style and code.
If you’ve ever wanted to dig into raw SVG code this snippet has plenty to learn from.
Low Poly Landscape
Here’s another landscape modeled after the low poly look.
This one comes from developer Luke Reid and places a much stronger focus on 3D effects. The whole layout feels very real, and the sky gradient sprinkled with stars breathes life into this design.
SVG Landscape Animation
Evan Winston developed this custom animation which slowly drops all visible elements into view.
It’s a pretty cool effect, and it’s something that anyone could create. Granted this may not be so useful as a huge background illustration, mostly because of the time required for the animation to complete.
But you could do something similar with custom SVG icons on a website. There are plenty of tutorials out there to help you design basic SVGs and then animate them using code from the snippet above(also running on TweenMax).
For a basic lakeside view I’m really digging this SVG snippet. It sports a few basic page animations like the waves in the water and clouds in the background.
Modern CSS3 animation is most useful in websites with UI/UX animations but you can use it for landscapes or illustrations too. That’s half the fun of being a developer.
This winter landscape is a reminder of the crisp white snow we see every year.
I’m most impressed with the quality of the easing effects and how well this works in the browser.
Based on how many elements are animating into view I would’ve assumed a bit of sluggishness, yet it loads incredibly fast considering how much is happening.
Not to mention the animation of the sun coming out from the tree is just plain delightful.
We’ve seen massive growth in flat design trends and semi-flat designs that all use basic colors without gradients.
This snippet follows the same style with hard edges for the shadows and corners.
It’s a beautiful snippet and certainly one of the easiest SVG-only landscapes to work with. Even if you’ve never used SVG code before this snippet offers plenty to look into and lots of SVG/XML attributes you can search on Google to learn more.
Developer Amr Zakaria created a similar flat design with this landscape using animated boats and planes to grab your attention.
The whole thing runs on pure CSS and works with some pretty clear CSS keyframe animations.
All of this can be replicated for a background on a webpage if you have the patience to get it working. The toughest part is getting this to be fully responsive for mobile screens.
Out of all the parallax effects on the web this one is very basic. However it’s also quite impressive since the whole thing works on just CSS, no scripting required.
All the elements including the street lamps are designed with SVG shapes and CSS effects.
If you look real close you’ll notice the lamps actually use the CSS shadow effect to create a realistic glow.
In this updated SVG landscape you’ll find a slew of custom elements that bounce into view.
Creator Stef van Dijk pays careful attention to each animation by adding bouncing and gravity-like effects with each piece. For example, when the mountains drop into view you’ll notice a rebound effect from the ground.
This is what you get when you pay careful attention to detail and it’s why I’m such a big fan of modern web animations.
SVG & CSS
Layers of the landscape slowly come into view, and they all have their own keyframe animations. But once they’re in view you’ll notice some elements keep on moving(like the sun and clouds).
Designing something like this takes a lot of time. But it’ll also get you real familiar with SVG syntax along with the basics of CSS animation.
While this landscape is very simple I also think it’s a great teacher for new frontend coders.
Felix De Montis built this project from scratch with a small amount of SVG code for the grass, hills, and trees. It’s easy enough to replicate that and change the positions using CSS too.
Overall if you’re into simple SVG designs this one is a great place to start. Felix also uses the LESS preprocessor if you’re looking for something beyond basic CSS.
Chris Gruber developed this immaculate parallax landscape which moves based on your mouse movements.
But along with that he also animated certain page elements like the sailboat and the background clouds.
The post 12 Landscape Scenes Built Entirely With CSS & SVG appeared first on Speckyboy Web Design Magazine.