個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」

写真/画像に3DCGポリゴン風エフェクトをかけてくれる無料/フリージェネレーター5つ

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

美しくカラフルなトライアングルメッシュ画像をSVGとして自由に作成できるjsライブラリー「Trianglify」

Trianglify
Trianglify」は美しくカラフルなトライアングルメッシュ画像をSVGとして自由に作成できるjsライブラリーです。
このライブラリーが素晴らしいのは、カラーやノイズ、セルサイズ、セル間隔も自由に変更可能だということ。
デモ画面で作成したSVGはダウンロードすることも可能です。
これなら、ダウンロードしてSVG画像を読み込んでしまうという方法も可能です。

Trianglify Demo

Trianglifyを利用する方法

実際に、Trianglifyを背景画像で利用するには、trianglify · GitHubで、ファイル一式をダウンロードします。
続いて、bodyタグの直前で、以下の2つのライブラリーを読み込みます。

なお、D3.jsは、Mike Bostock(mbostock)が作成したデータを可視できるJavaScriptライブラリです。
いろんな表現が可能になる人気のライブラリです。

続いて、著者のGitHubページにあるスクリプトをbodyタグの直前に記述します。

すると以下の様な形で表示されます。

Trianglify01

オプションを利用する場合には、new Trianglify({cellsize: 80,bleed: 10,cellpadding: 1….});と記述するようです。

Trianglify

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 2

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

CSSグラデーションは手軽に実装できるし、メンテナンスも簡単だし、とっても便利ですよね。 ただ、自

記事を読む

見ている人を魅了するcodrops作成のマウスオーバーエフェクト21

ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21

CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ

記事を読む

CCSだけで見出しに自動で連番を記入する方法

当ブログでは「◯◯100」といった感じの記事をよく書かせていただいています。 こうしたとき、以前ま

記事を読む

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表27

コンバージョン率アップ!デザインに優れた無料のHTML+CSSプライステーブル/価格表25

海外サイトなどではよく目にするプライステーブル/価格表。 この価格表は、いうまでもなく、コンバージ

記事を読む

コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

CSSの手入力が不要になる便利なCSSジェネレーター「ENJOY CSS」

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

2014年登場のCSSツール・サービスはこれを!2014ベストCSSツール・サービス50

2014年登場のCSSツール・サービスはこれ!2014ベストCSSツール・サービス50

2014年に登場したCSS関係のツール、サービスをご紹介します。 CSS3の登場で、CSS関連のツ

記事を読む

Chromeのタブをクリックするだけで音声を消す方法

Chromeのタブをクリックするだけで音声を消す方法

Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの

記事を読む

無料のファイル転送ツールの決定版?容量無制限・件数無制限・ハイスピードの「Infinit」

ファイルを転送するとき、どんなツールを利用していますか? DropBoxやFireStorageな

記事を読む