こういう背景ってどうやって作るんだろう？

以下のホームページに使われていた背景の動くバブルがいいな～と思いました。あと、フッターの波のような動きも。

https://fukurou-labo.co.jp/recruit/ https://fukurou-labo.co.jp/recruit/

「どうやってやってるのかな？」と、チャレンジしたくなり、方法を探したときにいろいろ見つけたのでメモ。

参考ページ

動くバブルみたいなやつはこれっぽい？

https://coco-factory.jp/ugokuweb/move02/5-3/ https://coco-factory.jp/ugokuweb/move02/5-3/

動く波はこれっぽい？

https://coco-factory.jp/ugokuweb/move02/5-13/ https://coco-factory.jp/ugokuweb/move02/5-13/

http://kachibito.net/css/simple-css-waves-with-svg http://kachibito.net/css/simple-css-waves-with-svg

静的ウェーブをオンラインで簡単に作れるサイト

https://www.shapedivider.app/ https://www.shapedivider.app/

その他

https://deshinon.com/2019/03/06/koseiteki-haikei-css/ https://deshinon.com/2019/03/06/koseiteki-haikei-css/

https://webdesignfacts.net/entry/css-background-animation/ https://webdesignfacts.net/entry/css-background-animation/

https://web-navigator.blog/background-anime/ https://web-navigator.blog/background-anime/

https://goworkship.com/magazine/blob-animated-backgrounds/ https://goworkship.com/magazine/blob-animated-backgrounds/

https://goworkship.com/magazine/liquid-effect-web/ https://goworkship.com/magazine/liquid-effect-web/

https://goworkship.com/magazine/glsl-shader-effect/ https://goworkship.com/magazine/glsl-shader-effect/

SVGアニメーション

https://b-risk.jp/blog/2017/06/svg-animation/ https://b-risk.jp/blog/2017/06/svg-animation/

CSSでマスクやアニメーションの参考

https://ics.media/entry/210701/ https://ics.media/entry/210701/

SVGのストライプなどのパターンを作るサイト

https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration https://www.webcreatorbox.com/webinfo/svg-icons-patterns-illustration

https://svg-pattern-maker.netlify.app/ https://svg-pattern-maker.netlify.app/

https://patterns.helloyes.dev/ https://patterns.helloyes.dev/