codepens/svg-blob-u-lator/dist/style.css

body {
  display: grid;
  place-items: center;
  overflow: hidden;
  height: 100vh;
  --t: rgba(255,255,255,0.001);
  --color0: #75fefb;
  --color1: #5d83fe;
  --color2: #fe47f9;
  --color3: #ffe33a;
  --colorA: var(--color2);
  --colorB: var(--color3);
  --angle1: 25%;
  --angle2: 50%;
  --depth:25;
  background: radial-gradient(circle at center, var(--color0), var(--t) 250px) -75vw 25%, radial-gradient(circle at center, var(--color3), var(--t) 350px) -25vw 25%, conic-gradient(var(--color0), var(--t), var(--color0)) -75vw 25%, conic-gradient(var(--color1), var(--t), var(--color1)) 50vw -25%, conic-gradient(var(--color2), var(--t), var(--color2)) 75vw 25%, conic-gradient(var(--t), var(--color3), var(--t)) 15vw -25%, var(--color3);
}
body * {
  box-sizing: border-box;
}
body svg {
  position: absolute;
  width: 0;
  height: 0;
}
body #controls {
  position: absolute;
  top: calc(50% + 260px);
  left: 50%;
  transform: translate(-50%);
  height: 75px;
  width: 550px;
  box-shadow: inset 0 20px 40px -20px rgba(0, 0, 0, 0.05), inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-items: center;
  z-index: 0;
  padding-top: 40px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 0 0 10px 10px;
  font-family: "Oswald";
}
body #controls input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  margin-bottom: 10px;
}
body #controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}
body #controls input[type=range]:focus {
  outline: none;
}
body #controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50px;
  cursor: pointer;
  margin-top: -6px;
  background: var(--colorA);
  box-shadow: inset 0 -5px 7.5px -5px #000, inset 0 -10px 10px -2.5px var(--colorB);
}
body #controls input[type=range]:nth-of-type(2)::-webkit-slider-thumb {
  --colorA:var(--color1);
  --colorB: var(--color0);
}
body #controls input[type=range]:nth-of-type(3)::-webkit-slider-thumb {
  --colorA:var(--color0);
  --colorB:var(--color2);
}
body #controls input[type=range]::-webkit-slider-runnable-track, body #controls input[type=range]:focus::-webkit-slider-runnable-track {
  height: 8px;
  cursor: pointer;
  background: #efefef;
  border-radius: 25px;
  box-shadow: inset 0 2px 8px -4px #666;
  outline: none;
}
body #controls input {
  position: relative;
  outline: none;
}
body #controls input:before {
  content: "Displacement Scale";
  color: #666;
  position: absolute;
  width: 100%;
  text-align: center;
  top: -30px;
  font-size: 14px;
  font-family: "Oswald";
}
body #controls input:nth-of-type(2):before {
  content: "Turbulence Frequency Y";
}
body #controls input:nth-of-type(3):before {
  content: "Turbulence Frequency X";
}
body #grid {
  width: 450px;
  height: 450px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  pointer-events: none;
  position: relative;
  z-index: 1;
  transform: translateY(-30px);
}
body #grid:before {
  content: "";
  position: absolute;
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  box-shadow: inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0, 0, 0, 0.15);
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 1.5px, var(--t) 1px, var(--t) 10px) 50% 50%/20px 20px, radial-gradient(circle at center, rgba(255, 255, 255, 0.75) 1.5px, var(--t) 1px, var(--t) 10px) calc(50% + 10px) calc(50% + 10px)/20px 20px;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  z-index: -1;
}
body #grid .cell {
  position: relative;
  transform: translateX(-12.5px);
  background: radial-gradient(circle at center, var(--color0), var(--t) 250px) -75vw 25%, radial-gradient(circle at center, var(--color3), var(--t) 300px) -25vw 25%, conic-gradient(var(--color0), var(--t), var(--color0)) -75vw 25%, conic-gradient(var(--color1), var(--t), var(--color1)) 50vw -25%, conic-gradient(var(--color2), var(--t), var(--color2)) 75vw 25%, conic-gradient(var(--t), var(--color3), var(--t)) 15vw -25%, var(--color3);
  background-attachment: fixed;
  box-shadow: inset 0 0 0 1px #efefef, 0 0 0 1px #efefef, 0 20px 40px -15px rgba(0, 0, 0, 0.25);
  z-index: 3;
}
body #grid .cell:nth-of-type(4) {
  transform: translateX(12.5px);
}
body #grid .cell:nth-of-type(5) {
  transform: translateX(12.5px);
}
body #grid .cell:nth-of-type(6) {
  transform: translateX(12.5px);
}
body #grid .cell:nth-of-type(1) .inner {
  filter: url(#filter1);
}
body #grid .cell:nth-of-type(1) .inner:nth-of-type(2) {
  filter: url(#filter8);
}
body #grid .cell:nth-of-type(2) .inner {
  filter: url(#filter2);
}
body #grid .cell:nth-of-type(2) .inner:nth-of-type(2) {
  filter: url(#filter7);
}
body #grid .cell:nth-of-type(3) .inner {
  filter: url(#filter3);
}
body #grid .cell:nth-of-type(3) .inner:nth-of-type(2) {
  filter: url(#filter6);
}
body #grid .cell:nth-of-type(4) .inner {
  filter: url(#filter4);
}
body #grid .cell:nth-of-type(4) .inner:nth-of-type(2) {
  filter: url(#filter5);
}
body #grid .cell:nth-of-type(5) .inner {
  filter: url(#filter5);
}
body #grid .cell:nth-of-type(5) .inner:nth-of-type(2) {
  filter: url(#filter4);
}
body #grid .cell:nth-of-type(6) .inner {
  filter: url(#filter6);
}
body #grid .cell:nth-of-type(6) .inner:nth-of-type(2) {
  filter: url(#filter3);
}
body #grid .cell:nth-of-type(7) .inner {
  filter: url(#filter7);
}
body #grid .cell:nth-of-type(7) .inner:nth-of-type(2) {
  filter: url(#filter2);
}
body #grid .cell:nth-of-type(8) .inner {
  filter: url(#filter8);
}
body #grid .cell:nth-of-type(8) .inner:nth-of-type(2) {
  filter: url(#filter1);
}
body #grid .cell:nth-of-type(9) .inner {
  filter: url(#filter9);
}
body #grid .cell:nth-of-type(9) .inner:nth-of-type(2) {
  filter: url(#filter0);
}
body #grid .cell .inner {
  position: absolute;
  width: 500%;
  height: 500%;
  left: -200%;
  top: -200%;
}
body #grid .cell .inner .sphere {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  border-radius: calc(var(--radius1) * 1px) calc(var(--radius2) * 1px) calc(var(--radius3) * 1px) calc(var(--radius4) * 1px);
  background: var(--colorB);
  z-index: 1;
  transition: 0.25s ease-in-out;
  transition-delay: 0.05s;
  transform: translate(calc(var(--angle1) * var(--scale) * 0.5), calc(var(--angle2) * var(--scale2) * 0.5)) scale(calc(var(--scale) * 0.75));
  box-shadow: inset 0 -20px 40px -10px #000, inset calc(var(--angle1) * 1px) calc(var(--angle2) * 1px) 40px calc((var(--angle1) + var(--angle2)) * -0.25px) var(--colorA), 0 calc(var(--depth) * 2px) 30px calc(var(--depth) * -1px) rgba(0, 0, 0, 0.25);
}
body #grid .cell .inner .sphere:before, body #grid .cell .inner .sphere:after {
  content: "";
  position: absolute;
  --colorA: var(--colorC);
  --colorB: var(--colorD);
  width: 100px;
  height: 100px;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
  border-radius: calc(var(--radius2) * 1px) calc(var(--radius4) * 1px) calc(var(--radius3) * 1px) calc(var(--radius4) * 1px);
  background: var(--colorB);
  z-index: 1;
  transition: 0.25s ease-in-out;
  transition-delay: 0.05s;
  transform: translate(calc((var(--angle1) * 2%) * (var(--scale2) * -0.5) - 25px), calc((var(--angle2) * 2%) * (var(--scale) * -0.5) + 25px)) scale(calc(var(--scale2) * 0.75));
  box-shadow: inherit;
}
body #grid .cell .inner .sphere:after {
  --colorA: var(--colorB);
  --colorB: var(--colorC);
  border-radius: calc(var(--radius4) * 1px) calc(var(--radius3) * 1px) calc(var(--radius1) * 1px) calc(var(--radius2) * 1px);
  transform: translate(calc(50px + (var(--angle2) * -4%) * (var(--scale) * 0.25)), calc(50px + (var(--angle1) * -2%) * var(--scale2) * 0.25)) scale(calc(var(--scale) * 0.5));
}