12 Landscape Scenes Built Entirely With CSS & SVG
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.
Hawke’s Bay
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.
It’s a popular effect with SVG and JavaScript, but it’s certainly not simple to pull off.
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.
If you look at the JavaScript code you’ll see the star positions are generated randomly. This is a cool effect if you’re ever designing an SVG background or hero header style.
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).
Marine Landscape
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.
All of this stuff is pretty easy to do with a little JavaScript. But you’ll notice this snippet is made with pure css making it even more impressive!
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.
Winter Landscape
This winter landscape is a reminder of the crisp white snow we see every year.
Andrey Sorokin created this basic animation with just SVG code and some JavaScript. It can be slow to animate so you may have to give it a minute to see the full effect.
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.
SVG Scenery
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.
Natural Landscape
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.
Parallax Lights
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.
Basic Animations
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
Have a look at this pen for a supersized background animation. This whole thing works on SVGs and pure CSS without any JavaScript.
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.
Grass
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.
Parallax Page
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.
This all requires very little JavaScript since it operates on less than 20 lines of jQuery. All the more impressive considering how detailed this is.
The post 12 Landscape Scenes Built Entirely With CSS & SVG appeared first on Speckyboy Web Design Magazine.