Делайте эффект слизи только тогда, когда он находится в контакте с основной формой

Question

Я использую это как предварительный загрузчик, и он работает довольно хорошо, но я бы хотел, чтобы эффект "слизи" возникал только тогда, когда движущиеся фигуры фактически соприкасались с кругом в середине.Посмотрите, как теперь все края размыты.

Мне нравится, что движущиеся фигуры размывается прямо, когда они соприкасаются с кругом, но когда они находятся на максимальном расстоянии от него, они должныбыть на 100% нормальным.То, как форма должна выглядеть, когда не соприкасается со средним кругом:

Вы можете попробовать закомментировать часть url("#goo"), чтобы увидетьнормальное состояние.

.page-preloader-cover {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #fff;
}

.cssload-dots {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	margin: auto;
	filter: url("#goo");
	-o-filter: url("#goo");
	-ms-filter: url("#goo");
	-webkit-filter: url("#goo");
	-moz-filter: url("#goo");
}

.svg-filter {
	position: absolute;
}

.cssload-dot {
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%);
	-ms-transform: translate(-50%);
	transform: translate(-50%);
}

.cssload-dot:before {
	content: "";
	width: 48px;
	height: 48px;
	border-radius: 69px;
	background: #9664B4;
	position: absolute;
	left: 50%;
	transform: translateY(0);
	-o-transform: translateY(0);
	-ms-transform: translateY(0);
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	margin-left: -24.5px;
	margin-top: -24.5px;
}

.cssload-dot:nth-child(5):before {
	z-index: 100;
	width: 62.5px;
	height: 62.5px;
	margin-left: -31.75px;
	margin-top: -31.75px;
	animation: cssload-dot-colors 4.6s ease infinite;
	-o-animation: cssload-dot-colors 4.6s ease infinite;
	-ms-animation: cssload-dot-colors 4.6s ease infinite;
	-webkit-animation: cssload-dot-colors 4.6s ease infinite;
	-moz-animation: cssload-dot-colors 4.6s ease infinite;
}


.cssload-dot:nth-child(1) {
	animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-o-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-ms-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-webkit-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
	-moz-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;
}
.cssload-dot:nth-child(1):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 0s ease infinite;
	-o-animation: cssload-dot-move 4.6s 0s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 0s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 0s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 0s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%2355AF32;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

.cssload-dot:nth-child(2) {
	animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-o-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-ms-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-webkit-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
	-moz-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;
}
.cssload-dot:nth-child(2):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-o-animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 1.15s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 1.15s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%23ff4a49;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

.cssload-dot:nth-child(3) {
	animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-o-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-ms-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-webkit-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
	-moz-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;
}
.cssload-dot:nth-child(3):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-o-animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 2.3s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 2.3s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%230A4B9B;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

.cssload-dot:nth-child(4) {
	animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-o-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-ms-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-webkit-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
	-moz-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;
}
.cssload-dot:nth-child(4):before {
	background-color: transparent;
	animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-o-animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-ms-animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-webkit-animation: cssload-dot-move 4.6s 3.45s ease infinite;
	-moz-animation: cssload-dot-move 4.6s 3.45s ease infinite;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 150 150" xmlns="http://www.w3.org/2000/svg"><path style="fill:%239664B4;" d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"></path></svg>') !important;
}

@keyframes cssload-dot-move {
	0% {
		transform: translateY(0);
	}
	18%, 22% {
		transform: translateY(-96px);
	}
	40%, 100% {
		transform: translateY(0);
	}
}

@-o-keyframes cssload-dot-move {
	0% {
		-o-transform: translateY(0);
	}
	18%, 22% {
		-o-transform: translateY(-96px);
	}
	40%, 100% {
		-o-transform: translateY(0);
	}
}

@-ms-keyframes cssload-dot-move {
	0% {
		-ms-transform: translateY(0);
	}
	18%, 22% {
		-ms-transform: translateY(-96px);
	}
	40%, 100% {
		-ms-transform: translateY(0);
	}
}

@-webkit-keyframes cssload-dot-move {
	0% {
		-webkit-transform: translateY(0);
	}
	18%, 22% {
		-webkit-transform: translateY(-96px);
	}
	40%, 100% {
		-webkit-transform: translateY(0);
	}
}

@-moz-keyframes cssload-dot-move {
	0% {
		-moz-transform: translateY(0);
	}
	18%, 22% {
		-moz-transform: translateY(-96px);
	}
	40%, 100% {
		-moz-transform: translateY(0);
	}
}

@keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4; /*#7a6cea*/
	}
	25% {
		background-color: #55AF32; /*#2be1df*/
	}
	50% {
		background-color: #E61423; /*#ff4a4a*/
	}
	75% {
		background-color: #0A4B9B; /*#3b55e6*/
	}
	100% {
		background-color: #9664B4;
	}
}

@-o-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@-ms-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@-webkit-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@-moz-keyframes cssload-dot-colors {
	0% {
		background-color: #9664B4;
	}
	25% {
		background-color: #55AF32;
	}
	50% {
		background-color: #ff4a49;
	}
	75% {
		background-color: #0A4B9B;
	}
	100% {
		background-color: #9664B4;
	}
}

@keyframes cssload-dot-rotate-1 {
	0% {
		transform: rotate(-105deg);
	}
	100% {
		transform: rotate(270deg);
	}
}

@-o-keyframes cssload-dot-rotate-1 {
	0% {
		-o-transform: rotate(-105deg);
	}
	100% {
		-o-transform: rotate(270deg);
	}
}

@-ms-keyframes cssload-dot-rotate-1 {
	0% {
		-ms-transform: rotate(-105deg);
	}
	100% {
		-ms-transform: rotate(270deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-1 {
	0% {
		-webkit-transform: rotate(-105deg);
	}
	100% {
		-webkit-transform: rotate(270deg);
	}
}

@-moz-keyframes cssload-dot-rotate-1 {
	0% {
		-moz-transform: rotate(-105deg);
	}
	100% {
		-moz-transform: rotate(270deg);
	}
}

@keyframes cssload-dot-rotate-2 {
	0% {
		transform: rotate(165deg);
	}
	100% {
		transform: rotate(540deg);
	}
}

@-o-keyframes cssload-dot-rotate-2 {
	0% {
		-o-transform: rotate(165deg);
	}
	100% {
		-o-transform: rotate(540deg);
	}
}

@-ms-keyframes cssload-dot-rotate-2 {
	0% {
		-ms-transform: rotate(165deg);
	}
	100% {
		-ms-transform: rotate(540deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-2 {
	0% {
		-webkit-transform: rotate(165deg);
	}
	100% {
		-webkit-transform: rotate(540deg);
	}
}

@-moz-keyframes cssload-dot-rotate-2 {
	0% {
		-moz-transform: rotate(165deg);
	}
	100% {
		-moz-transform: rotate(540deg);
	}
}

@keyframes cssload-dot-rotate-3 {
	0% {
		transform: rotate(435deg);
	}
	100% {
		transform: rotate(810deg);
	}
}

@-o-keyframes cssload-dot-rotate-3 {
	0% {
		-o-transform: rotate(435deg);
	}
	100% {
		-o-transform: rotate(810deg);
	}
}

@-ms-keyframes cssload-dot-rotate-3 {
	0% {
		-ms-transform: rotate(435deg);
	}
	100% {
		-ms-transform: rotate(810deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-3 {
	0% {
		-webkit-transform: rotate(435deg);
	}
	100% {
		-webkit-transform: rotate(810deg);
	}
}

@-moz-keyframes cssload-dot-rotate-3 {
	0% {
		-moz-transform: rotate(435deg);
	}
	100% {
		-moz-transform: rotate(810deg);
	}
}

@keyframes cssload-dot-rotate-4 {
	0% {
		transform: rotate(705deg);
	}
	100% {
		transform: rotate(1080deg);
	}
}

@-o-keyframes cssload-dot-rotate-4 {
	0% {
		-o-transform: rotate(705deg);
	}
	100% {
		-o-transform: rotate(1080deg);
	}
}

@-ms-keyframes cssload-dot-rotate-4 {
	0% {
		-ms-transform: rotate(705deg);
	}
	100% {
		-ms-transform: rotate(1080deg);
	}
}

@-webkit-keyframes cssload-dot-rotate-4 {
	0% {
		-webkit-transform: rotate(705deg);
	}
	100% {
		-webkit-transform: rotate(1080deg);
	}
}

@-moz-keyframes cssload-dot-rotate-4 {
	0% {
		-moz-transform: rotate(705deg);
	}
	100% {
		-moz-transform: rotate(1080deg);
	}
}

<div class="page-preloader-cover">
					<div class="cssload-dots">
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
						<div class="cssload-dot"></div>
					</div>

					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="svg-filter">
						<defs>
							<filter id="goo">
								<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12"></feGaussianBlur>
								<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0	0 1 0 0 0	0 0 1 0 0	0 0 0 18 -7" result="goo" ></feColorMatrix>
							</filter>
						</defs>
					</svg>
			</div>

Answer 1

Вот ваш загрузчик, преобразованный в формат SVG.

Соответствующая часть, относящаяся к размытию блоба, находится здесь:

<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12">
  <animate attributeName="stdDeviation"
           keyTimes="0; 0.5; 0.9; 1.0"
           values="12; 0; 0; 12"
           dur="1.15s" repeatCount="indefinite"/>
</feGaussianBlur>

Что происходит, так это то, что размытие уменьшается до 0 и обратно до 12снова каждые 1,15 с, чтобы совпадать с движением фигур.За этот интервал 1,15 с stdDeviation увеличивается:

• с 12 в (0 * 1,15 с) на 0 в (0,5 * 1,15 с), затем
• от 0 в (0,9 * 1,15 с) до 12 в (1 * 1,15 с)

IOW, значения keyTimes представляют проценты от этой продолжительности анимации 1,15 с.При желании вы можете настроить эти значения keyTimes, чтобы настроить время анимации размытия.

.page-preloader-cover {
  position: fixed;
  z-index: 1200;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.page-preloader-cover svg {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: visible;
}

<div class="page-preloader-cover">

  <svg viewBox="0 0 200 200">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12">
          <animate attributeName="stdDeviation"
                   keyTimes="0; 0.5; 0.9; 1.0"
                   values="12; 2; 2; 12"
                   dur="1.15s" repeatCount="indefinite"/>
        </feGaussianBlur>
        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0	0 1 0 0 0	0 0 1 0 0	0 0 0 18 -7" result="goo" ></feColorMatrix>
      </filter>
      
      <symbol id="shape" viewBox="0 0 150 150">
        <path d="M 120 0 L 120 100 A 50 50 0 1 1 20 100 Z"/>
      </symbol>
    </defs>

    <g transform="translate(100,100)" filter="url(#goo)">
      <animate attributeName="filter"
               keyTimes="0; 0.4; 0.9; 1.0"
               values="url(#goo); none; none; url(#goo)"
               dur="1.15s" repeatCount="indefinite"/>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#55AF32">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="-105" to="270"
                          dur="4.6s" repeatCount="indefinite"/>
      </g>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#ff4a49">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite" begin="1.15s"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="165" to="540"
                          dur="4.6s" repeatCount="indefinite" begin="1.15s"/>
      </g>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#0A4B9B">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite" begin="2.3s"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="435" to="810"
                          dur="4.6s" repeatCount="indefinite" begin="2.35s"/>
      </g>
      <g>
        <use x="-24" y="-24" width="48" height="48" xlink:href="#shape" fill="#9664B4">
          <animate attributeName="y" dur="4.6s" repeatCount="indefinite" begin="3.45s"
                   calcMode="spline"
                   keySplines="0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0; 0.25 0.1 0.25 1.0"
                   keyTimes="0; 0.18; 0.22; 0.4; 1.0"
                   values="-24; -120; -120; -24; -24"/>
        </use>
        <animateTransform attributeName="transform"
                          type="rotate" from="705" to="1080"
                          dur="4.6s" repeatCount="indefinite" begin="3.45s"/>
      </g>

      <circle cx="0" cy="0" r="31.25" fill="#9664B4">
      	<animate attributeName="fill" dur="4.6s" repeatCount="indefinite"
                 keyTimes="0; 0.25; 0.5; 0.75; 1"
                 values="#9664B4; #55AF32; #E61423; #0A4B9B; #9664B4"/>
      </circle>
    </g>
  </svg>

</div>