Green wave animated silhouette
<div></div> div {
mask-image: url("img/wave.webp");
mask-size: 100% 100%;
mask-repeat: no-repeat;
/* need to set a background */
background-color: green;
height: 94%;
max-width: 30rem;
aspect-ratio: 1 / 1;
}
body {
height: 100dvh;
margin: 0;
display: grid;
place-items: center;
} Description
You can use CSS masks to colour an animated image (GIF, webp) to create a silhouette. It is an interesting technique to create novel animations.
To understand the code, you can read this quick tutorial.