html - 使用 SVG 玩 Gooey 效果

Question

我目前正在尝试使用 SVG 过滤器重新创建 Gooey 效果。我有 2 个圆圈，我希望效果影响那 2 个圆圈，但我无法弄清楚此示例中的问题所在。请帮助我。这是我的代码:

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>  

Answer 1

https://jsfiddle.net/359h9m5m/1/

你打错了，是feGaussianBlur，不是feGuassianBlur