How To Create Quick SVG Elastic Line Animation Effects Only HTML And CSS

Project Introduction: In this project, we are going to implement a car running on a track using HTML and CSS with sound effects.

File structure:

index.html
style.css

HTML code: In the following code,fist time open a index.html file than than create html Structure. we have placed the body tag than <svg></svg>tag than i second <path></path> after than again <svg></svg>tag and <path> </path >tag and save html file . We have added the styles using the file style.css

<!DOCTYPE html>

<head>

<title>Elastic line Animation Effects</title>

<body>

<svg>

</svg>

<svg>

</svg>

</body>

</html>

style.css: The following is the code for file “style.css” which is used in the above HTML code.

margin: 0;

padding: 0;

}

body{

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

background: #374F4A;

}

svg{

position: absolute;

width: 450px;

fill:none;

}

svg:nth-child(2){

filter: blur(40px);

}

svg path{

d:path("M0,25 C150,110 150,-60 300,25");

stroke:#42b3f5;

stroke-width:50;

stroke-linecap:round;

transform: translate(50px, 50%);

animation: animate 2s ease-in-out infinite;

}

@keyframes animate {

0%{

stroke:#42b3f5;

d:path("M0,25 C150,110 150,-60 300,25");

}

50%{

stroke:#ff033e;

d:path("M0,25 C150,-50 140,110 300,25");

}

Output :

My facebook page link:

https://www.facebook.com/OnlineCoding560956

Online school 29

How To Create Quick SVG Elastic Line Animation Effects Only HTML And CSS