Basic SVG Line Animation

Basic SVG Line Animation


Today, we’ll be creating a simple SVG Animation Using Adobe Illustrator and some CSS So, let’s get started Open Adobe Illustrator CC Create a new Adobe Illustrator file Set Size to 1024×768 Start by adding a new Text Layer Enter any text that we would like to animate Change font size if required Move and Resize to fit the bounds exactly Align the text to center both horizontally and vertically (Optional) Set fill to None, and Stroke to Black Change Stroke Width if needed Export the layer as SVG Set Type to “Convert to Outline” Click “SVG Code” to view the generated SVG code Remove any unnecessary codes from it Copy paste the entire code onto a Text Editor Let’s check it in browser Obviously we need to remove that black box So a tag calledis the cause for this Let’s add some CSS styling to create an outline effect Nice !! We need to calculate the dasharray value for all shapes Change the value till it’s visible entirely So, we can make it partially visible by altering the dash array and offset values Let’s make the change permanent by including it in CSS We can use “keyframes” to animate any content in CSS To animate the line, we can start by varying the dashoffset value Mention the animation that needs to be performed by thetag in CSS Let’s check it out !! GREAT !! We can vary the thickness using “stroke-width” parameter Time for little tweaking to perfection 🙂 Thanks for watching !!

Only registered users can comment.

  1. Hello Snazzy Sanoj, This video is awesome and so help full. But can you tell me how to do the same animation with logo I have tried but not able to do so , please help me out
    thank you in advance .

Leave a Reply

Your email address will not be published. Required fields are marked *