2014/04/21
背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」
最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しくカラフルなトライアングルメッシュ画像もよく見ますよね。
今回ご紹介するのは、そんな美しいトライアングルメッシュ画像をSVGとして自由に作成できて、デモではダウンロードもできてしまうjsライブラリーです。
何らかのご参考になれば幸いです。
なお、当方SVGについては勉強中の身ですので、誤った記述があるかもしれません。
その際には、優しくご叱咤のうえ、ご指摘くださいますようお願いいたします。
美しくカラフルなトライアングルメッシュ画像をSVGとして自由に作成できるjsライブラリー「Trianglify」

「Trianglify」は美しくカラフルなトライアングルメッシュ画像をSVGとして自由に作成できるjsライブラリーです。
このライブラリーが素晴らしいのは、カラーやノイズ、セルサイズ、セル間隔も自由に変更可能だということ。
デモ画面で作成したSVGはダウンロードすることも可能です。
これなら、ダウンロードしてSVG画像を読み込んでしまうという方法も可能です。
Trianglifyを利用する方法
実際に、Trianglifyを背景画像で利用するには、trianglify · GitHubで、ファイル一式をダウンロードします。
続いて、bodyタグの直前で、以下の2つのライブラリーを読み込みます。
|
1 2 |
<script src="https://d3js.org/d3.v3.min.js"></script> <script src="trianglify.js"></script> |
なお、D3.jsは、Mike Bostock(mbostock)が作成したデータを可視できるJavaScriptライブラリです。
いろんな表現が可能になる人気のライブラリです。
続いて、著者のGitHubページにあるスクリプトをbodyタグの直前に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="https://d3js.org/d3.v3.min.js"></script> <script src="trianglify.js"></script> <script> var t = new Trianglify(); var pattern = t.generate(2000, 1500); // svg width, height pattern.svg // SVG DOM Node object pattern.svgString // String representation of the svg element pattern.base64 // Base64 representation of the svg element pattern.dataUri // data-uri string pattern.dataUrl // data-uri string wrapped in url() for use in css pattern.append() // append pattern to <body>. Useful for testing. </script> |
すると以下の様な形で表示されます。

オプションを利用する場合には、new Trianglify({cellsize: 80,bleed: 10,cellpadding: 1….});と記述するようです。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script src="https://d3js.org/d3.v3.min.js"></script> <script src="trianglify.js"></script> <script> var t = new Trianglify({cellsize: 80,bleed: 10,cellpadding: 1....}); var pattern = t.generate(2000, 1500); // svg width, height pattern.svg // SVG DOM Node object pattern.svgString // String representation of the svg element pattern.base64 // Base64 representation of the svg element pattern.dataUri // data-uri string pattern.dataUrl // data-uri string wrapped in url() for use in css pattern.append() // append pattern to <body>. Useful for testing. </script> |
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
WordPressにベストな格安レンタルサーバーはこれです!
WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr
-
-
100GB使える無料ストレージサービスshared.comにマルウエアが仕込まれてた!?
各方面で紹介されている太っ腹な無料ストレージサービス「Shared」を利用し始めたところ、えらい目に
-
-
Gmailを無料で便利に!「開封確認」「スケジュール送信」ができる機能拡張「myHero Toolbox」
Gmailを利用しています。 本当に便利なGmailですが、できるなら「既読通知/開封確認」「スケ
-
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない
-
-
レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」
レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ
-
-
レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」
Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは
-
-
CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」
最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし
-
-
WEBデベロッパーのためのおすすめYouTubeチャンネル15選
WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS
-
-
HTML5ビデオにも対応できる無料動画変換ツール/コンバーター10
HTML5ビデオを利用したサイトも見かけるようになってきました。 今後はHTML5ビデオを利用する
-
-
背景画像をフルスクリーン&レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
