現在、私はSVG FilterでGooeyエフェクトを再作成しようとしています。私は2つのサークルを持っていますが、効果はその2つのサークルに影響を与えたいのですが、この例では何が問題か分かりません。それで私を助けてください。ここに私のコードは次のとおりです。SVGでGooeyエフェクトを再生する
body {
filter: url('#goo')
}
.circle {
position: absolute;
width: 80px;
height: 80px;
background-color: #E63946;
border-radius: 50%;
}
.circle-1 {
left: 12%;
}
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<svg>
<defs>
<filter id="goo">
<feGuassianBlur in="SourceGraphic" stdDeviation="5" result="gaussianBlur"></feGuassianBlur>
<feColorMatrix in="gaussianBlur" type='matrix'
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 12 -6" result="color-matrix" />
<feBlend in="SourceGraphic" in2="color-matrix" />
</filter>
</defs>
</svg>
feGuassianBlurはタイプミス –