Animation with HTML line tag and CSS @keyframes having beautiful look by Code4animate

Animation with html and css coding.

This animation is created with line tag and its color is changed with @keyframes .

What you need for creating animation like above.

• Basic knowledge of html and css.
• Text editor like notepad , better if you use Standard code editor.

Old animation related to this animation
1. A animation with html tag used for creating a line and circle
2. New edition of Animation with html and css (line, animate and and css property) - top4ways
3. Animation with html and css (line, animate and and css property) - top4ways

Lets start coding to create animation like this one.

Step first:- Open an text editor and write the basic structure of html5 and start coding as in step below
Step second :- Now create svg elements and define its height and width ( In this animation height=600 and width=600). As in below code
<svg height="600" width="600"> </svg>

Step third :-Now create line tags for this animation as in below code

x1 and y1 defines the start point of line and x2 and y2 define ending point of line.
<svg width="600" height="600"> /*lines from center to top*/ <line y1="10" x1="0" y2="300" x2="300" /> <line y1="10" x1="30" y2="300" x2="300" /> <line y1="10" x1="60" y2="300" x2="300" /> <line y1="10" x1="90" y2="300" x2="300" /> <line y1="10" x1="120" y2="300" x2="300" /> <line y1="10" x1="150" y2="300" x2="300" /> <line y1="10" x1="180" y2="300" x2="300" /> <line y1="10" x1="210" y2="300" x2="300" /> <line y1="10" x1="240" y2="300" x2="300" /> <line y1="10" x1="270" y2="300" x2="300" /> <line y1="10" x1="300" y2="300" x2="300" /> <line y1="10" x1="330" y2="300" x2="300" /> <line y1="10" x1="360" y2="300" x2="300" /> <line y1="10" x1="390" y2="300" x2="300" /> <line y1="10" x1="420" y2="300" x2="300" /> <line y1="10" x1="450" y2="300" x2="300" /> <line y1="10" x1="480" y2="300" x2="300" /> <line y1="10" x1="510" y2="300" x2="300" /> <line y1="10" x1="540" y2="300" x2="300" /> <line y1="10" x1="570" y2="300" x2="300" /> <line y1="10" x1="600" y2="300" x2="300" /> /*from center to bottom*/ <line y1="590" x1="0" y2="300" x2="300" /> <line y1="590" x1="30" y2="300" x2="300" /> <line y1="590" x1="60" y2="300" x2="300" /> <line y1="590" x1="90" y2="300" x2="300" /> <line y1="590" x1="120" y2="300" x2="300" /> <line y1="590" x1="150" y2="300" x2="300" /> <line y1="590" x1="180" y2="300" x2="300" /> <line y1="590" x1="210" y2="300" x2="300" /> <line y1="590" x1="240" y2="300" x2="300" /> <line y1="590" x1="270" y2="300" x2="300" /> <line y1="590" x1="300" y2="300" x2="300" /> <line y1="590" x1="330" y2="300" x2="300" /> <line y1="590" x1="360" y2="300" x2="300" /> <line y1="590" x1="390" y2="300" x2="300" /> <line y1="590" x1="420" y2="300" x2="300" /> <line y1="590" x1="450" y2="300" x2="300" /> <line y1="590" x1="480" y2="300" x2="300" /> <line y1="590" x1="510" y2="300" x2="300" /> <line y1="590" x1="540" y2="300" x2="300" /> <line y1="590" x1="570" y2="300" x2="300" /> <line y1="590" x1="600" y2="300" x2="300" /> /*from center to right*/ <line x1="590" y1="0" x2="300" y2="300" /> <line x1="590" y1="30" x2="300" y2="300" /> <line x1="590" y1="60" x2="300" y2="300" /> <line x1="590" y1="90" x2="300" y2="300" /> <line x1="590" y1="120" x2="300" y2="300" /> <line x1="590" y1="150" x2="300" y2="300" /> <line x1="590" y1="180" x2="300" y2="300" /> <line x1="590" y1="210" x2="300" y2="300" /> <line x1="590" y1="240" x2="300" y2="300" /> <line x1="590" y1="270" x2="300" y2="300" /> <line x1="590" y1="300" x2="300" y2="300" /> <line x1="590" y1="330" x2="300" y2="300" /> <line x1="590" y1="360" x2="300" y2="300" /> <line x1="590" y1="390" x2="300" y2="300" /> <line x1="590" y1="420" x2="300" y2="300" /> <line x1="590" y1="450" x2="300" y2="300" /> <line x1="590" y1="480" x2="300" y2="300" /> <line x1="590" y1="510" x2="300" y2="300" /> <line x1="590" y1="540" x2="300" y2="300" /> <line x1="590" y1="570" x2="300" y2="300" /> <line x1="590" y1="600" x2="300" y2="300" /> /*from center to left*/ <line x1="10" y1="0" x2="300" y2="300" /> <line x1="10" y1="30" x2="300" y2="300" /> <line x1="10" y1="60" x2="300" y2="300" /> <line x1="10" y1="90" x2="300" y2="300" /> <line x1="10" y1="120" x2="300" y2="300" /> <line x1="10" y1="150" x2="300" y2="300" /> <line x1="10" y1="180" x2="300" y2="300" /> <line x1="10" y1="210" x2="300" y2="300" /> <line x1="10" y1="240" x2="300" y2="300" /> <line x1="10" y1="270" x2="300" y2="300" /> <line x1="10" y1="300" x2="300" y2="300" /> <line x1="10" y1="330" x2="300" y2="300" /> <line x1="10" y1="360" x2="300" y2="300" /> <line x1="10" y1="390" x2="300" y2="300" /> <line x1="10" y1="420" x2="300" y2="300" /> <line x1="10" y1="450" x2="300" y2="300" /> <line x1="10" y1="480" x2="300" y2="300" /> <line x1="10" y1="510" x2="300" y2="300" /> <line x1="10" y1="540" x2="300" y2="300" /> <line x1="10" y1="570" x2="300" y2="300" /> <line x1="10" y1="600" x2="300" y2="300" /> </svg>

Step fourth: - Now define css for changing the color of line for this animation as in below code

<style> line{ stroke:#00F0F0; stroke-linecap:round; stroke-width:7; animation-name:change_colorb1; animation-iteration-count:infinite; animation-duration:5s; } @keyframes change_colorb1{ 20%{stroke:red;} 40%{stroke:green;} 60%{stroke:orange;} 80%{stroke:blue;} 100%{stroke:#00F0F0;} } </style>

Step fifth :- Now combine and save this codes in a right way and Run it on browser.