SVG-Creation "Kev-Moji" using tools in Illustrator

Using elipse tool in Adobe illustrator, i created a circle, then (Shift+) for the Curvature tool in designing the head and filled it with the appropriate colors..

Then i created four circles forming the eyes, which were grouped as one element each to be animated.In the layers panel give the eyes a specific name.

Using the elipse tool create two circles for the spectacles and rectangles to join them and then set opacity to 60% and used then hit(Shift+) to draw the mouth.

Save and optimize your SVG

Once the image is completed, save the SVG image. Select File and (save as) and save the file in SVG format. Another window will pop up with svg specific options to choose from. Select SVG 1.1 for your profile, set Type to SVG and click Embed for Image Location. Click OK... And save the SVG onto your computer, then copy the code within the pop up window for your text editor "Sublime Text" preferably.
Bear in mind the parts of the SVG images that would be animated, should be renamed accordingly, this would be very useful when it comes to the animating step. that would be explained much better at the animating stage. In renaming these paths, simply double click in the layers panel and right click and the rename the path.

Note:By default the SVG options for the image location is usually set to Link, which could be changed to Embed depending on what is to be achieved.

---

Select *Save As*
A window pops up..

Under Options select *link*
And click on SVG Code

Now copy the Code generated
And paste it in your text editor

Animate SVG using CSS

This animation uses basic CSS animations and transformations. Properties like translate which moves the animation up, down, left or right on the X and Y axis, rotate and scale.

Note: keep your animation as simple as posible in terms of moving parts as the more animation you have may cause a glitch in performance..

The code: I placed the svg code inside two divs. The first one, circle, is the container that holds everything and the second, KevMoji will contain the svg and determine it's size and placement inside the circle. I've basically set up two states for my animation. There is a neutral state and a hover state.

For the neutral state, I specified transition: all 0.4s; which directs all the transforms applied to that class will take .4 seconds to complete. The last thing i did was to declare the transform-origin: 60px 60px; which is basically where the "pivot point" will be when the path is rotated. 0px 0px would be the top left corner of your object.

The Animation blink has some keyframes. here, i assigned "blink" to the eyes:

The Animation: blink 8s infinite; commands the eyes path to use the "blink" Animation

Setting an Attribute for the eyes which specifies a unique id for the eyes.

The eyes are set to repeat the animation forever. i wanted KevMoji to start blinking once the page is loaded so there was no need to add a hover state .

Dirt Bike in the City SVG animation.

For this SVG animation, all objects were created in Illustrator as seen below, However some of the objects had to be grouped expecially those that we Are not going to animate.The reason being that, we would have a clean and less codes to work with.

Objects that are going to be animated were all given unique id's they could be identified within the code and Animated.

The bike images were all drawn in illlustrator and assigned a unique name
(Bike)

The Plane image was drawn in illlustrator, i grouped all the paths as one and assigned a unique name
(Plane)

A Cartesian coordinate system was created for the animated squares in the rollercoaster, i then placed the origin at the center of the SVG viewport

I declared the SVG animation to rotate the rollercoaster and used The animateTransform element which animates a transformation attribute on a target element.

In CSS, the bike, cloud and plane elements, were given specific names for the @keyframes animation: and were all set to different durations.

I located the sky id in the HTML and in CSS animated it using animate: hideshow and set the duration to 10-second infinite.