webサイトのコーディングの技術的な質問

Question

web系に入りたくて企業のwebサイトを模写していたのですが、技術的な理解が追い付かないサイトがありました。
https://zizai.co.jp/
上記の企業サイトの、トップページにいる３体のアメーバのような不定形生物はどうやったらプログラムで書き表せるのでしょうか？
googleの検証ツールで調べても該当箇所が私では見つからず、
css,htmlではどうやっても表現できなさそうです。
恐らくjavascriptの深い理解が必要になってくるのだと思いますが、全て推測でしかありません。
それかwordpressかな？
しかし非常に面白い形なので出来れば理解したいです。

どのような言語を勉強し、どのようなプログラムの記述でアメーバが召喚できるか、
教えて頂ける方をお待ちしています。

Comments

[m.ts10806]

今後でけっこうなのですが、質問タイトルはなるべく質問内容に寄せた具体的な要件(起きている問題、実現したい機能の詳細、困っていることなどなるべく今後被らないもの)を記載してください。
詳しくは「質問するときのヒント」参照してください

Answer 1

html5で新しく追加になったcanvasという技術をjavascriptで制御しているのだと思われます
http://www.html5.jp/canvas/what.html

Comments

[TMaaaaaaaaaaaaa]

こんなものがあったのか
時間がある時に詳しく調べようと思います。
情報提供に感謝

[webStudy]

因みに今は殆ど気にしなくてもいいことですが補足です。
canvasという技術は比較的新しい物になりますので、かなり古いブラウザでは動きませんので注意です。
(例：インターネットエクスプローラー9など)

Answer 2

Three.jsをwebpackでビルドしてそうなので外部から調査は難しい。

ソース見ればNuxt.jsは分かる。
ChromeのデベロッパーツールのコンソールにTHREE.WebGLRendererが出てるのでThree.js。

webpack通してる時点で元のコードは分からないのでこれ以上は調べようがない。

Answer 3

こちらcanvasというもので作られているみたいです。
html5とjavascriptで作れるものですので、その二つを勉強されればできると思います。

http://www.html5.jp/canvas/
https://techacademy.jp/magazine/12576

Comments

[TMaaaaaaaaaaaaa]

やはりcanvasという物なんですね。
時間がある時に確認したいと思います。
ありがとうございました。

[fumito_94]

お役に立てて良かったです！
頑張ってください！