멤피스 디자인

<div class="canvas" id="canvas">
  <div class="sq"></div><div class="zig"></div><div class="dot"></div>
  <div class="ring"></div><div class="tri"></div>
</div>

body{background:#f6e9d8}
.canvas{position:relative;width:min(84%,300px);aspect-ratio:1.3}
.canvas>*{position:absolute;transition:transform 1.6s ease-in-out}
.sq{left:6%;top:14%;width:20%;aspect-ratio:1;background:#ff5b3d}
.zig{right:10%;top:10%;width:30%;height:16%;
  background:repeating-linear-gradient(115deg,#111 0 6px,transparent 6px 14px)}
.dot{left:40%;top:60%;width:16%;aspect-ratio:1;border-radius:50%;background:#2f7de1}
.ring{right:16%;bottom:12%;width:22%;aspect-ratio:1;border-radius:50%;border:8px solid #f4c515;background:none}
.tri{left:10%;bottom:8%;width:0;height:0;border-left:11% solid transparent;border-right:11% solid transparent;
  border-bottom:20% solid #1fb27a}
.canvas.shift .sq{transform:rotate(18deg) translate(6%,4%)}
.canvas.shift .zig{transform:translate(-8%,10%)}
.canvas.shift .dot{transform:translate(10%,-14%) scale(1.15)}
.canvas.shift .ring{transform:rotate(-20deg)}
.canvas.shift .tri{transform:translate(8%,-6%) rotate(-10deg)}

const c = document.getElementById('canvas');
setInterval(() => c.classList.toggle('shift'), 1500);