Animación de burbujas de corazón con Matter.js

1,224 saniladnul

Abrir en el editor Publica tu código

Animación de burbujas de corazón con Matter.js

Recomendado

13 April 2024

Botón de alternancia HTML CSS

13 June 2025

Un código de Metehan

26 June 2025

Sitio de comercio electrónico HTML, Tailwind CSS, Compras

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>DeNuZz Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>

<div class="bubbles">
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
    </div>
    <div class="bubble"><svg class="heart" viewBox="0 0 32 32">
        <title>heart22</title>
        <path d="M23.6 2c-3.363 0-6.258 2.736-7.599 5.594-1.342-2.858-4.237-5.594-7.601-5.594-4.637 0-8.4 3.764-8.4 8.401 0 9.433 9.516 11.906 16.001 21.232 6.13-9.268 15.999-12.1 15.999-21.232 0-4.637-3.763-8.401-8.4-8.401z"></path>
      </svg>
<script>
  const svg_terrain = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512px' height='512px' viewBox='0 0 512 512'%3E%3Cpath id='パス' fill='none' stroke='black' stroke-width='1' d='M 256.75,151.50 C 256.75,151.50 263.33,132.67 263.33,132.67 263.33,132.67 272.00,110.67 272.00,110.67 272.00,110.67 283.33,97.33 283.33,97.33 283.33,97.33 296.67,81.33 296.67,81.33 296.67,81.33 314.67,66.00 314.67,66.00 314.67,66.00 332.67,56.67 332.67,56.67 332.67,56.67 350.67,52.00 350.67,52.00 350.67,52.00 374.00,46.00 374.00,46.00 374.00,46.00 392.67,47.33 392.67,47.33 392.67,47.33 416.67,51.33 416.67,51.33 416.67,51.33 435.33,57.33 435.33,57.33 435.33,57.33 456.67,67.33 456.67,67.33 456.67,67.33 472.00,80.00 472.00,80.00 472.00,80.00 485.33,96.67 485.33,96.67 485.33,96.67 495.33,114.67 495.33,114.67 495.33,114.67 504.00,132.67 504.00,132.67 504.00,132.67 510.00,152.67 510.00,152.67 510.00,152.67 509.33,176.00 509.33,176.00 509.33,176.00 508.00,207.33 508.00,207.33 508.00,207.33 497.33,252.67 497.33,252.67 497.33,252.67 484.00,285.33 484.00,285.33 484.00,285.33 467.33,318.00 467.33,318.00 467.33,318.00 446.67,343.33 446.67,343.33 446.67,343.33 426.67,365.33 426.67,365.33 426.67,365.33 404.67,384.67 404.67,384.67 404.67,384.67 380.67,402.00 380.67,402.00 380.67,402.00 358.67,418.67 358.67,418.67 358.67,418.67 328.67,433.33 328.67,433.33 328.67,433.33 307.33,446.67 307.33,446.67 307.33,446.67 284.67,454.00 284.67,454.00 284.67,454.00 257.33,464.67 257.33,464.67 257.33,464.67 224.00,450.67 224.00,450.67 224.00,450.67 194.00,438.67 194.00,438.67 194.00,438.67 173.33,428.00 173.33,428.00 173.33,428.00 146.00,412.00 146.00,412.00 146.00,412.00 122.67,393.33 122.67,393.33 122.67,393.33 95.33,374.00 95.33,374.00 95.33,374.00 72.00,351.33 72.00,351.33 72.00,351.33 50.67,325.33 50.67,325.33 50.67,325.33 39.33,307.33 39.33,307.33 39.33,307.33 25.33,285.33 25.33,285.33 25.33,285.33 14.00,259.33 14.00,259.33 14.00,259.33 4.00,229.33 4.00,229.33 4.00,229.33 2.00,209.33 2.00,209.33 2.00,209.33 0.67,175.33 0.67,175.33 0.67,175.33 2.67,151.33 2.67,151.33 2.67,151.33 10.67,126.67 10.67,126.67 10.67,126.67 19.33,110.00 19.33,110.00 19.33,110.00 34.00,85.33 34.00,85.33 34.00,85.33 52.00,71.33 52.00,71.33 52.00,71.33 76.00,56.67 76.00,56.67 76.00,56.67 106.67,45.33 106.67,45.33 106.67,45.33 132.00,45.33 132.00,45.33 132.00,45.33 161.33,50.67 161.33,50.67 161.33,50.67 178.67,56.67 178.67,56.67 178.67,56.67 198.67,67.33 198.67,67.33 198.67,67.33 216.67,78.67 216.67,78.67 216.67,78.67 230.00,95.33 230.00,95.33 230.00,95.33 240.00,110.67 240.00,110.67 240.00,110.67 248.53,129.37 248.53,129.37 248.53,129.37 251.65,140.15 251.65,140.15 251.65,140.15 255.75,151.50 255.75,151.50 255.75,151.50 259.33,0.67 259.33,0.67 259.33,0.67 0.28,0.57 0.28,0.57 0.28,0.57 -0.85,511.81 -0.85,511.81 -0.85,511.81 511.52,511.81 511.52,511.81 511.52,511.81 512.00,-0.50 512.00,-0.50 512.00,-0.50 263.00,0.50 263.00,0.50 263.00,0.50 256.75,151.50 256.75,151.50 Z' /%3E%3C/svg%3E";
  const svg_heart = "data:image/svg+xml,%3Csvg id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='width: 512px; height: 512px; opacity: 1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%234B4B4B;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M384,46.469c-70.688,0-128,57.313-128,128.016c0-70.703-57.313-128.016-128-128.016S0,103.781,0,174.484 c0,66.484,31.313,193.391,218.563,276.234c11.844,5.25,35.703,14.469,35.703,14.469c0.547,0.219,1.141,0.344,1.734,0.344 s1.188-0.125,1.734-0.344c0,0,23.859-9.219,35.703-14.469C480.688,367.875,512,240.969,512,174.484 C512,103.781,454.688,46.469,384,46.469z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E";
</script>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  background: black;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  overflow: hidden;
}
body {
  width: 100vw;
  height: 100vh;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
canvas {
  width: 100dvmin;
  aspect-ratio: 1;
  z-index: 1;
}

.container * {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
} 
.bubbles {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

.bubble {
  position: absolute;
  z-index: 200;
  border-radius: 50%;
}
.bubble:nth-child(1) {
  top: 8%;
  left: 60%;

height: 11vmin;
  width: 11vmin;
  -webkit-animation: love-burst 3s infinite 0s;
  animation: love-burst 3s infinite 0s;
  box-shadow: inset 0 0 0 5.5vmin transparent;
  -webkit-transform: translate(0, 0.05em) scale(0);
  transform: translate(0, 0.05em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(2) {
  top: 83%;
  left: 14%;
  height: 20vmin;
  width: 20vmin;
  -webkit-animation: love-burst 3s infinite 0.15s;
  animation: love-burst 3s infinite 0.15s;
  box-shadow: inset 0 0 0 10vmin transparent;
  -webkit-transform: translate(0, 0.75em) scale(0);
  transform: translate(0, 0.75em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(3) {
  top: 25%;
  left: 49%;
  height: 4vmin;
  width: 4vmin;
  -webkit-animation: love-burst 3s infinite 0.3s;
  animation: love-burst 3s infinite 0.3s;
  box-shadow: inset 0 0 0 2vmin transparent;
  -webkit-transform: translate(0, 0.5em) scale(0);
  transform: translate(0, 0.5em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(4) {
  top: 63%;
  left: 93%;
  height: 3vmin;
  width: 3vmin;
  -webkit-animation: love-burst 3s infinite 0.45s;
  animation: love-burst 3s infinite 0.45s;
  box-shadow: inset 0 0 0 1.5vmin transparent;
  -webkit-transform: translate(0, 0.35em) scale(0);
  transform: translate(0, 0.35em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(5) {
  top: 7%;
  left: 56%;
  height: 18vmin;
  width: 18vmin;
  -webkit-animation: love-burst 3s infinite 0.6s;
  animation: love-burst 3s infinite 0.6s;
  box-shadow: inset 0 0 0 9vmin transparent;
  -webkit-transform: translate(0, 0.3em) scale(0);
  transform: translate(0, 0.3em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(6) {
  top: 10%;
  left: 68%;
  height: 5vmin;
  width: 5vmin;
  -webkit-animation: love-burst 3s infinite 0.75s;
  animation: love-burst 3s infinite 0.75s;
  box-shadow: inset 0 0 0 2.5vmin transparent;
  -webkit-transform: translate(0, 1.1em) scale(0);
  transform: translate(0, 1.1em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(7) {
  top: 68%;
  left: 1%;
  height: 5vmin;
  width: 5vmin;
  -webkit-animation: love-burst 3s infinite 0.9s;
  animation: love-burst 3s infinite 0.9s;
  box-shadow: inset 0 0 0 2.5vmin transparent;
  -webkit-transform: translate(0, 0.15em) scale(0);
  transform: translate(0, 0.15em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(8) {
  top: 61%;
  left: 51%;
  height: 11vmin;
  width: 11vmin;
  -webkit-animation: love-burst 3s infinite 1.05s;
  animation: love-burst 3s infinite 1.05s;
  box-shadow: inset 0 0 0 5.5vmin transparent;
  -webkit-transform: translate(0, 1.05em) scale(0);
  transform: translate(0, 1.05em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(9) {
  top: 24%;
  left: 45%;
  height: 11vmin;
  width: 11vmin;
  -webkit-animation: love-burst 3s infinite 1.2s;
  animation: love-burst 3s infinite 1.2s;
  box-shadow: inset 0 0 0 5.5vmin transparent;
  -webkit-transform: translate(0, 1em) scale(0);
  transform: translate(0, 1em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(10) {
  top: 13%;
  left: 10%;
  height: 19vmin;
  width: 19vmin;
  -webkit-animation: love-burst 3s infinite 1.35s;
  animation: love-burst 3s infinite 1.35s;
  box-shadow: inset 0 0 0 9.5vmin transparent;
  -webkit-transform: translate(0, 1em) scale(0);
  transform: translate(0, 1em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(11) {
  top: 76%;
  left: 7%;
  height: 14vmin;
  width: 14vmin;
  -webkit-animation: love-burst 3s infinite 1.5s;
  animation: love-burst 3s infinite 1.5s;
  box-shadow: inset 0 0 0 7vmin transparent;
  -webkit-transform: translate(0, 0.1em) scale(0);
  transform: translate(0, 0.1em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(12) {
  top: 22%;
  left: 8%;
  height: 17vmin;
  width: 17vmin;
  -webkit-animation: love-burst 3s infinite 1.65s;
  animation: love-burst 3s infinite 1.65s;
  box-shadow: inset 0 0 0 8.5vmin transparent;
  -webkit-transform: translate(0, 0.2em) scale(0);
  transform: translate(0, 0.2em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(13) {
  top: 23%;
  left: 81%;
  height: 16vmin;
  width: 16vmin;
  -webkit-animation: love-burst 3s infinite 1.8s;
  animation: love-burst 3s infinite 1.8s;
  box-shadow: inset 0 0 0 8vmin transparent;
  -webkit-transform: translate(0, 0.1em) scale(0);
  transform: translate(0, 0.1em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(14) {
  top: 77%;
  left: 88%;
  height: 3vmin;
  width: 3vmin;
  -webkit-animation: love-burst 3s infinite 1.95s;
  animation: love-burst 3s infinite 1.95s;
  box-shadow: inset 0 0 0 1.5vmin transparent;
  -webkit-transform: translate(0, 0.45em) scale(0);
  transform: translate(0, 0.45em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(15) {
  top: 41%;
  left: 1%;
  height: 9vmin;
  width: 9vmin;
  -webkit-animation: love-burst 3s infinite 2.1s;
  animation: love-burst 3s infinite 2.1s;
  box-shadow: inset 0 0 0 4.5vmin transparent;
  -webkit-transform: translate(0, 0.05em) scale(0);
  transform: translate(0, 0.05em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(16) {
  top: 51%;
  left: 51%;
  height: 8vmin;
  width: 8vmin;
  -webkit-animation: love-burst 3s infinite 2.25s;
  animation: love-burst 3s infinite 2.25s;
  box-shadow: inset 0 0 0 4vmin transparent;
  -webkit-transform: translate(0, 1.15em) scale(0);
  transform: translate(0, 1.15em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(17) {
  top: 37%;
  left: 65%;
  height: 11vmin;
  width: 11vmin;
  -webkit-animation: love-burst 3s infinite 2.4s;
  animation: love-burst 3s infinite 2.4s;
  box-shadow: inset 0 0 0 5.5vmin transparent;
  -webkit-transform: translate(0, 0.2em) scale(0);
  transform: translate(0, 0.2em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(18) {
  top: 11%;
  left: 83%;
  height: 18vmin;
  width: 18vmin;
  -webkit-animation: love-burst 3s infinite 2.55s;
  animation: love-burst 3s infinite 2.55s;
  box-shadow: inset 0 0 0 9vmin transparent;
  -webkit-transform: translate(0, 0.9em) scale(0);
  transform: translate(0, 0.9em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(19) {
  top: 64%;
  left: 86%;
  height: 12vmin;
  width: 12vmin;
  -webkit-animation: love-burst 3s infinite 2.7s;
  animation: love-burst 3s infinite 2.7s;
  box-shadow: inset 0 0 0 6vmin transparent;
  -webkit-transform: translate(0, 0.65em) scale(0);
  transform: translate(0, 0.65em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
.bubble:nth-child(20) {
  top: 39%;
  left: 24%;
  height: 19vmin;
  width: 19vmin;
  -webkit-animation: love-burst 3s infinite 2.85s;
  animation: love-burst 3s infinite 2.85s;
  box-shadow: inset 0 0 0 9.5vmin transparent;
  -webkit-transform: translate(0, 0.2em) scale(0);
  transform: translate(0, 0.2em) scale(0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}

@-webkit-keyframes love-burst {
  50%,
  100% {
    box-shadow: inset 0 0 0 0 rgb(1, 175, 73);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
}

@keyframes love-burst {
  50%,
  100% {
    box-shadow: inset 0 0 0 0 rgb(211, 6, 177);
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
  }
}
.heart {
  fill: transparent;
  opacity: 0;
}
.bubble:nth-child(1) .heart {
  -webkit-animation: love 3s forwards infinite 0s;
  animation: love 3s forwards infinite 0s;
  -webkit-transform: scale(0.5) rotate(-4deg);
  transform: scale(0.5) rotate(-4deg);
}
.bubble:nth-child(2) .heart {
  -webkit-animation: love 3s forwards infinite 0.15s;
  animation: love 3s forwards infinite 0.15s;
  -webkit-transform: scale(0.5) rotate(22deg);
  transform: scale(0.5) rotate(22deg);
}
.bubble:nth-child(3) .heart {
  -webkit-animation: love 3s forwards infinite 0.3s;
  animation: love 3s forwards infinite 0.3s;
  -webkit-transform: scale(0.5) rotate(-5deg);
  transform: scale(0.5) rotate(-5deg);
}
.bubble:nth-child(4) .heart {
  -webkit-animation: love 3s forwards infinite 0.45s;
  animation: love 3s forwards infinite 0.45s;
  -webkit-transform: scale(0.5) rotate(50deg);
  transform: scale(0.5) rotate(50deg);
}
.bubble:nth-child(5) .heart {
  -webkit-animation: love 3s forwards infinite 0.6s;
  animation: love 3s forwards infinite 0.6s;
  -webkit-transform: scale(0.5) rotate(-29deg);
  transform: scale(0.5) rotate(-29deg);
}
.bubble:nth-child(6) .heart {
  -webkit-animation: love 3s forwards infinite 0.75s;
  animation: love 3s forwards infinite 0.75s;
  -webkit-transform: scale(0.5) rotate(35deg);
  transform: scale(0.5) rotate(35deg);
}
.bubble:nth-child(7) .heart {
  -webkit-animation: love 3s forwards infinite 0.9s;
  animation: love 3s forwards infinite 0.9s;
  -webkit-transform: scale(0.5) rotate(-5deg);
  transform: scale(0.5) rotate(-5deg);
}
.bubble:nth-child(8) .heart {
  -webkit-animation: love 3s forwards infinite 1.05s;
  animation: love 3s forwards infinite 1.05s;
  -webkit-transform: scale(0.5) rotate(40deg);
  transform: scale(0.5) rotate(40deg);
}
.bubble:nth-child(9) .heart {
  -webkit-animation: love 3s forwards infinite 1.2s;
  animation: love 3s forwards infinite 1.2s;
  -webkit-transform: scale(0.5) rotate(-35deg);
  transform: scale(0.5) rotate(-35deg);
}
.bubble:nth-child(10) .heart {
  -webkit-animation: love 3s forwards infinite 1.35s;
  animation: love 3s forwards infinite 1.35s;
  -webkit-transform: scale(0.5) rotate(28deg);
  transform: scale(0.5) rotate(28deg);
}
.bubble:nth-child(11) .heart {
  -webkit-animation: love 3s forwards infinite 1.5s;
  animation: love 3s forwards infinite 1.5s;
  -webkit-transform: scale(0.5) rotate(-3deg);
  transform: scale(0.5) rotate(-3deg);
}
.bubble:nth-child(12) .heart {
  -webkit-animation: love 3s forwards infinite 1.65s;
  animation: love 3s forwards infinite 1.65s;
  -webkit-transform: scale(0.5) rotate(48deg);
  transform: scale(0.5) rotate(48deg);
}
.bubble:nth-child(13) .heart {
  -webkit-animation: love 3s forwards infinite 1.8s;
  animation: love 3s forwards infinite 1.8s;
  -webkit-transform: scale(0.5) rotate(-33deg);
  transform: scale(0.5) rotate(-33deg);
}
.bubble:nth-child(14) .heart {
  -webkit-animation: love 3s forwards infinite 1.95s;
  animation: love 3s forwards infinite 1.95s;
  -webkit-transform: scale(0.5) rotate(40deg);
  transform: scale(0.5) rotate(40deg);
}
.bubble:nth-child(15) .heart {
  -webkit-animation: love 3s forwards infinite 2.1s;
  animation: love 3s forwards infinite 2.1s;
  -webkit-transform: scale(0.5) rotate(-29deg);
  transform: scale(0.5) rotate(-29deg);
}
.bubble:nth-child(16) .heart {
  -webkit-animation: love 3s forwards infinite 2.25s;
  animation: love 3s forwards infinite 2.25s;
  -webkit-transform: scale(0.5) rotate(19deg);
  transform: scale(0.5) rotate(19deg);
}
.bubble:nth-child(17) .heart {
  -webkit-animation: love 3s forwards infinite 2.4s;
  animation: love 3s forwards infinite 2.4s;
  -webkit-transform: scale(0.5) rotate(-29deg);
  transform: scale(0.5) rotate(-29deg);
}
.bubble:nth-child(18) .heart {
  -webkit-animation: love 3s forwards infinite 2.55s;
  animation: love 3s forwards infinite 2.55s;
  -webkit-transform: scale(0.5) rotate(14deg);
  transform: scale(0.5) rotate(14deg);
}
.bubble:nth-child(19) .heart {
  -webkit-animation: love 3s forwards infinite 2.7s;
  animation: love 3s forwards infinite 2.7s;
  -webkit-transform: scale(0.5) rotate(-10deg);
  transform: scale(0.5) rotate(-10deg);
}
.bubble:nth-child(20) .heart {
  -webkit-animation: love 3s forwards infinite 2.85s;
  animation: love 3s forwards infinite 2.85s;
  -webkit-transform: scale(0.5) rotate(46deg);
  transform: scale(0.5) rotate(46deg);
}

@-webkit-keyframes love {
  50% {
    fill: rgb(253, 66, 19);
    opacity: 1;
  }
}

@keyframes love {
  50% {
    fill: rgb(253, 93, 19);
    opacity: 1;
  }
}

"use strict";

!(function () {
  function t() {
    !(function () {
      var t, g;
      if (
        ((o = l / 2),
        (a = s / 2),
        (n = c.create()),
        (e = n.world),
        (r = d.create({
          element: document.body,
          engine: n,
          options: {
            width: l,
            height: s,
            wireframes: !1,
            background: "transparent",
            pixelRatio: 1
          }
        })),
        (i = u.create()),
        u.run(i, n),
        (n.gravity.scale = 0),
        (n.gravity.x = 0),
        (n.gravity.y = 0),
        "undefined" != typeof fetch)
      ) {
        (t = function (t, e) {
          return Array.prototype.slice.call(t.querySelectorAll(e));
        }),
          (g = function (t) {
            return fetch(t)
              .then(function (t) {
                return t.text();
              })
              .then(function (t) {
                return new window.DOMParser().parseFromString(
                  t,
                  "image/svg+xml"
                );
              });
          })(svg_terrain).then(function (n) {
            var r = t(n, "path"),
              i = r.map(function (t) {
                return v.pathToVertices(t, 30);
              }),
              l = y.fromVertices(
                256,
                200,
                i,
                {
                  isStatic: !0,
                  render: {
                    fillStyle: "transparent",
                    strokeStyle: "transparent",
                    lineWidth: 1
                  }
                },
                !0
              );
            h.add(e, l), (o = l.position.x), (a = l.position.y);
          });
        let n = null,
          r = null;
        g(svg_heart).then(function (e) {
          n ||
            ((r = t(e, "path").map(function (t) {
              return v.pathToVertices(t, 50);
            })),
            (n = y.fromVertices(
              o,
              1.5 * a,
              r,
              {
                restitution: 0,
                friction: 0,
                frictionStatic: 0,
                frictionAir: 0,
                mass: 20,
                render: {
                  lineWidth: 2
                }
              },
              !0
            )),
            M.scale(n, 0.2, 0.2));
        });
        let i = function () {
          let t = structuredClone(n);
          (t.id = f.nextId()),
            (t.position.x = o),
            (t.position.y = 1.5 * a),
            S.push(S.shift());
          let r = S[0];
          (t.render.fillStyle = r),
            (t.render.strokeStyle = r),
            t.parts.forEach(function (e, n) {
              (t.parts[n].render.fillStyle = r),
                (t.parts[n].render.strokeStyle = r);
            }),
            M.setAngle(t, Math.round(360 * Math.random()), !1),
            M.setVelocity(t, {
              x: f.random(-5, 5),
              y: f.random(-5, -1)
            }),
            h.add(e, t);
        };
        setTimeout(function () {
          let t = 0,
            e = setInterval(() => {
              i(), 2 == t && (clearInterval(e), (n = null), (r = null)), t++;
            }, 780);
        }, 220);
      } else f.warn("Fetch is not available. Could not load SVG.");
      let k = m.create(r.canvas),
        x = p.create(n, {
          mouse: k,
          constraint: {
            stiffness: 0.2,
            render: {
              visible: !1
            }
          }
        });
      h.add(e, x),
        (r.mouse = k),
        d.lookAt(r, {
          min: {
            x: 0,
            y: 0
          },
          max: {
            x: l,
            y: s
          }
        }),
        d.run(r);
    })();
  }
  let e,
    n,
    r,
    i,
    o,
    a,
    l = 512,
    s = 512,
    c = (Matter.World, Matter.Engine),
    d = Matter.Render,
    u = Matter.Runner,
    f = (Matter.Composites, Matter.Common),
    p = Matter.MouseConstraint,
    m = Matter.Mouse,
    h = Matter.Composite,
    y = (Matter.Vertices, Matter.Bodies),
    M = Matter.Body,
    v = (Matter.Events, Matter.Query, Matter.Svg),
    g = [
      "pink",
      "deeppink",
      "deeppink",
      "hotpink",
      "hotpink",
      "lightpink",
      "magenta",
      "orchid"
    ],
    S = ["mediumvioletred", "crimson", "salmon"];
  (window.onload = () => {
    t();
  }),
    setTimeout(function () {
      let t = 0,
        n = setInterval(() => {
          !(function () {
            let t = f.choose(g);
            const n = y.circle(o, a, 25, {
              restitution: 0,
              friction: 0,
              frictionStatic: 0,
              frictionAir: 0,
              mass: 10,
              render: {
                fillStyle: t,
                strokeStyle: t,
                lineWidth: 0
              }
            });
            M.setVelocity(n, {
              x: f.random(-1, 1),
              y: f.random(-1, 1)
            }),
              h.add(e, n);
          })(),
            60 == t && clearInterval(n),
            t++;
        }, 100);
    }, 2e3);
})();