明日から使えるD3.js
コードの説明 Line Chartを描くにはこんな感じです。 // marginの設定 var margin = {top: 20, right: 20, bottom: 30, left: 50}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // 日付の表示形式の設定 var parseDate = d3.time.format("%d-%b-%y").parse; コードの説明 // X軸、Y軸の設定 var x = d3.time.scale() .range([0, width]); var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .ori
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Creative SVG Letter Animations | Codrops
An experimental plugin for animating SVG letters using Segment. The idea is to animate the path strokes of an interesting display font in a creative way. Maybe you’ve seen some of those interesting text animations recently, like the one shown on the website of Control Films or in hover effects for image captions: letters disappear and appear in an artistic way, getting drawn along their lines. Whi
Animated Checkboxes and Radio Buttons with SVG | Codrops
By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected. Today we’d like to share some fancy “check” animations for checkboxes and radio buttons with you. The idea is to
WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画
皆さん、師走をいかがお過ごしですか？ 今回は前々から試してみたかったSVGについての記事です。 基本予備知識0から色々触ってみて、SVGはどんなことができるのかとSVGの面白いなーと思った点等をまとめてみました！「これからSVG試してみようかな？」と思ってる方(特にWEBデザイナーさん)の参考になれば幸いです。 それではどうぞー！！ SVGとは その前にSVGについて簡単な説明しておきます。 SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。 その始まりは1998年と意外に古いのですが、ブラウザ対応が追いついておらず、長い間陽の目を見ることがなかったかわいそうなやつです。 SVGのいいとこ SVGがJPEG等の画像と比べていいなーと思
SVGアニメーションでマスクした写真をぷるぷる動かす方法 ｜ Tips Note by TAM
ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・ という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。 このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。 今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。 完成デモ ＞＞ 素材を作成 まずはIllustratorでぐねぐねした枠(A)を書きます。 続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。 これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので 今回は4パターンの異なる枠(A〜D)を用意しました。 用意ができればそれらをSVG形式に保存して準備完了です！
A Guide For SVG Support In Email | CSS-Tricks
Total support: 60% SVG as Inline HTML In this test, we’re plucking the code for the SVG file right out of Illustrator and plopping it directly into the email’s HTML: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-227 241 225.3 224.1" style="enable-background:new -227 241 225.3 224.1;" xml:space="preserve"> <path class="dice-1" d="M-132,24
SVGでセクションの区切りを斜め線にする
SVGでセクションの区切りを斜め線にする セクションの区切りを斜め線とかにしてしてみると、ちょっと他と違う感がでるかもしれない! 斜め線はCSSで回転させたりする方法もありますが、ここではSVGを使用した方法をご紹介いたします。 投稿日2015年10月14日 更新日2015年10月14日 HTML HTMLは単純にsectionで並べるだけです。 HTML <section id="section1"> <div class="inner"> <h2>Section First</h2> </div> </section> <section id="section2"> <div class="inner"> <h2>Section Second</h2> </div> </section> <section id="section3"> <div class="inner"> <h2>S
Responsive Logo Composition With SVG
You appear to be offline, some content may be unavailable. Logos are an ideal use-case for SVG. Because they’re typically designed for reproduction and versatility, they’re almost always vector to begin with. SVG’s support of CSS and media queries means we can adapt brand imagery depending on the display size, a technique artfully documented by the likes of Andreas Bovens, Ilya Pukhalski, Sara Sou
SVGのオブジェクトごとにCSSで色を切り替える - わすれたあかんえ
デザインpsdを見ながらhtmlでコーディングするとき、たくさん画像を書き出しますよね。 たとえばpngのアイコンを作る場合、形が同じでも色が違えばpngファイルをたくさん書きださなければいけません。色だけ変えたものをひとつずつ、@2xサイズも用意してちまちまと……書き出して…… やってらんないっすよ！ せめて、形が同じなら使いまわしたい…… そう！SVGを使えば、同じオブジェクトを使ってCSSで色だけ変えたものを量産できるのです！ 「それだったらwebフォントでいいじゃん」と思われるかもしれませんが、webフォントはアイコンひとつにつき1色しか使えませんよね？SVGでやればアイコンひとつでも複数色使うことができます。 このSVGアイコンを使いまわして、 こんなかんじでカラフルなアイコンを量産しますよー！ ベクターでアイコンを作成 アイコン作るのがめんどくさい人はicomoonから適当なア
d3.jsが格好良すぎてやばい - 生存戦略型プログラミング
d3.jsとはなにか d3.jsとはData Driven Documentの略です。 データ可視化のためのjavascriptのライブラリです。簡単にデータをグラフ描画してくれたり、ちょっとしたアニメーションも作成することができます。 今回はd3.jsの簡単な使い方とか魅力とかを解説していきたいとおもいます。 準備 まずは、HTMLファイルを用意します。d3.jsを導入するには以下の行をbodyタグ内に挿入するだけで使うことができます。 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 使い方 d3.jsの操作は主に以下の手順で行います。 SVGを作成 要素を選択 その要素に対して、アニメーションをつけたりイベントをつけたりなどの操作をおこなう。 SVGとは d3.jsではSVGにグラフや図形を書いて
webdesign-dackel.com - このウェブサイトは販売用です！ - webdesign dackel リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
SVGで円グラフを描くシンプルな方法 | KSK-soft.com
SVGで円グラフを描くシンプルな方法を思いついたのでシェアしておく。既に先人がいるかもしれないが、そんなに頑張ってチェックしてはいない。 例えばCSSのanimationと組み合わせればこんなグラフが描ける See the Pen SVG PIE Chart with CSS animation by keisuke Takahashi (@ksksoft) on CodePen. ポイントは以下の通り。 svgのcircleで扇形を描く circleのfillはなく、太いstrokeで「塗り」に見せかける 扇形の角度は破線の長さで調整する jsは不要。 以上の説明だけではよくわからない人の為に、以下に順を追って解説する。 1.SVGで円を書く インラインsvgの円はcircleタグで書けます。 <svg viewBox="0 0 200 200"> <circle cx="100" cy
SVG Drawing Animation | Codrops
A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. SVG is finally becoming a more utilized and fun website component. It’s really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we’d like to share two experimental concepts with you that
SVG 1.1 仕様 （第２版） 日本語訳
SVG 1.1 仕様 （第２版） 日本語訳 この文書は、W3C が作成し、勧告として公開された "Scalable Vector Graphics (SVG) 1.1 (Second Edition)" を日本語に翻訳したものです。 この翻訳には翻訳上の誤りがあるかもしれませんし、正確性は保証されません。 SVG 1.1 仕様書の公式な文書は英語版であり、この日本語版は公式のものではありません。 この翻訳の原文 URL は： http://www.w3.org/TR/2010/WD-SVG11-20100622/ この翻訳は二次著作物にあたり、原著作権は原著作物に帰するものです。 用語の対訳表や語法その他、この日本語訳に特有の事情に関してはこの翻訳の読み方をご覧下さい。 SVG 1.1 仕様（第１版）の日本語訳, SVG Tiny と SVG Basic の日本語訳, SVG Tiny 1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SVGについてのメモ - totorajの開発日記
http://www.h2.dion.ne.jp/~defghi/svgMemo/svgMemo_01.htm
BucketList App: Getting the Data (part 1) | appendTo
http://2ndidea.com/svg/svg-path-drawing-animation-even-ie/
第26回リクリセミナー「天下分け目のベクター祭り SVGじゃ！ Illustratorを持てい！」
