Browse Source

feat: add elastic line

master
colorfulberry 1 month ago
parent
commit
365cee8834
2 changed files with 52 additions and 0 deletions
  1. +14
    -0
      elastic_line/index.html
  2. +38
    -0
      elastic_line/style.css

+ 14
- 0
elastic_line/index.html View File

@@ -0,0 +1,14 @@
<html>
<head>
<title>Elastic Line Animation</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<svg>
<path></path>
</svg>
<svg>
<path></path>
</svg>
</body>
</html>

+ 38
- 0
elastic_line/style.css View File

@@ -0,0 +1,38 @@
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
svg {
transform: rotate(90deg);
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 1s 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");
}
}

Loading…
Cancel
Save