See the Pen Goo loader by Quentin Hocdé (@quentinhocde) on CodePen.

CODEPENで素敵なローディングアニメーションを発見しました。もともと@CreativedashさんがDribbbleで発案し、@QuentinHocdeさんがHTML上で実現させたようです。くるくる回る円が同士が、まるで水滴のように引っ付いては離れ、引っ付いては離れるアニメーション。円同士が引っ付く瞬間があまりにも滑らかで、今にも「ぷるるん」という音が聞こえてきそうな動きです。
アニメーションにjsを利用するので使い所は難しいですが、いつか使ってみたいアニメーションだなと思いました。

動きの肝はfilter:blur効果

どうやってこのような動きを再現しているか、気になって少し調べてみました。
てっきりjsで動かしていると思っていたのですが、jsが処理しているのは、円をぐるっと一周動かす動きと、円の大きさを変更する動きのみでした。あのぷるるんした効果は、CSSで実装されており、filter:blurでぼかした円が同士が重なる時に、ぼかしが重なった部分がくっきり見える事を利用しています。ただし、そのままではあまりにもぼやけ過ぎ見えるため、最後にfilter:contrastで、くっきりされていました。

filter:blur同士を重ねてつくる動きは、下記サイトが詳しく説明しています。
https://css-tricks.com/shape-blobbing-css/

こんな使い方があったんですね。

CSSを勉強する本