mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 13:10:21 +08:00
50 lines
845 B
HTML
50 lines
845 B
HTML
|
|
<svg class="svg">
|
|
<path class="path"></path>
|
|
</svg>
|
|
<svg>
|
|
<path></path>
|
|
</svg>
|
|
|
|
|
|
<style>
|
|
/* From Uiverse.io by isfan4ik - Tags: red, green, pink, loader, effect loader, loading animation */
|
|
.body {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.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: greenyellow;
|
|
stroke: #ff0092;
|
|
d: path("M0,25 C150,110 150, -60 300,25");
|
|
}
|
|
|
|
50% {
|
|
stroke: dodgerblue;
|
|
stroke: #00ff00;
|
|
d: path("M0,25 C160,-50 140, 110 300,25");
|
|
}
|
|
}
|
|
</style>
|