<div role="image" aria-label="Animated cartoon of a paper boat sinking in a bathroom sink"></div>

html, body {
  overflow: hidden;
  margin: 0;
  width: 100vw;
  height: 100vh;
  background-color: #dca;
  background-image:
    repeating-linear-gradient(to right, transparent 0 4vmin, #cba 0 4.5vmin, transparent 0 10vmin),
    repeating-linear-gradient(transparent 0 4vmin, #cba 0 4.5vmin, transparent 0 10vmin);
  background-size: 10vmin 10vmin;
  background-position: center center;
}

@property --drop {
  syntax: '<percentage>';
  initial-value: 63%;
  inherits: false;
}

@keyframes waterDrop {
  0%, 80% { --drop: 63%; }
  100% { --drop: 100%; }
}

div {
  --drop: 63%;
  animation: waterDrop 10s infinite;
  width: 75vmin;
  height: 90vmin;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  background-image:
    /* faucet */
    linear-gradient(#007689, #007689),
    linear-gradient(#007689, #007689),
    linear-gradient(#007689, #007689),
    radial-gradient(farthest-side at 50% 100%, transparent calc(99.9% - 3vmin), #004e7e 0 99.9%, transparent 0),
    linear-gradient(to right, #004e7e 3vmin, transparent 0),
    /* water drop */
    radial-gradient(closest-side, #cef 99.9%, transparent 0),
    /* handles */
    radial-gradient(farthest-side at 50% -100%, #004e7e 99.9%, transparent 0),
    radial-gradient(farthest-side at 50% -100%, #004e7e 99.9%, transparent 0),
    repeating-linear-gradient(to right, #007689 0 10%, #004e7e 0 20%,#007689 0 25%),
    repeating-linear-gradient(to right, #007689 0 10%, #004e7e 0 20%,#007689 0 25%),
    /* bottle */
    linear-gradient(#32a198 10%, transparent 0 85%, #32a198 0),
    linear-gradient(to right, #32a198 15%, #4cd0c7 0 85%, #32a198 0),
    repeating-linear-gradient(to right, white 0 3%, #ccc 0 7%, white 0 10%),
    /* mirror */
    radial-gradient(transparent 52%,  #69c1b4 0 60%, #0000 0),
    linear-gradient(45deg, #b5dcf1ff, #b5dcf100 99.9%),
    linear-gradient(-45deg, transparent 50%, #fff3 0 55%, transparent 0 57%, #fff3 0 60%, transparent 0),
    radial-gradient(#b5dcf1 54%, #2890ab 0 60%, #0000 0)
    ;
  background-size:
    /* faucet */
    4vmin 2vmin,
    4vmin 2vmin,
    6vmin 2vmin,
    14vmin 7vmin,
    14vmin 20vmin,
    /* water drop */
    1vmin 1vmin,
    /* handles */
    7vmin 1vmin,
    7vmin 1vmin,
    7vmin 4vmin,
    7vmin 4vmin,
    /* bottle */
    10vmin 15vmin,
    10vmin 15vmin,
    4vmin 15vmin,
    /* mirror */
    80% 80%,
    45% 45%,
    45% 45%,
    80% 80%
    ;
  background-position:
    /* faucet */
    calc(50% + 11vmin) 55vmin,
    50% 68.125vmin,
    50% 70.125vmin,
    calc(50% + 5.5vmin) 48.25vmin,
    calc(50% + 5.5vmin) 55vmin,
    /* water drop */
    calc(50% + 11vmin) var(--drop),
    /* handles */
    35% 71.5vmin,
    65% 71.5vmin,
    35% 67.625vmin,
    65% 67.625vmin,
    /* bottle */
    7vmin 58.125vmin,
    7vmin 58.125vmin,
    10vmin 54vmin,
    /* mirror */
    50% -30%,
    45% 21%,
    50% 20%,
    50% -30%
    
    ;
  
  background-repeat: no-repeat;
}


div::after {
  content: "";
  display: block;
  position: absolute;
  left: 5%;
  bottom: -10%;
  height: 30%;
  width: 90%;
  background-image:
    linear-gradient(#2890ab 20%, transparent 0),
    radial-gradient(farthest-side at 50% 10%, #7eb3d5  95%, transparent 0)
    ;
  
  background-size:
    100% 100%,
    100% 100%
    ;
  background-position:
    0 0,
    0 0
    ;
  background-repeat: no-repeat;
}

@keyframes sink {
  0% {
    left: 6%;
    transform: rotate(0);
    top: 71.5%;
  }
  20% {
    top: 71%;
  }
  30% {
    left: 60%;
  }
  40% {
    top: 71.5%;
  }
  60% {
    left: 20%;
    transform: rotate(0);
    top: 71.25%;
  }
  100% {
    left: 53%;
    top: 88%;
    transform: rotate(15deg);
  }
}

div::before {
  content: "";
  display: block;
  position: absolute;
  animation: sink 15s 1;
  animation-fill-mode: forwards;
  transform-origin: bottom right;
  transform: rotate(15deg);
  left: 6%;
  top: 71%;
  height: 10vmin;
  width: 24vmin;
  background-image:
    linear-gradient(45deg, transparent 32%, #ddd 0),
    linear-gradient(-45deg, transparent 32%, #eee 0),
    conic-gradient(at 50% 0, transparent 150deg, #fff 0 180deg, #eee 0 210deg, transparent 0)
    ;
  background-size:
    50% 50%,
    50% 50%,
    100% 100%
    ;
  background-position:
    0 5vmin,
    12vmin 5vmin,
    0 0
    ;
  background-repeat: no-repeat;
}