Creative SVG Backgrounds for Modern Web Design

Share it with your friends Like

Thanks! Share it with your friends!

Close — In this tutorial, I show you how to create creative SVG backgrounds and then how to integrate them via HTML and CSS. Enjoy this quicky!


sean baraka says:

Cool stuff,, thanks

Daniely Wright says:

There’s actually a VS Code extension named Live Server that’s pretty cool.

Stephen Lai says:

This is an awesome tutorial on creating UI from scratch and converting them to html, css!!! Thank you so much Mr. Simon!!!

asad uzzaman says:

motherfucker disliked this video

J D says:

There are big problems on Chrome, especially Chrome mobile browser, with scroll performance when using SVG images – if the images are used in the header only it's not as noticeable. I'm currently experiencing this and going through the process of replacing all SVG images with pngs. SVGs don't cache well, especially in responsive pages, and have to be constantly rerendered by the CPU, which causes spikes of low FPS

Sagar Kapasi says:

prior to watching this; i didn't knew svgs could have so much characteristics to it

Molly Urs says:

OMG I’ve been looking for this for like 3 months, I owe you my sanity

Oliver Gomes says:

Beautiful !!

Steve Bond says:

When I export the resulting left and right graphics are HUGE! is there a way to keep the relative sizes when exporting or when setting up the css please?

Mohammed Junaid says:

As always..Simply Awesome ✌️

Smakosh says:

use flex or cssgrid instead of float

Smakosh says:

path finder is on the right side of ur Adobe Illustrator 🙂

Code Inspire says:

very cool tutorial , thanks 🙂

G6 Gaming Society says:

how cool! good job!

Lexi Husky says:

hey i want to ask i got a problem when i export that right and left asset in to the svg and put it in html the size get bigger and i dont know why like that i alr try to export again but still the same may u can help me

Mohammad Adnan says:

Love your videos. It's easy to understand and perfect for beginners like us. You describe every step very detailed and that's the most important thing to me when I learn something new from you. Love you, sir! 🙂

Adnan khan says:

thanks please also make page transition effect

Anthony Anonde says:

this is awesome, but i tried using adobe illustrator cs6, i couldn't export my files in svg, i guess i have to download the adobe illustrator cc. Thanks wow is took me 2hrs but still i couldn't get it right with cs6.

Maksym Ushakov says:

WOW! It's amazing!

Tyus Durant says:

VSC has a live server extension that will hot load your files without extra npm installation or json file. It’s very handy for quick prototypes.

Suranjith Nishalaka says:

awesome! but, i have a problem sir, is this BG be responsive?

Sampan Verma says:

15:53 Udemy Thumbnail shows an earning of $21,278.46 . Nice.

Write a comment