SVGでメッシュ変形

defghi1977

License: MIT License

Fork
0
Fav
0
View
332
  • Play

Fullscreen

Smart Phone

  • Readme
  • JavaScript 159 lines
  • HTML 18 lines
  • CSS 10 lines
よくあるメッシュ変形をSVGで行うとどうなるか?

元画像を三角形に分解(use要素とclipPath要素を使う)
ドットを移動する際にドットを囲む6三角形について
3点対応による変換行列を求めて変形する
  • SVGでメッシュ変形
  • SVGでメッシュ変形

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

defghi1977

Author

svgはいんすぴれーしょん http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo.htm 重箱の隅っこをつっついて,にんまり. ドキュメントにまとめて,にっこり.

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags