SVG Tutorial: With CSS Animation
HTML-код
- Опубликовано: 30 сен 2024
- Join my premium 2024 bootcamp here learnwebcode.t...
What is a vector graphic and how can we animate one? Learn by following along with this video.
Link to cat drawing SVG: codepen.io/anon...
Follow me for cat pics:
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
You are AMAZING!!!!!!! I didn't know that we can do this with SVG.
Thank you so much for sharing this knowledge with us!!!
I don't usually leave comments, but since you are the greatest teacher ever, well... Thanks for everything, you really helped me a lot!! :)
This is my second video if his I have watched and I can say he is very very good.
I agree with you.
I am your simp
thanks i want to learn more about svg do you think i must learn illustrator or i can do every thing using code
Creating illustrations with code is technically possible... but from a creative process perspective it would be nearly impossible. You really need vector editing software so you can focus on the illustration itself (and not worry about code until it's time to manipulate the SVG on your webpage). If Adobe Illustrator doesn't work with your budget there's also the free "Inkscape" program that's worth trying.
thanks my proff👍
if png is 'ping' then svg is 'Savage'...
.
.
.
.
Only a Human can understand this
Yes I m Human
I didn't know robots and other animals watch RUclips.
Thank you so much for taking the time to explain all of the properties of svg. All of this video is very beneficial. Thank You.
Byyyy FAAAARRRRR, the absolute best tutorial I have EVER watched. Kudos to you Sur (I know its suppose to be Sir)! You are AMAZING! Subscribe subscribe subscribe. Forget like... I looovvveee your channel. Thank you. I’ll be back for more I promise. 👍🏽👌🏽
awesome video, not only did you explain working with svg's but I also learned something on the transform property.
keep up the great work. You are a great teacher, it is really easy to follow you.
Love your work, I am also one of your student and Udemy... and i really appreciate the time spend producing these wonderful videos.... BUT would really love to see more videos to continue the Learning Wordpress course. Thanks again your videos have really changed my life.
I hadn't even realized it's been over two months since the last WordPress video. Good call; I'll move those towards the top of the list!
:-D thanks
thank you so much it really helped me alot you're my best programming channel
Wow, I really loved this class.
You're a great teacher!
Even If you crate a tutorial abuot how to drink a water i buy it
I have a subscription to Plural Sight which is a platform for online tutorials... I was looking for an SVG tutorial and all of them sucked......
This guy is the best ever teacher.... this is the best tutorial one can find on YT or I think any other platform....kudos....
I don't get it why people dislike these extremely useful content. But anyways, thanks for the video. Awesome and clear explanation.
Thank's for sharing, I learned a lot from your tutorial :)
very well explained. subscribed!
Awesome vídeo. Gratz for the amazing work.
cat on LSD
Thanks for this wndr'ful tutorial
Thank you so much ,was really easy to follow along given how clear and amazingly your explanation was
Thank you so much, you are so understandable and so clear in your illustration to SVG, thanks a million for taking the time and going the extra mile to do all these explaination.
Is SVG the Flash killer? I remember Flash having all these features, and now SVG is ... I mean, granted, it was probably there already, but it wasn't well developed. What's the story on SVG anyway?
Very useful video, thanks a lot! You are Great:)
You're a wonderful teacher! Keep up the good work!
I'm stumped on one little issue: In Safari, clicking button for sad will behave as expected, but then clicking on happy does nothing. This works fine in Chrome.
Great course on SVG, Strive & Prosper Bro
Thanks!
im going crazy...
how do i choise between svg, css clip-path.
each tutorial comes with a different attitude, and im becoming more and more confused.
How would we do this if we're using let's say more than 2 colors. For instance: I want to be able to change the color of the cats eye to Brown, Blue, OR back to Green.
The tutorial was great by the way :)
Oh wow, thanks so much!! Very useful tutorial.
Found someone stealing your content and I thought I'd reach out and let you know. DM me for link as I don't want people giving them views
Can only repeat what others have said: you have an amazingly clear style.
I've discovered inkscape which also work fine just the online app you mentioned, and it's free too.
Will hard coding transform-origin in pixels cause problem when the svg is resized?
hi, im curious is it possible to work with svg when its not inline code?! i understand its harder but can you help me and direct me to somewhere when i can see that tutorial! thank you very much :D
Very well done!
I never made any comments to any one personally but Really your way of teaching is great . 😊👍
Thankyou so much for this video. It really helped me in my project.
I feel personally attacked, I did not graduate preschool, I skipped it.
thx for this tutorial, it was a good start point for me to learn
Who and what song is this from in this video in the beginning?
Pretty clever on the custom attributes. Didn't even know that existed.
You are an angle, thank you so much for tutorials
You are an AMAZING TEACHER .Thank you so much.
My god !!! You are 100% nice and clear explanations !!!!!!!!!!!!!!!!!!
Great tutorial! Thank you for creating it.
great explanation
i try but i can't apply css on svg ...its not working give me solution
thank you for valuable time spending on teaching
Once again, thank you! Excellent job!
Any good recommendation for a good book to learn svg programming?
Please can you help me with SVG Images. I mean can you help me with this type of image files you used on this video or any type of image files that I can use on video creations. I need your help. Thanks
I learn css, javascript and svg of course. Cheers
Now the same for canvas!
Excellent the way you explain the tutorial...
Hi all. Is this tutorial still relevant in 2018?
Thanks a lot for such a great explanation
Thank you for this tutorial. I'm looking for a way to represent mathematical functions, such as a parabola (y=x^2), but all the svg stuff tends to rely on point destinations (meaning I'd have to have an infinite number of points to make the smooth graph - illustration here matt.might.net/articles/rendering-mathematical-functions-in-javascript-with-canvas-html/). Do you know of anyway to represent the path of a mathematical function in HTML/CSS/JavaScript?
Thank you for u r usefull video. your JavaScript and AJAX video help me to clear my doubt and I requesting u plz release more videos on JavaScript and Angularjs. Thank u soo much.
Woah.. i never understood some things as clearly as after watching this video! Thanks so much, like well deserved
"We all graduated preschool". How very presumptuous of you. Jk nice video, some very useful info for me here and I appreciate it so thanks :)
I knew I recognized your voice lol
please uploaded vedio for Windows 10,7 os ,please tell me, how to make SVG files in Windows , which software used in Windows , reply me as soon as possible thank you
Very very useful, succinct, clear, helpful - superb presentation!
i have really been watch your video on youtube and i greatly appreciate how much you simplify the concepts like JSON and Javascript etc even the IDE Sublime.
And could please and please do a tutorial on jquery and ajax
I have been building svg graphics using Inkscape for many years. Your svg animation tutorial has inspired me to start creating and incorporating animated svg in my work. Thank you for the demo lesson.
they removed the page this doesn't work
Hey Brad,
Loved your Git a Web dev job course on Udemy. It really taught me a lot and I wouldn't be where I am today without it. It meant that when you released your newest WP course, I had no second thoughts to buying it. If I could make a suggestion, would you be able to focus your next course on building single-page applications? Thankyou!
Great videos. Inkscape is the best svg editor. It's free open source Linux software. Works on Windows and OSX as well. A very powerful program. I prefer it to even Illustrator for any vector graphics. It uses svg natively so you can see the svg code at all times while editing.
why data-remove not working .....Although no error in console
anyone....
let btns = document.querySelectorAll('.buttons button');
let cat = document.getElementsByClassName('cat')[0];
for (i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', managecat);
}
function managecat() {
if (this.getAttribute('data-add')) {
cat.classList.add(this.getAttribute('data-add'));
}
if (this.getAttribute('data-remove')) {
cat.classList.remove(this.getAttribute('data-remove'));
}
}
for the time being ...I'am doing this way
let btns = document.querySelectorAll('.buttons button');
let cat = document.getElementsByClassName('cat')[0];
for (i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', managecat);
}
function managecat() {
if (this.getAttribute('data-add')) {
cat.classList.add(this.getAttribute('data-add'));
}
if (this.getAttribute('data-remove')) {
cat.classList.remove('blue-eyes')
}
}
final one .....but little bit more js copy paste ....hope someone is going to help me
let btns = document.querySelectorAll('.buttons button');
let cat = document.getElementsByClassName('cat')[0];
for (i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', managecat);
}
function managecat() {
if (this.getAttribute('data-add')) {
cat.classList.add(this.getAttribute('data-add'));
}
if (this.getAttribute('data-remove')) {
cat.classList.remove('blue-eyes');
}
if (this.getAttribute('data-remove')) {
cat.classList.remove('sad');
}
if (this.getAttribute('data-remove')) {
cat.classList.remove('move-around');
}
}
Very easy to understand thanks to your pace of explanation. With rotate-origin, why not just use "center" instead of inputting values? doesn't it accomplish the same thing?
In industry standard for SVG format is the InkScape, and not the Illustrator.
In the printing industry Illustrator is commonly used.
Thank you very much sir...you covered many topics in single video. was very helpful..
For vector images try Krita ( krita.org/en/ ), its used by professional artists and is free open source software. Or for simpler structures inkscape is very good, just pop it into a compressor like jakearchibald.github.io/svgomg/ to simplify structure.
Excellent tutorial. As a side note, you could have also created the buttons in the SVG file and animate from there...
great explanation.Thank you. Unfortunately, it works correctly only on -webkit browsers
It is one of the best hand on courses I have ever come across on Internet, very good pace and excellent exposition. COMPLIMENTS!!!
Masterly exposition of SVG
Why don't you upload full tutorials like your sublime text playlist anymore mate? We miss those... You're awesome!
Wow you have this subject grasped tighter than a lion holding a zebra covered in honey that just rolled around in a pile of sugar in its jaws. how on earth are you explaining svg so well, you must have invented this stuff. Phenomenal job man
Good eve guys and to the owner of this video, it is so interesting to listen and watch your tutorial cause it is so informative. Just wanted to ask if its possible to create a clickable image and connect it to mysql and add some CRUD? Thanms for your response ☺️
Stumbled upon this tutorial while looking for something much different. Great tutorial! Thank you so much. Now I am heading over to see what other tutorials are a must do... :)
For those who may have had the same trouble as I did when searching Google. It was the second link for me, and it brought me to a page that had a pencil with a white flower thing and has 'svgedit' in blue underneath it. Click the 'svgedit' and it should bring you to the correct page that the video shows.
just a question: i added a "transition-duration" property to the .sad class and it looks like crap because it leaves the area of the cat's head. Is there a way to provide a transition with the rotate property that doesn't mess up the feel of it? should I better resort to animation in this case?
You just opened a new horizon of using SVGs in my WEB work)
simply rock and the cat is so cute
You did an excellent job of explaining SVG and helping us get a good start on how to use it!
I'm looking forward to learning more from your other videos!
Two thumbs up!
I can't display the "fill:colour" attribute in web browser why?? :(
I have a project where I am not allowed to change the html AT ALL. (except for connecting the css stylesheet). I need to know how to use the svg in my css without putting in my html. I have it saved as background.svg in my external files. How do I import that into my SCSS/CSS file? is there a video for that?
Here's a video from the great Chris Coyier about using SVG as a background image: css-tricks.com/lodge/svg/06-using-svg-svg-background-image/ And then here is an article about storing the actual SVG data itself in CSS (instead of loading a separate SVG file, if your situation calls for that) css-tricks.com/lodge/svg/09-svg-data-uris/
@@LearnWebCode
Thank you so much!
For me Inkscape is the best, also Open source, free and since i use Debian in my desktop, inkscape is totally necessary
Thanks for these amazing videos, but just a notice, you could add or remove classes by checking the html text for the buttons and this is easier and cleaner.
Great Teacher, Thank you so much
Man i love your videos, also im finishing, your course on Udeny, and im definitely buying another one and all of them.
Amazing, first time after watching tons of you-tubers and also Mosh and Brad Traversy, you are the best I found till date. You have explained each and every small concept from drawing to properties. Really if I would have found your channel at the time I have started learning web development it would have been fun and much much easier. Thanks for this video.
By now very tired of wix adddds ...
Thank you so much for sharing this video. I was trying to learn SVG for few days. And finally I got it the beautiful tutorial. My All concept have been cleared about SVG. This Video really help me a lot. That's great tutorial :)
the best basic course, thanks. a more advanced one next maybe? it will be great
thank you ,
I gotta say that people clicked this vid including me to learn about svg not about js !!
thanx aloooooooooooooot, u r awesome
What editor are you using? I'm on Win10. Love the folder management on the left!
Great stuff man, you are an exelent teacher, this is amazing...
Excellent intro to SVG with CSS animation! Thanks.