<div role="img" aria-label="divtober 15: float"></div>

body {
  overflow: hidden;
}

*, *::after, *::before {
  aanimation: none !important;
}

div {
  --wood1: indianred;
  --wood2: brown;
  --sail: white;
  --rope: black;
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background:
    /* wave and sea */
    radial-gradient(120% 90% at 50% -25%, transparent 70%, mediumaquamarine 71%, mediumseagreen) 0 calc(100% - 13vmin) / 10vmin 10vmin,
    linear-gradient(#def calc(100% - 14vmin), mediumseagreen 0) 0 0 / 100% 100%
    ;
  background-repeat: repeat-x;
}

div::before,
div::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes float {
  0%, 100% { transform: rotate(1deg); }
  50% { transform: rotate(-1deg); }
}

div::before {
  transform-origin: 38% 90%;
  animation: float 10s infinite;
  background: #00f2;
  background:
    /* sight */
    linear-gradient(var(--wood2) 2.5vmin, transparent 0) calc(20% + 11.5vmin) calc(100% - 135vmin) / 22vmin 23vmin,
    linear-gradient(transparent calc(100% - 1.5vmin), var(--wood2) 0) calc(20% + 14vmin) calc(100% - 135vmin) / 14vmin 23vmin,
    conic-gradient(at 50% 270%, var(--wood1) 5deg, var(--wood2) 10deg, transparent 0 350deg, var(--wood2) 0, var(--wood1) 355deg) calc(20% + 9vmin) calc(100% - 135vmin) / 30vmin 23vmin,
    /* ship */
    linear-gradient(indianred, brown) calc(20% - 1vmin) calc(100% - 30vmin) / 64vmin 20vmin,
    radial-gradient(70% 120% at 50% 30%, indianred 70%, transparent 0) 20% 100% / 60vmin 40vmin,
    /* plank */
    linear-gradient(indianred, indianred) calc(20% + 45vmin) calc(100% - 35vmin) / 30vmin 1.5vmin,
    /* mast */
    conic-gradient(at 50% -50%, transparent 179deg, var(--wood2) 179.1deg, var(--wood1) 179.75deg 180.25deg, var(--wood2) 180.9deg, transparent 181deg) calc(20% + 15vmin) calc(100% - 45vmin) / 10vmin 140vmin,
    /* flag */
    radial-gradient(farthest-side at 0% 100%, black 99.9%, transparent 0) calc(20% + 20vmin) calc(100% - 179vmin) / 6vmin 5vmin,
    radial-gradient(farthest-side at 100% 0%, black 99.9%, transparent 0) calc(20% + 20vmin) calc(100% - 172.25vmin) / 10vmin 7vmin,
    /* sail and ropes */
    linear-gradient(to top right, transparent calc(50% - 0.25vmin), var(--rope) 0 calc(50% + 0.25vmin), transparent 0) calc(20% + 25vmin) calc(100% - 149vmin) / 37vmin 15vmin,
    linear-gradient(to top left, transparent calc(50% - 0.25vmin), var(--rope) 0 calc(50% + 0.25vmin), transparent 0) calc(20% - 13vmin) calc(100% - 149vmin) / 39vmin 15vmin,
    linear-gradient(to top right, transparent calc(50% - 0.25vmin), var(--rope) 0 calc(50% + 0.25vmin), transparent 0) calc(20% + 25vmin) calc(100% - 71vmin) / 37vmin 15vmin,
    linear-gradient(to top left, transparent calc(50% - 0.25vmin), var(--rope) 0 calc(50% + 0.25vmin), transparent 0) calc(20% - 13vmin) calc(100% - 71vmin) / 39vmin 15vmin,
    linear-gradient(var(--wood2) 2vmin, transparent 0 calc(100% - 1.5vmin), var(--wood2) 0) calc(20% - 6vmin) calc(100% - 70vmin) / 76vmin 80vmin,
    radial-gradient(100% 180%, var(--sail) 50%, transparent 0) calc(20% - 10vmin) calc(100% - 70vmin) / 90vmin 80vmin
    ;
  background-repeat: no-repeat;
}

@property --wavepos {
  initial-value: -5vmin;
  inherits: false;
  syntax: '<length>';
}

@keyframes wave {
  0%, 100% { --wavepos: -2.5vmin; }
  50% { --wavepos: -7.5vmin; }
}

div::after {
  --wavepos: -5vmin;
  animation: wave 6s linear infinite;
  background: #00f2;
  /* wave and sea */
  background:
    radial-gradient(120% 90% at 50% -25%, transparent 70%, mediumaquamarine 71%, mediumseagreen) var(--wavepos) calc(100% - 7vmin) / 10vmin 10vmin,
    linear-gradient(transparent calc(100% - 8vmin), mediumseagreen 0) 0 0 / 100% 100%
    ;
  background-repeat: repeat-x;
}