on:2017年4月12日sponsorsヘッダに配置されたハンバーガーメニュー。ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。サークル状のアイコンとヘッダの背景が同じホワイトで、どのようになっているのか分かりにくいと思うので、ヘッダの背景をグレーに変更してみました。実際の動作は、下記でお楽しみください。CodePen.実装HTMLちゅるんと分離する仕組みのポイントは、SVGのfilter要素です。これによりSVGにブラーエフェクトを与えています。in2="colormatrix"/></filter></defs></svg>CSSハンバーガーメニュー自体はSVGではなく、CSSで作られています。