There Are Four Ways to Animate Logos On a Site

The easiest way to create the "drawing out" logo effect is to start off by creating a simple logo. In the past, this effect would have been animated with Flash or Shockwave. However, most modern web developers would use SVG in order to create the animated logo effect. You have several different options at your disposal for creating Animated images

Option 1: Using SVG To Create Animated Images

With SVG, you can create an animation CSS file for each of the elements of your SVG logo. You also have the additional option of doing the animation within the CSS file if you did not want to work with SVG. But, most web developers working with CSS will use the webkit library which is an animation library built to work with CSS and SVG.

Option 2: Using CSS to Create Animated Images

When you are using purely CSS, you can work with CSS to move the elements around which you are trying to animate. Working with CSS to animate images is the method that most developers use because it has a tendency to work across multiple browsers.

Option 3: Using jQuery Plugins to Create Animated Images

Some have also decided to use the jQuery DrawSVG plugin in order to create animations. This plugin will work with the jQuery framework to generate the animations for you. With a line of JavaScript and some HTML path tags, you can manipulate the Animated effects to your preference.

Option 4: Using Code Examples From Other People Use

People often use code examples that other people have created to create a drawn logo. As long as the code is openly accessible to you, you are able to use it to fit your needs. Developers turn to resources such as CodePen in order to find the code they need for their projects. For more information click here https://www.reddit.com/r/web_design/comments/9v17bg/drawing_out_the_logo_effect/.