Morphing Blurry Background

index.html

<h1 class="title">
DJ Substance<p> Deep Progressive Trance
</h1>

<svg
  class="morphing-svg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 700 500"
  style="enable-background:new 0 0 700 500"
  xml:space="preserve"
>
  <!--  Set 1  -->
  <path
    data-morph="shape-1"
    data-morph-targets="shape-2,shape-3"
    d="M657 58.8c-6.2-11-30.1-13-48.3-5.9-32.2 12.5-32.7 48-59.3 53.4-5.4 1.1-12.8 1.1-38.1-11.9C457.1 66.5 451.6 46 424 37.6c-41.6-12.7-96 13.3-97.4 34.7-1.4 20.2 43.4 49.4 79.6 44 15.7-2.3 22.1-10 30.5-5.9 19.3 9.4.1 56.6 21.2 74.5 14.8 12.6 41 3.4 74.5-8.5 63.4-22.4 94.3-58.2 105-72C648 91 663.8 70.8 657 58.8z"
  />
  <path
    data-morph="shape-2"
    d="M588.9,36.7c-8.7-6-18.3-15.4-40.7,0c-23.7,16.4,25.4,60.1,6.2,74.9c-8.9,6.9-25.6,3.9-49.4-2.7c-49.6-13.7-77.8-25.6-56.8-43.7c16.9-14.5-17.7-65-27.7-50.1c-21.5,32.2-95.9,32-87.7,61c8.6,30.2,36.3,56.2,60,70.6c19.8,11.9,54.2,19.1,77.9,23.7c59.1,11.6,81.3,29.3,108.7,10.9c46.6-31.4,40.9-81.4,43.3-94.5C626,69.3,615.3,54.9,588.9,36.7z"
  />
  <path
    data-morph="shape-3"
    d="M670.5,100.4C673,90.7,649.6,67.1,618,49c-25.9-14.8-47.5,10.6-70.9,14.7c-4.8,0.8-17.3,6.2-39.5-3.7C460,38.9,464.2,74.9,440,68.5c-36.6-9.7-83.5-8.5-84.6,22.6c-0.5,15.3-3.1,55.5,28.8,51.4c13.8-1.8,59.6-21.8,67-18.7c16.9,7.1-46,30-27.4,43.5c13.1,9.5,54.7,12.4,84.1,3.4c55.7-17,68.5-27.3,77.9-37.8C595.1,122.6,663.1,129.5,670.5,100.4z"
  />

  <!--  Set 2  -->
	<path
    data-morph="shape-4"
    data-morph-targets="shape-5,shape-6"
    d="M221.9,135.4c13.7-8,81.8,30.9,89.2,76.5c7.4,45.6-16.6,48.4-0.4,82.1c5.8,12-30.7,21.8-48.7-7s-29.8-77.6-44.1-95.2C203.6,174.1,202.7,146.7,221.9,135.4z"
  />
	<path
    data-morph="shape-5"
    d="M291.5,286.6c-30.8-21.2,55.9-40.8,76.7-67.1c17.5-22.2-112.1-70.7-141.8-63.6c-17.7,4.2,11.1,35.9,25.4,53.6c14.3,17.6-99.2,5.1-80.1,33.2C192.1,272.7,335.9,317.1,291.5,286.6z"
  />
	<path
    data-morph="shape-6"
    d="M336.5,323.1c13.5-36.5,28.9-22.8,21.5-68.3s28.1-79.7,2.4-78.5c-23.9,1.1-38,27-47.8,47.4c-8.2,17.2-52.7-2.7-33.6,25.4C299.4,279.1,317.8,373.6,336.5,323.1z"
  />

  <!--  Set 3  -->
	<path
    data-morph="shape-7"
    data-morph-targets="shape-8,shape-9"
    d="M96.5,18.8c11.2,23,13,56.8,1.7,95.2s11.9,17.3,29.4,21.6c17.5,4.3-20.9,80.6-42.9,67.6s-6.8-44.9-22.6-73.6s-30.9-16.1-37.3-40.8C12.3,40.8,76.7-21.9,96.5,18.8z"
  />
	<path
    data-morph="shape-8"
    d="M172.7,15.7c11.2,23-56,43.3-68.1,67.5c-17.8,35.8,39.4,41.1,37.6,59c-2.3,22.6-35.6,59.9-57.6,46.9c-22-13-2.3-32.3-18.1-61s-24.4-18.7-30.8-43.5C23.4,36.6,153-25,172.7,15.7z"
  />
	<path
    data-morph="shape-9"
    d="M180.8,62.7c11.2,23-16.6,18.2-28.6,42.4c-17.8,35.8-33.2,28.5-35,46.4c-2.3,22.6-28,45.6-50.1,32.6c-22-13,4.3-45.2-11.5-73.9s7.3-29.9,0.9-54.7C44.2,7.6,161.1,22,180.8,62.7z"
  />
</svg>

morphing-blurry-background.markdown

Morphing Blurry Background

A Pen by substance on CodePen.

License.

script.js

// Get paths with targets.
const animatedPaths = document.querySelectorAll('[data-morph-targets]');

// Create timeline for each morphing paths.
animatedPaths.forEach((path, index) => {
  const targets = path.getAttribute('data-morph-targets').split(',');
  const timeline = gsap.timeline({
    delay: index * -2,
    repeat: -1,
    yoyo: true,
  });

  targets.forEach((targetId) => {
    const target = document.querySelector(`[data-morph=${targetId}]`);

    timeline.to(
      path,
      6, {
        morphSVG: target,
        ease: "none",
      },
    );
  });
});

scripts

<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://assets.codepen.io/16327/MorphSVGPlugin3.min.js"></script>

style.scss

.morphing-svg {
  filter: blur(80px);
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;

  path {
    visibility: hidden;
  }

  [data-morph-targets] {
    fill: #585858;
    visibility: visible;
  }
}

.title {
  font-size: 40px;
  line-height: 1.2;
  max-width: 680px;
  text-align: center;
  z-index: 1;
}

html, body {
  background-color: #000;
  color: #fff;
  font-family: Arial;
}

body {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

* {
  box-sizing: border-box;
}