fahidnasir / css-svg-text-animation

Basic sample to demonstrate the Text animation with SVG and css properties.

Intro

This is a simple application to show the method of animating any SVG data with HTML and CSS3 properties.

Screens

Initial State

Mid Animation State

Final State

Components

This project includes

• CSS 3 file for styling and animation
• Simple HTML page
• SVG data (in HTML div)

Important Points

These are the few main points:

• I copied the SVG data into HTML for simplicity.
• CSS animation property in the path element.
• CSS stroke-dasharray property.
• CSS stroke-dashoffset property.