〽️use要素の使い方。 〽️画像を準備。 〽️アニメーション実装 〽️マイナスの「遅れ」。 〽️いろんな要素でやってみよう。
>SVG、線を描くアニメーション。
〽️use要素の使い方。 〽️画像を準備。 〽️アニメーション実装 〽️マイナスの「遅れ」。 〽️いろんな要素でやってみよう。
Google純正の構成図作成ツールが登場したので早速使ってみた
クラウドサービスでは大量の機能が多種多様に提供されており、簡単なアプリでも複数のサービスを組み合わせて利用することも珍しくありません。そうしたバックグラウンドのサービスを設計する際に役立つのがサービス間の構造を図に落とし込んだ「アーキテクチャ図」です。これまでもサードパーティーからさまざまなアーキテクチャ図作成ツールが提供されてきましたが、2022年2月17日にGoogleが自社クラウド向けの公式アーキテクチャ図作成ツールをリリースしたので、早速使い勝手を試してみました。 Google Cloud Developer Cheat Sheet https://googlecloudcheatsheet.withgoogle.com/architecture Introducing a Google Cloud architecture diagramming tool | Google Cl
1964年東京オリンピックのロゴ設計図 ベクター素材で無料配布中
誰もが一度は目にしたことがある「I ♥ NY」のロゴの生みの親であり、グラフィックデザイン界の巨匠ミルトン・グレイザー（Milton Glaser）。 そんな彼が、「今までで一番好きなオリンピックロゴ」として選んだのが、1964年東京オリンピックのロゴでした。 亀倉雄策氏がデザインしたこのロゴは、黄金の5つの輪っかの上に、日本の国旗を表す赤い太陽が描かれ、定番フォント「ヘルベチカ」で「TOKYO 1964」と書いたシンプルなデザイン。 しかし、その裏では「これぞ職人技」と言える、緻密に計算されたデザイン設計図が存在したことはあまり知られていません。 Image Credit by uncoatedletters, via typophile) 28年のキャリアをもつベテランロゴデザイナー The Logo Smith は、自分のTumblrフィードにたまたま流れてきた、1964年東京オリン
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン MOONGIFT
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。 そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。 jquery.graphviz.svgの使い方 表示しました。 ノードをクリックすると、ハイライト表示されます。 さらにズームイン/アウトができます。 jquery.graphviz.svgはGraphvizのSVGデータに対して、ハイライトとズームイン、ズームアウトを追加します。さらにデータをレスポンシブにしてくれるので、どのデバイスに対しても適切な表示が可能です。 jquery.graphviz.svgはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT L
手書きのようなSVGアニメーションの作り方 -文字や図形を一筆書きのように線・ラインで描く
文字や図形、そしてイラストやロゴなどを一筆書きのように、線・ラインで描くSVGのアニメーションが驚くほど簡単に作成できるオンラインツールを紹介します。 下記のように一つずつ順番に描いたり、3つを同時に描いたり、タイミングをずらしたりもできます。 ※キャッチ画像なので、SVGアニメーションをGIFアニメにしたものです。 ラインで描くSVGのアニメーションをいくつか作成してみました。 まずは、SVGファイルを用意します。 シンプルな図形を描いたSVGのキャプチャ ※キャプチャなので、PNG画像です。 3つの図形を順番にラインのアニメーションで描いてみます。 イラストやモックアップをラインで描くアニメーションをよく見かけますね。
ImageMaps - Naver製。地図画像の編集ツール MOONGIFT
地図は地図のまま利用するのではなく、多くの場合その上にアイコンを載せたり線を描いたりします。そうすることで目的の場所を目立たせたり、駅などから目的地へ移動しやすくなるでしょう。 今回紹介するのはImageMaps、地図の上にアイコンなどを載せられるjQueryプラグインです。 ImageMapsの使い方 編集画面です。アイコンやテキスト、円や四角などが描けます。 こんな感じでアイコンを載せて大きさを変えたりしながら地図を編集していきます。 できあがった地図。これは画像ではなく、SVGとなっています。 ImageMapsの編集結果は読込専用のSVGとなっています。画像ではないので注意してください。日本語なども問題なく扱えますし、アイコンやドローを多彩にすると便利そうです。 ImageMapsはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。
円や多角形をランダムに配置する背景をSVGで作る
以前に「サークルがランダムに配置される背景をSVGで作る」というものを書きましたが、それを発展させて多角形も混ぜられるようにしてみました。 今回はブラーとかはありません。 多角形の座標算出は、こちらの記事を参考にしました。 HTML5 Canvas で Polygon(多角形)描画 | TM Life 対応しているのは Internet Explorer 9+, Firefox 4+, Chrome, Safari 5.1+, Opera 11.6+です。 Random Geometric Pattern Background with SVG 一応、コメントつきのも載せておきます。 (function () { /** * window がロードされたら実効 */ window.addEventListener('load', function () { geometricPattern
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
