流体シェイプを動かしたい。

こんにちは、ワタナベです。

今回は流体シェイプを動かす備忘録です。

ずっとやってみたかったやつです( • ̀ω•́ )✧

See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.

上記は画像をhtml上に直接記載してclip-pathでトリミングしていますが、CSSでマスクする方法もあるようです！
そちらの方が色々と融通が利きそうなので今度そっちも試してみたいと思います(๑‘ ‘๑)و

▼詳しい実装方法はコチラを参照！THANKS✨

 POINT OF VIEW　略して、ポイビュー。  4 users

SVGモーフィングで「流体シェイプ」をモフモフさせる – SWELLカスタマイズ -...

https://point-of-view.blog/swell-tips-svg-morphing-customize/

こんなSWELLユーザーに読んでほしい！ 流体シェイプを使ってデザインしている流体シェイプに動きを加えたいSVGモーフィングについて知りたい SVGモーフィングで流体シェイプをモフモフと動かしたい 最近、SVGアニメーションにハマっているヤ

▼シェイプの作成はこちら

 www.blobmaker.app  30 users

Blobmaker - Make organic SVG shapes for your next design

https://www.blobmaker.app

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time.

ややこしいですが、実際に触ってみるとなるほどこんな感じか～となりました。
流体シェイプをデザインで取り入れる機会があれば、こんな風に動かしてみるのはいかがでしょうか(∗ˊᵕ`∗)

それではまた次回。

ご閲覧ありがとうございました♪