Quick SVG Elastic Line Animation Effect
Download : Code
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Quick SVG Elastic Line Animation Effect</title>
</head>
<body>
<svg>
<path></path>
</svg>
<svg>
<path></path>
</svg>
</body>
</html>
style.css
*{
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
svg{
position: absolute;
width: 400px;
fill: none;
}
svg:nth-child(2){
filter: blur(40px);
}
svg path{
d: path("M0,25 C150,110 150,-60 300,25");
stroke: #ff0092;
stroke-width: 50;
stroke-linecap: round;
transform: translate(50px, 50%);
animation: animate 2s ease-in-out infinite;
}
@keyframes animate {
0%{
stroke: #ff0092;
d: path("M0,25 C150,110 150,-60 300,25");
}
50%{
stroke: #00ff00;
d: path("M0,25 C160,-50 140,110 300,25");
}
}Download - Code
No comments:
Post a Comment