マウススクロールで「SVGグラデーション」を動かそう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのドリルです。 今回はマウススクロールで、SVGグラデーションを動かすというアニメーションをご紹介します。 SVGについてもしご存知なければ、ぜひこちらの記事をご参照ください。 SVGグラデーションの配置 HTML 横200px、縦200pxの四角形を描画しています。 linearGradient要素のx1、y1はグラデーションの始点、x2、y2はグラデーションの終点です。この場合、四角形の左上から、右下にかけてグラデーションさせています。 色に関しては、始点は赤、終点は青に設定しています。 四角形の塗りは、g要素、fill属性の中に、linearGradient要素のidを記述することで、グラデーションが適応されます。 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"> <def
AstroChart - SVGによる占星術用チャート生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました チャートは実に多彩に存在します。ガントチャートや組織図のようなビジネス向きのものもあれば、地図や路線図と合わせるものなど様々です。何かの情報を分かりやすく伝えるためにはチャートによる可視化が有効です。 今回は特殊なチャートを描くAstroChartを紹介します。なんと占星術用のチャートを描くライブラリです。 AstroChartの使い方 例えばこんなチャートが描けます。 情報を付与できます。 線だけにすることもできます。 アニメーションだってできます。 占星術は占いサイトなどでも使われますし、ゲームで利用することもあるでしょう。画像を毎回作るのは大変ですが、AstroChartを使ってダイナミックに描いたり、アニメーションしたりすれば、インパクトも非常に強いチャートになることでしょ
SVGで作る非長方形なヘッダ画像いろいろ
Result インラインに書いたSVGを画像に重ねる 背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる css.card { width: 32%; max-width: 100%; margin: 0 0 4rem; background-color: #ddd; } .card .wrap-image { position: relative; } .card .wrap-image img { width: 100%; height: auto; } .card .wrap-image svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 30px; } .card .wrap-image svg polygon, .card .wrap-image svg path { fill: #d
Bowlcu - SVGテキストを自在に変化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。 今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。 Bowlcutの使い方 例です。人の顔の部分は画像です。JavaScriptで文字を動かしています。 こんな感じで曲線に沿った表示もできます。 ほとんどロゴのように使えます。 そしてパスをカスタマイズできます。 複数のエフェクトを組み合わせられます。 Bowlcutを使えば単なるテキストがあっと驚くくらい印象的になります。うまく使うためにはコツも必要そうですが、アニメーションGIFで作るよりも軽く、
logo.svg - テキストとフォントからSVGを生成 MOONGIFT
スマートフォンやタブレットによって高解像度なディスプレイが普及しています。そのため、画像などのバイナリのファイルは高解像度向けにサイズの大きなファイルを用意せざるを得ず、ネットワークの負荷増大につながっています。 そこで使ってみたいのがlogo.svgです。テキストベースの簡易的なロゴをSVGで生成してくれます。 logo.svgの使い方 logo.svgは例えば以下のようにコマンドを打ちます。 logo -Odo -l MOONGIFT ./logo/logo.svg 生成されたSVGです。 フォントを指定できます。 ドットで作られた形もあります。 SVGであれば画像の代わりに使うことで、解像度に合わせた最適な表示になってくれます。サイズも小さいのが利点です。きちんとしたロゴはIllustratorなどを使って作る必要がありそうですが、logo.svgでも最初は十分ではないでしょうか。
text2svg - 任意のフォント/テキストをSVG化 MOONGIFT
コピーされたくない文字があった時、これまでは画像化するのが一般的でした。しかしデバイスの解像度によっては汚く見えてしまったり、変更が面倒と言った欠点があります。 そこで使ってみたいのがtext2svgです。任意のフォント、テキストでSVGが生成できます。 text2svgの使い方 生成した例です。インスペクタで見ると、文字ではなくSVGなのが分かります。 text2svgなのでWebサイトに組み込むのは簡単ですし、フォントファイル自体は不要で綺麗な描画が実現できます。レスポンシブにも対応し、どんなデバイスであっても最適な表示が実現できるでしょう。text2svgは基本的にはコマンドラインで使いますが、Webサイトに組み込んでみるのも面白そうです。 text2svgはRuby製のオープンソース・ソフトウェア（MIT License）です。 ksss/text2svg: Make SVG da
Coördinator - SVGの描き方を自由にカスタマイズ MOONGIFT
SVGを使う面白さはベクターベースであるために一回描いた図形をカスタマイズしやすいということです。さらにカスタマイズするのもXMLを直に編集するのではなく、プログラムからできるのが利点です。 今回紹介するCoördinatorは音楽サービスで知られるSpotifyが開発したSVGカスタマイズツールです。 Coördinatorの使い方 例えばウサギのイラストです。ドットで表現されています。 ドットをカラフルなものに変えてみました。 こちらは別なSVG。 目を粗くしてみました。 ドットの大きさを変えて縮小。 さらにカラフルに。 Coördinatorを使うとドットの大きさや粗さ、色などを自由に変更できます。それによって描かれる図形も印象が変わってきます。できあがった作品は画像として出力したり、Coördinatorで使えるJSONやCSVとしてダウンロードできます。 Coördinatorは
テキストでネットワーク図を作ろう！nwdiag | DevelopersIO
nwdiagって何？ ブロック図生成ツール blockdiagシリーズの1つです。きれいな論理ネットワーク図を作成することができます！ 公式サイト(http://blockdiag.com/ja/nwdiag/introduction.html) 特徴 テキストベース 自動レイアウト SVG出力可能 インストール方法 Pythonで動き、Win・Mac・Linuxすべて対応しています。今回はMacでのインストール方法を紹介します。 Windowsの場合は事前にPythonのインストールを行ってください。2系、3系はお好みでどうぞ！ インストール 一行で簡単にインストール完了です。 pip install nwdiag サンプルコードを使って動作を確認します。 まず以下のファイルを作成してください。 sample001.nwdiag nwdiag { network dmz { addres
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
svgbob - アスキーアートをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました READMEなどテキストファイルには罫線を駆使したアスキーアートが載ることが多々あります。一度だけであれば良いのですが、メンテナンスもしづらいですし、見やすいものではありません。 しかし技術者としてはドローソフトウェアでいちいち描いたりするのも面倒です。そこで使ってみたいのがsvgbobです。 svgbobの使い方 一例です。左側のテキストがSVGに変換されています。 工夫すれば日本語も使えます。 こんな複雑なイラストも。 ____[] | ___ | || || device ||___|| loads | ooo |----------------------------------------------------------. | ooo | | | | | ooo |
zPath.js - SVGをアニメーションしながら描画 MOONGIFT
SVGの良いところはベクターベースのデータである点と、内容がXMLなのでプログラマブルに操作可能ということです。バイナリデータと異なり、一部だけを描画したり色を変えると言ったことも簡単にできます。 そこで使ってみたいのがzPath.jsです。SVGを読み込んでアニメーションしながら描画してくれます。 zPath.jsの使い方 一例。速度も制御できます。 描き方も変更できます。 zPath.jsを使えばロゴなどもアニメーションするように指定できます。これまでは動画やアニメーションGIFを使うしかありませんでしたが、zPath.jsを使うことでSVGを使う利点が生まれそうです。 zPath.jsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 zPath.js Demo Zet-Tools/zPath.js: A jquery plugin
Goat - アスキーアートをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました アスキーアートと画像は切り離せない関係にあります。面白い写真が誰かの手によってアスキーアート化されたり、逆にアスキーアートのキャラクターがイラスト化されたりします。それぞれに良さがあります。 今回はアスキーアートをSVGに展開するGoatを紹介します。テキストで作った作品が滑らかな直線、曲線で描かれるのは面白いです。 Goatの使い方 例です。こんな矢印があります。 ^ | < ---+---> | v Goatで変換するとこんな格好良いSVGになります。 こんな複雑な図形も描けます。 .----. .----. / \ / \ .-----+-----+-----. + +----+ +----. | | | | .-----+-----+-----+-----+ \ / \ /
SVG panzoom - SVGのズームイン/アウト機能を提供 MOONGIFT
Web上でSVGが多く使われるようになってきました。SVGの利点の一つに挙げられるのが、ベクターなので拡大しても綺麗ということです。拡大や縮小するというのは、情報の粒度を自分で変更したいという時に便利です。 そこで紹介したいのがSVG panzoomです。その名の通り、SVGのズームイン/アウトを実現するためのライブラリです。 SVG panzoomの使い方 サンプルです。多くの情報が散りばめられています。 拡大しました。マウスでできます。 逆にパンしました。これでも綺麗な線で描かれるのがSVGの良さですね。 実際の動きです。 実際の使用例です。書籍同士の関連度を可視化しています。 SVGはJavaScriptと組み合わせたインタラクティブなコンテンツを作るのに向いています。また、ベクターなので軽量であり、それでいて高解像度にも対応できるなどモバイルなどにも向いています。こうしたライブラリ
Yarrow - アニメーションする矢印をSVGで作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGコンテンツの面白いところとして、Flashのようなアニメーションもサポートしていると言うことです。コンテンツを徐々に描いていくようにすれば良いだけなのですが、手作業で実現するのは無理があるでしょう。 そこで使ってみたいのがYarrowです。HTMLのプレゼンなどと組み合わせると効果的かも知れません。 Yarrowの使い方 実際に動いているところです。後から線が引かれるのが分かります。 線の上に文字を載せることもできます。 ソースになるところから線が飛び出ると言った演出も。 セクションのボックスに向かって伸びていくアニメーション。 グラフのポイントへ向かって引かれるデモ。これはインパクトがありそうです。D3と組み合わせています。 グラフが画像で単に矢印が描かれているだけでは目を
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
flowchart.js - SVGのフローチャートを生成するJavaScriptライブラリ MOONGIFT
システムやワークフローを分かりやすく説明する際にフローチャートを使うことがあります。特に業務システムなど、多数のシステムが複雑に組み合わさって処理が実行される場合、きちんと可視化されているかどうかで結果が大きく変わる可能性があります。 Excelで仕様書を書いているとExcel上で完結しそうです。しかしこれでは検索性やメンテナンス性がよくありません。そこで仕様書をMarkdownやHTMLで書いているならばflowchart.jsを使ってみましょう。 flowchart.jsの使い方 flowchart.jsのデモです。専用の記述方法に沿って書くことで、右側のようなフローチャートが生成されます。URLがあるところはクリッカブルになっています。 さらにカラーリングの指定もできたり、縦ではなく横に広がっていく形にもできます。 flowchart.jsはSVGで生成しているのがポイントで、元文書
アイコンを探す手間がなくなる！30種類の有名どこ全9,769個のSVGアイコンを一元管理・一行で簡単に利用できる -We Love SVG
Flat Color 使い方は、簡単です。 Step 1: 外部ファイル 外部ファイルにjquery.jsを使用している場合は、下記の外部スクリプトを加えます。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> AngularJSバージョンも用意されています。 <script type="text/javascript" src="//cdn.rawgit.com/icons8/bower-webicon/v0.10.7/angular-webicon.min.js"></script> Step 2: HTML あとは、使用するアイコンのコードを書くだけです。 アイコンをクリックするとコードが表示されるので、そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
閲覧ページのSVG画像をワンクリックで抽出するGoogle Chrome拡張機能「svg-grabber」／新規タブでプレビュー。個別にコピー・保存したり、まとめてダウンロードすることも【レビュー】
Illustratorライクに使えるフリーのSVGグラフィックエディタ・「Boxy SVG」
SVGで世界地図を作成する為のスクリプト・「World Map Generator」
