UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考記事『SVGで始めるマイクロインタラクション入門』）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、HTMLコーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、具体的な実装方法について紹介します。 【コーダー向け】CSSでSVGアニメーションを実現する方法 HTMLコーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコ
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
React、Redux、D3を用いたアニメーション | POSTD
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか？ 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
SVG Fallback with PNG Images - Call Me Nick
In the following snippets, I take a look at implementing an SVG fallback with PNG images in four different ways, enabling you to achieve cross browser support for using SVG. If you’re not using SVG in your projects now, you should. SVG is awesome, and it’s a great way to minimise and simplify your image sprites, particularly when it comes to things like icons. If you have any vector graphics saved
vivus.js - svg animation
vivus, bringing your SVGs to life Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like. View on GitHub Delayed Every path element is drawn at the same time with a small
SVGにはどのようにしてスクリプトが混入するのか
SVGが他の画像形式と一線を画している点として，javascript等によるスクリプトを挿入することが出来ることが挙げられます．この特徴により特別なツールを必要とせずにダイナミックに内容を書き換えることが出来るのがウリの一つです．しかしスクリプトが全て善意から成り立っているとは限らず，ウィルス等の良からぬ内容が含まれている可能性を否定できません． ではSVGに対するスクリプトの混入有無を確認するにはどうすればよいのでしょうか? ※少し追記 ※10/10追記 補足はアンチパターンとして紹介していますから，そのようなものだと勘違いしないでくださいね． SVGにおけるスクリプトの記述場所 SVGではjavascript等によるスクリプトの実行をサポートしており，この仕組みによりアニメーションなどの動的なグラフィックを表現することが可能です． この時，SVGにおけるスクリプトは主に次の4箇所で定義
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
データビジュアライゼーション・ツール20選 – lab.sugimototatsuo.com
この記事はThe top 20 data visualisation toolsの原著者許諾済みの日本語訳です。 By Brian Suda on September 17, 2012 Translated by Tatsuo Sugimoto 2014年4月28日更新：オリジナル記事が以前のサイトから移転したため発生していた画像の非表示に対応しました。 わたしがもっともよくきかれる質問のひとつが、データビジュアライゼーションを始める方法についてです。このブログの先へ進むには、練習し、さらに実践し、利用できるツールを理解する必要があります。この記事では、シンプルなチャートから複雑なグラフ、地図、インフォグラフィックスまで、ビジュアライゼーションを作成するための20種類のツールを紹介しようとおもいます。ほとんどのツールは無料で利用でき、そのうちいくつかはすでにインストール済みかもしれません。
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
Fabric.js Javascript Library
Fabric.js is a powerful and simple Javascript HTML5 canvas library Fabric provides interactive object model on top of canvas element Fabric also provide serialization and has SVG-to-canvas (and canvas-to-SVG) parser Fabric.js Features Text editing On-canvas text editing with rich styling, IME and curve support
[Fabric.js]SVGをcanvasに転写する
Fabric.jsは、canvasを操作するためのJavascriptライブラリです。 同様のライブラリは多数ありますがFabricの特徴は、内部にSVGパーサーを持ちsvgからcanvasへのインポートおよびcanvasからsvgへのエクスポートを行う機能があります。 //canvas要素の取得 var canvas = new fabric.Canvas('canvas'); canvas.setWidth(300); canvas.setHeight(300); //SVG要素取得 var SVGstring = document.getElementById('wrapSVG').innerHTML; //SVGをcanvasへ転写 fabric.loadSVGFromString(SVGstring , function(objects, options) { options.t
![[Fabric.js]SVGをcanvasに転写する](https://cdn-ak-scissors.b.st-hatena.com/image/square/7b610dbe2b49cf97138c9e2db34b09c179330f37/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2013%2F06%2Ffablic.jpg)
Morris.js
Morris.js Making good-looking graphs shouldn't be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy. Morris.js started life as the code that powered the graphs on howmanyleft.co.uk. Now it's been open-sourced for the whole world to extend and enjoy. Follow me at @olly_smith on Twitter for news and updates. If you'd like to contribute, hea
Raphael.jsを勉強したいのでいろんなサイトまとめ | バシャログ。
ちょうど金環日食の時だけ曇り空だったminamiです。皆さんはちゃんと見られましたか？ Webサイトでベクターデータを扱うのにとっても強力なRaphael.jsというライブラリがあります。何年か前からあるのですが、なぜか最近興味が出てきたので勉強できるサイトを調べました。 Rapahel.jsはJavaScript用のグラフィックライブラリで、比較的簡単な記述でSVGで扱うことができます。SVG非対応のIEの場合はVMLで表示してくれるのがミソで、IE6であっても同じ見た目を確保することができます！また、マウスイベントに関連付けたアニメーションも作ることができます。 ライブラリ自体は多少容量が重いのですが、他のライブラリに依存していないのでこれ単体で済んでしまうというのも強みではないでしょうか。ちょっといじっただけで値によって変化するグラフなんかも描くことができます。 棒グラフのサンプル
Flash変換ライブラリ「Lightning」を公開しました | Geisha Tokyo Engineers' Blog
Engineer blog from Geisha Tokyo Entertainment, Inc. 芸者東京の山内です。 弊社にて開発したPythonベースFlash変換ライブラリ「Lightning」をオープンソースで公開しました。 lightning (github) ライセンスはThe MIT Licenseです。 このライブラリは弊社アプリ「おみせやさん」のiPhone版で店やアバターを表現するのに使っています。 Flashで作成したswfファイルを、LightningによってiPhone用のWeb素材に変換します。 Lightningのすごい所 1. 高い再現率 SVGによるベクターグラフィックスと、CSS3-keyframeAnimationを組み合わせて利用し、再現率の高いアニメーションを実現しています。 swfとほぼ同等の見た目が再現できます。 2. 滑らか
A JavaScript-based SoundCloud player using amCharts – amCharts Version 3 Documentation
Skip to content ×
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - lmgonzalves/path-slider: Animating Elements Along SVG Paths with Javascript
SVG等を手書き風に描画することができる「Rough.js」:phpspot開発日誌
satofuのブログ: JavascriptでSVGにtext要素を追加する方法
レガシーブラウザでSVGを表示できるSIE 9 を公開しました - プラグインレスでSVGを表示する「SIE」開発ブログ
