Drops

I like how gentle this animation can be

Use size? Size Percent time spent transparent Percent time spent fading in and out

Ring 0 color gap thickness animation delay (seconds) animation duration (seconds)

Ring 1 color gap thickness animation delay (seconds) animation duration (seconds)

Ring 2 color gap thickness animation delay (seconds) animation duration (seconds)

Ring 3 color gap thickness animation delay (seconds) animation duration (seconds)

Equivalent CSS

@property --ring-0-color {
    syntax: "<color>";
    inherits: true;
    initial-value: oklch(0.7685 0.0338 196.49);
}
@property --ring-0-gap {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-0-thickness {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-0-delay {
    syntax: "<time>";
    inherits: true;
    initial-value: 0s;
}
@property --ring-0-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 1s;
}
@property --ring-1-color {
    syntax: "<color>";
    inherits: true;
    initial-value: oklch(0.7685 0.0338 196.49);
}
@property --ring-1-gap {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-1-thickness {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-1-delay {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.25s;
}
@property --ring-1-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 1s;
}
@property --ring-2-color {
    syntax: "<color>";
    inherits: true;
    initial-value: oklch(0.7685 0.0338 196.49);
}
@property --ring-2-gap {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-2-thickness {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-2-delay {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.5s;
}
@property --ring-2-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 1s;
}
@property --ring-3-color {
    syntax: "<color>";
    inherits: true;
    initial-value: oklch(0.7685 0.0338 196.49);
}
@property --ring-3-gap {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-3-thickness {
    syntax: "<length-percentage>";
    inherits: true;
    initial-value: 10%;
}
@property --ring-3-delay {
    syntax: "<time>";
    inherits: true;
    initial-value: 0.75s;
}
@property --ring-3-duration {
    syntax: "<time>";
    inherits: true;
    initial-value: 1s;
}
.drops {
    background-image: radial-gradient(
    circle closest-side at center,
    transparent,
    transparent 1% 9%, var(--ring-0-color) 10% 20%,
    transparent 21% 29%, var(--ring-1-color) 30% 40%,
    transparent 41% 49%, var(--ring-2-color) 50% 60%,
    transparent 61% 69%, var(--ring-3-color) 70% 80%,
    transparent 81%
);
    background-size: var(--size) var(--size);
}