【JavaScript】ちょっと歪んだ四角形【実験】

　どうも！LSSです！！

今回は思いつきで、ちょっとした小ネタ。

「JavaScriptからSVGタグを書き出して、約300ピクセルの四角形を1～10ピクセルランダムにずらした頂点で描いてみる」というのをやってみます。

ちょっと歪んだ四角形

再描画

「再描画」ボタンを押すと、また少し違う四角形になります。

連打して遊ぶと、うごうごアニメみたいになりますｗ

揺れ・歪みの魅力について書いておられるのを読んで、思いついた実験ですｗ

四角形の４つの頂点の座標が１０ピクセル幅でランダムに決まるので、歪んだ四角形が描画されます。

「きちっとした四角形」に比べ、どこか愛着のある四角形になるかも知れませんね^^

…とは言えSVG。

ブログ記事とかに使用するには少々使いづらく、やるとしたら、
「CSSで微妙にtransformによる変形」
を施した枠、なんてのを用意すべきなのかも。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^