SVG Tutorial: With CSS Animation

ha okay ready me hello everyone in this video we will learn the basics of SVG now before we worry about what SVG is let's first just look at a demo of the finished product that we will be building together all right so here we see perhaps the finest drawing of a cat in the history of art and here we see a few buttons the first button reads move around and if I click it you can see the cat starts moving around his whiskers start twitching his eyes start moving and notice that his eyes are currently green but if I click this button that says blue eyes now he has blue eyes also notice that he's currently smiling but if I click this button that says sad now he's frowning alright so this is what we're going to learn how to build in this video it may not be the most practical example in the world but I promise it will teach you the basics of working with SVG on the web let's get started all right so what is SVG SVG is an image or graphic format so we know that JPEG is an image format gif is another image format PNG or ping is an image format right so there are all kinds of different image formats and SVG is one of them now SVG is fundamentally different from these other image formats because SVG is the only one that is vector based the letters SVG stands for scalable vector graphics the key word there is vector now instead of trying to explain what vector means let me show you what vector means so currently I have opened a tool that will let me create an SVG file directly in my web browser now I want you to follow along with me on your computer so right now pause the video and google for SVG edit github the top result should take you to this github overview page and if you just scroll down a bit and click on this link that will take you to this editor alright so with this open we are now on the same page and create an SVG file or illustration together let's not worry about drawing a cat or anything in particular yet let's just add a few random shapes to our drawing as an experiment so over in the left hand sidebar if I click this red oval now within the center canvas area I can click and drag to create an oval and if I wanted it to be blue instead of red down here I can click the fill tool and choose any color I'd like perfect alright next let's imagine I want to add a rectangle to the drawing so over on the sidebar I can click the rectangle tool all right and let's imagine I want it to be orange now I realize you're not watching this video to learn about your shapes and colors right so we've all graduated preschool the reason I'm showing you this is because now if we click this icon towards the top left that reads SVG we can see the code that our drawing is made up of so for example this ellipse element that's the blue oval this rect element that's the rectangle this code defines the size of each shape the positioning of each shape the color you get the idea all right so if we delete this ellipse element from the code and then click OK that deletes the blue oval so now we can see the relationship between our drawing and SVG code now I do want to point out that we are not limited to basic shapes like ovals and rectangles we can use the path tool to draw our own custom shapes so in the sidebar I'll click the path tool and now I can click anywhere in the canvas to create the first point for my path all right now when I click to create the second point in my path I can hold down and drag to create a smooth curved line and I can create as many different points as I want so I can click here again and then drag to create the curve and you don't have to drag so if I wanted to create straight lines like you would see in a traditional polygon I can just click click click click you get the idea and then I'll click back on my first point to complete this path and there we have it we just drew our own custom shape let's imagine I want this to be green instead of orange so I click on it click the fill color and let's also imagine I don't want the black outline or stroke for this shape so down here I'll reduce the stroke or outline from five to zero perfect now the reason I'm showing you this is because now if we click that SVG icon in the top again to view the code we can see that the custom shape we just drew is created with a path element and this code keeps track of all of the different points and angles that we created all right now let's imagine that we are happy with our drawing and we want to add it to a web page so here's how I would do that I would click this SVG icon I would copy all of the code 100% of this code into my clipboard I jump over to my text editor on my computer in a brand new file an empty file I'd paste in my clipboard I'd save this as a brand new file and I can name it anything I'd like let's call it drawing dot and then instead of a jpg image this is an SVG image all right so now I have a new file named drawing dot SVG and now I'm free to use that in an HTML file so here's an example bare-bones HTML file that I have ready this is what it currently looks like in the web browser so you can create something like this on your computer to follow along but underneath this heading I can just create an image element and we know that the image element uses the source attribute and then we can just point towards drawing SVG save this refresh it ok so now that we've seen an example of SVG in action let's stop for a minute and talk about what vector actually means so vector graphics are all about polygons or shapes instead of pixels this means that we cannot use vector graphics for photographs but we can use vector graphics for stations right so things like logos icons or anything that we would create with shapes now the biggest advantage of vector graphics is that they can scale infinitely so you can zoom in or enlarge an SVG image to any size and it remains perfectly crisp perfectly sharp and this is because it's just polygons and shapes described through mathematics and this is the complete opposite of most other graphic formats like jpg gif or PNG those image formats are raster based instead of vector based so here is an example of a raster graphic this is a jpg photograph and if i zoom in really closely you can see the grid of each individual square pixel now this is all the data that this photograph will ever contain so if we try to enlarge the photo we would just be stretching and blurring the same amount of pixels all right and this is an example of a raster graphic but again with vector graphics it's just mathematics describing shapes so it's super flexible super dynamic another big advantage of SVG is that we can manipulate it on the fly in the web browser with CSS so let's give ourselves a quick example goal let's imagine that when we hover over this image we want the custom green shape to become blue instead and to also shrink in size a bit so first if we want to be able to manipulate our drawing with CSS instead of loading an external SVG file like this we need to include the SVG code directly in our HTML page let me show you what I mean so let me go into the SVG file that we created just a moment ago let me copy this to my clipboard and then back in our HTML we can just delete this image element and replace it by simply pasting in our clipboard with the SVG code so if I save this HTML file and reload the page we see the exact same result only now we can manipulate these shapes with our CSS so we know that this path element is our Green shape so I'm just going to give it a class of my shape and then I can reference this class name in my CSS so let me open up my CSS file for this website let's create a new rule my shape and if I want to change the color I can just say fill let's say blue save that refresh it and if I only wanted it to be blue when the image gets hovered over I could just change this selector to SVG hover space and then my class name so now it's green but if I hover over the image it's blue alright and if I wanted the shape to shrink a bit in size when we hover it I can just use the transform property and use the scale function now a value of one will leave the shape at its current natural size so if we want to shrink it a bit we could try 0.9 all right you can see it shrinks a bit and if we want it to shrink gradually instead of just all at once in one millisecond we can target the my shape class and say transition we want to target that transform property and we want it to smoothly transition over the course of maybe half of a second so 0.5 seconds so now when I hover you can see the transition is smooth and we could also have the green to blue color swap happen smoothly by saying that we want to transition all properties so the transform property and the fill color property and instead of half a second let's try 1.3 seconds just to make it dramatic so now when I hover it's very smooth and we see the color transitions as well all right now at this point we have a general understanding of what SVG is and why it's useful now let's change gears and forget about this example drawing and instead let's start working on our made cat project now I'm not going to draw the cat illustration on camera that would eat up too much time so instead I have the cat SVG drawing file here on my desktop and I will include a link in the description to this cat drawing SVG code the link will be the code pan or to my website so you can just copy and paste all of this SVG code and follow along with me alright so feel free to pause the video in just a couple of seconds so you can do that but I'm going to copy and paste all of this cat SVG drawing code copy it to my clipboard and then back in the demo HTML file we've been working with I'm going to delete the SVG that we had that just had the example custom shapes and I'll paste in my clipboard with all of the cat drawing alright so if I save this once i refresh this custom drawing will be gone and replaced with the cat alright so we have our cat illustration now we want to animate and manipulate it with CSS and JavaScript now if you'd rather create your own new drawing of something else and animate that instead please feel free to do that I do want to clarify that you do not need to use this online SVG edit tool that I showed you in the real world the most popular vector graphic editor is Adobe Illustrator illustrator is far and away the industry standard there's also another popular vector based app named sketch but both of these programs illustrator and sketch cost money and not everyone has access to them this is why I initially recommended this online SVG edit tool because it's a nice free alternative but anyways if you'd rather create your own drawing instead of using my cat long story short feel free to use any vector graphics software you please because all of the modern programs have great export as SVG functionality nowadays having said that let's get back to our cat example let's get started by adding buttons the user can click that will change the cats eye color so in our HTML right underneath this heading level one and before the SVG graphic let's add a give that has a class of buttons and then within that div let's add one button that reads blue eyes and another button that reads green eyes all right now let's use JavaScript so that when we click this button we add a blue eyes class to the SVG element and when we click this button we remove the class so for example if we look at our HTML here is the SVG element you can see on the opening over all SVG tag I already have a class named cat and we can just go ahead and give it a secondary class of blue eyes okay now before we even write any JavaScript to handle the button click events let's manually hard-code this class like I just did here and let's write a bit of corresponding CSS so over in my CSS file we can delete these rules from our example earlier in the lesson we don't need them all right so let's create a new rule that targets the blue eyes class and then within that SVG element I want to look for a descendant or child element named eye color you may be wondering about this eye color class and if I jump back to my HTML within the SVG code for the cat drawing you'll notice that I already found the ellipse elements that represent the cat's eye color and gave them each the left eye and the right eye a class of eye color all right so back in our CSS if the overall SVG element has a class of blue eyes then we want to go into the cat drawing find the specific eye color ellipse or ovals and then change their fill color to a blue shade let's save this and refresh the page and now that we see that that did indeed work the eyes are blue we can remove that hard-coded blue eyes class from the HTML so on the SVG opening tag I'm going to remove the blue eyes class because now we can set up JavaScript to add and remove that blue eyes class on the fly based on our button click events all right so let's change gears and begin writing JavaScript so you'll notice that at the bottom of my HTML file right before the closing body tag I'm including a JavaScript file so I'm saying look in a folder named J s and then load main J s so let's open up that file currently it's completely empty so this way you and I can write all of the code together so we're on the same page if you are completely unfamiliar with JavaScript and you've never even included a JavaScript file on your HTML page before the following part of the video is probably going to move way too fast for you so if that's the case I recommend you first watch my JavaScript in half-an-hour video that video should get you up to speed so that the rest of this video will make perfect sense having said that let's keep things rolling so the first thing I want to do in JavaScript is create a variable I'll name it buttons but you can name it anything you'd like and I want this variable to simply be a selection or collection of all of the button elements on our page so if we look at our HTML structure we see that the buttons live within a div that has a class of buttons so if I want to select these elements in JavaScript I can just say document query selector all and then I can just use a CSS like or jQuery like selector so we'll say go inside the buttons div and then grab any button elements okay so now we have a buttons variable that's a collection of those elements we will reuse this in just a moment but first let's create another variable named cat that simply points towards the main SVG overall element so in my JavaScript i'll say VAR cat equals document get elements by class name because remember the SVG element has a class of cat so that's why i'm going to select it with javascript so look for an element that has a class of cat and because this returns a collection of elements as in multiple elements we can just say z so using array notation we can just say give us the first element in this collection okay next let's set up event handling for all of the buttons so that when they get clicked we can actually do something in response so to be on the lookout for incoming clicks on the button elements I'm going to use a for loop alright and what I'm going to do is loop through this collection of all of the button elements and then do something for each one so in the parentheses of our for loop we'll say I equals 0 again if this doesn't make sense after you watch my JavaScript in half an hour video this will make sense but having said that let's keep rolling so then we'll say as long as I is less than the length of this collection or the length of this array well this technically isn't an array but for all intensive purposes in this case we can treat it like it is an array so we can say as long as I is less than buttons dot length then we want to increment I by 1 okay and then within our for loop what do we want to actually happen for each button we want to add an event listener so that we're on the lookout for incoming click events so we'll look inside our buttons collection will use our I counter variable and then we'll just say add event listener and the event that we're listening for is the click event and the second argument that this function is looking for is a function to run in response to the click event so let's just create a brand new function we will do that in just a few seconds and we will name that brand new function manage cap classes you can name anything you'd like but that's what I'm going with it's out of semicolon at the end of this line alright next let's go ahead and actually create that function named manage cat classes so we'll say function manage cat classes and before we write the real code for this function let's first make sure that our click events are working as we expect so within this function we can just add a test alert popup message that says testing 1 2 3 so let's save this and refresh the page and click one of the buttons perfect so we know that our event listener is working correctly see the testing 1 2 3 message so back in our JavaScript we can delete this line because we don't actually want to alert out the test message what we actually want to do is add the class of blue-eyes if we click this button and we want to remove the class of blue-eyes if we click this button now I know that by the end of this project we are going to have way more than just two buttons so I want to set things up so that our JavaScript is not super repetitive so let me show you how I'm going to do things in our HTML on the blue-eyes button let's add a data attribute named data ad and it will have a value of blue-eyes and on the green eyes button let's add a data attribute named data remove and give it a value of blue eyes as well alright and now we can access these values in our JavaScript so back in our Jas file within our function that runs whenever a button gets clicked let's target the cat SVG element remember we set up a variable named cat just for that purpose and then we are going to access its class list and we want to add a new class to the element and what's the name of the class that we want to add well it's simply the value of the data add attribute so back in our JavaScript within the parentheses for this add class function we can target the specific button element that got clicked by using the this keyword then we can use the get attribute method and then we just type the name of the attribute so remember it was data add and it's that simple and just to play things safe let's wrap this line of code within an if statement so we only try to add a class if the data add attribute exists for the button element that just got clicked because not all of the button elements will have data add and not all of the elements will have data remove so in our JavaScript you can just wrap this line of code within an if statement so let me just cut and paste this within the if curly brackets and what is the condition for this if statement will say only if the specific button element that got clicked on so we use the this keyword only if it even has that attribute in the first place so we'll say get attribute data add okay so only if that attribute exists do we want to run this code and then we can just duplicate these three lines for the data remove scenario so let me copy this drop down paste in my clipboard and this time around let's just change this from data add to data remove on this line after classlist we want to use the remove method instead of the add method and then we'll just change the attribute name to data remove so let's save this and test it out in the browser so if I click the blue eyes button perfect the eyes turn blue and if I click the green eyes button they're back to green alright next let's add a sad button and a happy button that will control the cat's mouth so back in our HTML let's add a third button that reads sad and another button that reads happy when the sad button gets clicked we will want to add a class of sad to the SVG element so on this sad button let's add a data attribute of data add equals sad and then for the happy button we will just remove the sad class so data remove equals sad all right let's save this and now we just need to write the corresponding CSS that will target the SVG shape that is the mouth all right so if we look at the actual SVG code if I scroll down a bit here we see a path element that has a class of mouth now if you're working with your own SVG illustration you'll need to dig through the code a bit to find the specific element that you want to animate or adjust in this case I've already done that for us so our next step is to target this element that has a class of mouth in our CSS so let's create the new rule we will begin by selecting the overall SVG element if it has a class of sad and then we want to look inside it for that path that had a class of mouth okay and to make the cat look sad we just want to take the mouth and rotate it or flip it vertically so it's upside-down and we'll probably also want to shrink the mouth a bit when it's sad so back in our CSS let's begin by shrinking the mouth a bit so we can use the transform property and we can use the scale function and a value of 1 will keep the mouth at its current or natural size so if we want to shrink the mouth we could say maybe point 8 ok let's save this and refresh the page and then click the sad button we see that the mouth did shrink a bit but now the positioning of the mouth is way off the key to fixing this is understanding something named transform origin so for most HTML content any Content that basically isn't an SVG when we use transform and scale to shrink or adjust the size of an element this code would shrink the element towards its own center right so for example if we were to shrink this button this blue button if we told it to have a scale of maybe 0.75 it would shrink in from its own center horizontally and vertically right that's how transform works with almost all content on our page but SVG is different right because the mouth used to be positioned here so clearly it didn't shrink in on itself towards its own horizontal and vertical Center and this is because with SVG it always treats the transform origin as the top left corner of the entire illustration right so if we think of the entire size of the illustration when we shrunk the mouth it's almost as if we just took that layer and dragged it up towards the left towards this corner so that's why the mouth is no longer positioned correctly so to fix this we just need to tell the mouth shape that its transform origin should be right about here now let me show you my favorite way of finding the perfect transform origin value so I'm just going to right click on the page and click inspect you can dig through the SVG code to find the path that has a class of mouth and here we can see that the sad class is being applied to it and here in my developer tools I'm just going to click to add another CSS property named transform origin and let's just start with the value of one pixel one pixel so let me show you how this works the first value controls the horizontal position so I can just push the up arrow key on my keyboard to increase this and if I hold the shift key and press up it increments by ten so you can see the mouth is repositioning itself as I do this in real time okay and then the second value controls the vertical positioning so I can increase that and while we're experimenting with values I think we could lower this scale value let's try maybe 0.5 okay now let's readjust the transform origin to work with that value so maybe 340 horizontally and let's go up a bit vertically or I guess I should say down okay that looks all right and remember we also want it to rotate or flip the mouth vertically so it looks like a frown so on our transform property you can just use a function named rotate and we can give it a value of 180 degrees and again you can use the up and down arrow keys on your keyboard to fine-tune this value but we want 180 and just in case the transform origin concept still isn't clear I think the best way to understand it visually is to temporarily disable this and set the rotate to only one degree okay and now as I increased this rotation value watch the mouth you can see that it's pivoting from the very top left corner of the illustration right so you can think of the pivot point as the transform origin value or the transform origin position okay so all that we're doing with this transform origin value is providing an x and y-coordinate for the mouth that is right about here so let me enable the transform origin property again and now when we change the rotation you can see that it's pivoting from the center of where the mouth would normally sit which is exactly what we want okay and then we can just set this back to 180 and there you have it okay now this code that we were just experimenting with only exists in my developer tools so let me go back to my text editor and write it down for real so we use the scale of 0.5 we said rotate 180 degrees and we also had a transform origin of 340 pixels horizontally and 390 pixels vertically ok let's save that refresh the page and now we can successfully switch between sad and happy okay next let's add buttons that tell the cat to move around and sit still so in our HTML scroll back up to the buttons let's add a new button that reads move around and let's add another button that reads sit still all right so when this move around button gets clicked we will add a class of move around to the overall SVG element so data add move around and then we will remove that class when this button gets clicked so data remove move around okay now we just need to jump over to our CSS and write a bit of CSS animation code that will bring the eyes to life the whiskers to life and make the overall cat's head move around and look around a bit okay and let's begin with the eyes so just to refresh your memory let me jump over to the tab where we have the finished product and when I click move around notice the pupils of the eyes start moving now back in the HTML of our work-in-progress version within our SVG element the cats pupils are represented by this g element that has a class of inner eye group the G of this element stands for group in SVG we can group together multiple shapes so that you can move them and manipulate them as a group so this particular group consists of the green oval and then the tiny white shine circle so if we want to move that entire group we don't need to animate both of these ellipse elements we can just animate the G or the group element all right so let's go target this inner eye group class in our CSS let's create a new rule let's target the overall SVG element only when it has a class of move around and then we want to look within that for inner eye group okay and we want to add an animation so we can say animation in about 10 seconds from now we will create an animation named move eyes all right and we want it to be drawn out over the course of maybe 5 seconds okay now by default this animation name of move eyes doesn't mean anything to the web browser we have to manually create an animation named move eyes so above this rule let's create a new line and say at symbol keyframes move eyes okay now this is our chance to spell out exactly what the animation should look like CSS animations are very simple we basically define how things should look at 0 percent when the animation first begins and then we should also define how things should look at the very end of the animation at 100% so for example let's say that at the very beginning of the animation let's move the pupils up and to the left so we can say transform and then use the translate function the first value is horizontal so to move them to the left maybe 18 pixels we can say negative 18 second value is the vertical positioning so why don't we pull the pupils up 20 pixels okay so that's the very beginning of the animation let's say by the end of the animation the pupil should move to the right so we can say transform use the translate function so instead of negative 18 pixels which will pull them to the left we can use a positive value of 18 pixels that will push them to the right and vertically let's move the eyes back to their neutral vertical position so just zero okay so if we save this and refresh the page and click the move around button we see that the eyes move up towards the top left and then move over to the right and then once the animation is complete they snap back to their natural positioning and that's it the animation is complete well we don't want the animation to ever end we want the animation to just repeat itself endlessly so on this line of code when we assigned the animation at the end of this line we can say infinite okay and to test that out let's change this from five seconds to two seconds okay so if we refresh and click move around our animation is much faster it only takes two seconds and it just repeats itself endlessly okay so now our animation is up and running we just need to fine-tune it to make it look a bit smoother so back in our CSS why don't we change this from 0% to 20% so that way when the animation first begins the pupils will be in their natural normal position and then gradually as the animation plays from 0% to 1 2 3 4 5 % up to 20% they will gradually move to this up and to the left position okay and then we are also free to add as many intermediate steps to our animation as we please so we could say at 40% completion of the animation maybe the eyes get reset back to their natural position so transform translate let's just set them back to 0 0 and then instead of having this final step be set at 100% completion why don't we change it to 65% these are all just arbitrary choices I'm making to make the animation look smooth it's up to you to choose your own values in the future but let's say a 65 percent completion the eyes should be to the right and pull the back up a bit so let's save this and test it out okay now that's way too fast but I think that general movement looks kind of neat so now if we just slow that down on this line instead of playing out over two seconds let's change that to maybe 12 seconds looks good next let's work on animating the whiskers so back in our HTML towards the bottom of our SVG element we see one group named left whiskers and another group named right whiskers let's animate the left set of whiskers first so over in our CSS let's create a new rule we want to target the main SVG element only if it has a class of move around and then we want to select the left whiskers group let's assign it an animation in just a moment we can create an animation named left whiskers let's have it play out over three seconds and we want it to loop or repeat itself infinitely all right now before we go ahead and create an animation named left whiskers let's first set the transform origin for the whiskers group so that way when the whiskers move around their point of origin or pivot point is right about here right because this is where the whiskers are attached to the cat's body so we just need to provide the x and y coordinates of about right here so let's say 325 pixels from the left and 350 pixels from the top all right next let's create the animation named left whiskers so above this line let's say key frames left whiskers how about at 20% completion of the animation we rotate the whiskers so transform and then use the rotate function and let's rotate them five degrees clockwise and then let's say about 60 percent completion of the animation we want to rotate them the other direction so transform rotate negative five degrees let's save this and test it out okay cool so notice the whiskers are moving around next let's set up a slightly different for the right hand set of whiskers so I'm just going to copy and paste all of this left-hand whiskers code and then paste it in okay so let's change this duplicate copy to right whiskers and my goal here is that I don't want the whiskers on the right to move exactly the same as the whiskers on the left I want to give the illusion that they're both moving randomly so for the right hand set of whiskers let's change this to 5% through the animation and maybe we'll say negative 2 degrees and then let's change this to 90% completion through the animation I will change this to maybe 7 degrees and let's be sure to change this selector to right whiskers and also update its animation name that's using 2 right whiskers okay let's save that refresh it click move around perfect and now we can see that the different sets of whiskers move independently of each other all right now we're almost done with the project for our final task let's have the entire cat head move around to do that we can use 3d rotation so back in our CSS let's create a new rule let's select the overall SVG element only if it has a class of move around and this time we don't need to look for any other elements inside the SVG we want to animate the parent SVG element itself so let's assign it an animation in just a moment we can create an animation named move let's have it play out over the course of 8 seconds and let's have it loop so infinite all right now let's go ahead and create the animation named move so we'll say keyframes move and let's start out at 40% through the animation we can rotate the head in a three-dimensional fashion so we can say transform only instead of using the rotate function we can use a function name to rotate Y so let's say 25 degrees and let's test that out now it's subtle but notice that the cat head is sort of rotating or pivoting horizontally in a three-dimensional fashion and if we change this to rotate X notice now the cat head is rotating vertically in a three-dimensional fashion so we can use those two functions rotate X and rotate Y to create all sorts of diagonal movements and it will look pretty natural so at 40% let's say rotate Y is 25 degrees and rotate X is 10 degrees okay let's also say that at maybe 20 percent completion of the animation rotate Y 10 degrees rotate X 10 degrees let's say 60 percent completion rotate Y let's say negative 10 degrees and rotate X negative 10 degrees and finally at 85 percent completion negative 10 degrees and negative 16 degrees again these are all just arbitrary random numbers I'm choosing I want the animation to look natural so there's always a bit of experimentation involved but let's save that and test it out okay so that looks okay but I think we can improve it a bit so this is where something called perspective comes into play so check this out in our HTML let's wrap the SVG element inside a parent div so here's the SVG above it let's create a div named SVG container and then down at the very bottom of the SVG element let me close out that div okay and now back in our CSS let's target that container div so we can say SVG container and then we can use the perspective property which is super useful when you're using 3d rotations this property lets us say how close we are or how far away we are from the object that is rotating so for example if I use a relatively small value here of maybe 150 pixels you can see the rotation looks very extreme it's like we're a tiny little insect and we're only a centimeter away from the object that is being rotated okay so if we use a larger value here like maybe three thousand pixels now it's as if we are farther away from the object that is rotating so the movements don't look as extreme all right so you are free to experiment with perspective values but in this case I think a nice happy medium is a distance or perspective of a thousand pixels it's not too extreme it's not too subtle I think it's just right and that's actually going to bring this lesson to a close I know this was a long video so thank you so much for sticking with me until the end I hope you feel like you learned something and I encourage you to experiment with your own vector illustrations and animations anyways I will see you in a new video next week and until then take care if you haven't already be sure to check out my new premium course where we learn about git github node NPM object-oriented JavaScript and a bunch of modern tools and best practices that will get you job ready in no time as always there's a link to it in the description

Channel: LearnWebCode

Views: 257,904

Rating: 4.9153676 out of 5

Keywords: svg, animation, vector, css, tutorial, scalable vector graphics, vector vs raster

Id: IM8eTD01UE8

Length: 43min 34sec (2614 seconds)

Published: Thu Nov 17 2016