Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo
SVGにも対応！滑らかな動きを実現するモーションライブラリ11選
iPhone Xには「Super Retina HDディスプレイ」が搭載されており、今後のスマートフォンの主流が「超高画素」になることは間違いないでしょう。 これらのディスプレイでJPEGやGIF画像を見ると画像が荒れて見えることがありますが、その対処法としての画像が劣化しないSVGの使用の拡大は、Webデザイン界では急務となっています。 ベクターデータは、単に静止画像で活用されるだけでなく、アニメーションでの利用もしやすいのが特徴です。しかし、SVGなどをそのままアニメーションに利用するのは難しいので、モーションライブラリと呼ばれるアニメーション用ライブラリを導入するのが手っ取り早いでしょう。このようなライブラリを使えば、JavaScript側で、関数などを使ってアニメーションを実装できるようになるからです。 今回は、滑らかな動きを実現するJavaScriptモーションライブラリ11選を
SVGをアニメーションするライブラリまとめ
SVGはドロー系描画機能として今後、ますます高画素化の進むディスプレイに対するリソースの肥大化問題の解決策として注目が集まっていくでしょう。PNGやJPEG画像ではキャンバスサイズが大きくなるにつれてファイルサイズが肥大化しますが、SVGはベクターデータなのでファイルサイズは変わりません。 しかしSVGの魅力は静的な表示を行うだけに限りません。JavaScriptで内容を変えたり、動かしたりできます。今回はそうしたSVGアニメーションを助ける各種ライブラリを紹介します。 flubber 特定の形から別な形へ自然にモーフィングできるライブラリです。一つから一つの場合、一つから複数（またはその逆）とアニメーションが可能です。 veltman/flubber: Tools for smoother shape animations. Shape Shifter 二つのSVGファイルを指定して、ア
狼将棋さんによるSVG形式のきれいな局面図を将棋ブログに導入する方法 - コンピュータ将棋研究Blog
狼将棋（http://ookami-shogi.blog.jp/） のmaasaさんが作成されたSVG形式のきれいな局面図のスクリプトがmaasaさんのご厚意により一般公開されました。 今回はその局面図のブログへの導入方法を紹介します。 SVG局面図導入のメリット 狼将棋さんのsvg将棋盤のすぐれている点 ・SVG形式なのでどんなに拡大しても表示が粗くならない ・白黒を基調としたデザインがシンプルで見やすい ・成駒が正確に表示される（成銀、成香、成桂） ・bod形式の局面図をコピーすることができる— suimon (@floodgate_fan) 2017年7月16日 ※7/14時点での導入方法の記事です。 今後この記事もスクリプトのアップデート等に伴い、加筆・修正をします。 ※はてなブログでの導入方法の記事ですが他のブログサービスでも応用できると思います。 １、http://www.ge
SVGコンテンツ制作に役立つ！ 流行りのSVGライブラリまとめ - ICS MEDIA
SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し
d3-annotation
d3.annotationLabel A centered label annotation Code below is ready to use with these setttings
Rough.js
Create graphics with a hand-drawn, sketchy, appearance Rough.js is a small (<9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths. Rough.js works with both Canvas and SVG. Install Install from npm: npm install --save roughjs And use it in
Jupyter notebookでHighcharts - Qiita
Highchartsとは Javascriptで動作する可視化ライブラリです。 下記のような機能/特徴があります。 ピュアJavaScript プラグイン不要、2つのJSファイルだけで動作 多彩なチャートタイプ 折れ線グラフ スプライン曲線 面グラフ エリアスプライン 横棒グラフ 縦棒グラフ 散布図 OHLC ローソク足 エリアレンジ エリアスプラインレンジ レンジセレクタ 時系列データを素早く表示 時間範囲の選択 1か月、1年、日付指定 時間範囲のチャートをズーム ツールチップ・ラベル データ系列やポイントに関する情報をツールチップ・テキストで表示 マウスをグラフの上に動かすと、ツールチップが表示 エクスポートと印刷 ボタンをクリックして指定のフォーマットでエクスポート PNG、JPG、PDF、SVG ウェブ・ページから直接チャートを印刷 非常に高機能ですが、商用は有償となります。 なぜ
SVG Charting Libraries - The Media Temple Blog
There is no shortage of options with charting libraries on the web. That’s good! Competition is good for consumers. It keeps the quality high. That’s certainly true here. The landscape of charting libraries is pretty impressive, ranging from the good-and-free to the excellent-and-paid. We’re limiting the options presented here specifically to SVG charts. I think SVG is an excellent way to go for c
SnapFoo - SVG Animation Library
Getting Started Download SnapFoo and include it in your project after jQuery and Snap.svg. Once included, call the library for use by passing in the SVG container ID: var snapfoo = snapFoo("#theSVGContainer"); Animate The primary animation call that receives an element or group of elements to animate based on the FramesObj object. Any element that is animated that does not have an ID is appended t
jQuery DrawSVG
FEATURES This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Weights less than 2KB minified and 800 bytes gzipped. Easy to use. Easing and stagger support. Free! Tweet USAGE Include jQuery DrawSVG after jQuery <script src="http://code.jquery.com/jquery-latest.min.j
Rune.js Documentation
Rune.js Rune.js is a JavaScript library for programming graphic design systems with SVG in both the browser or node.js. It features a chainable drawing API, an unobtrusive scene graph, and a range of features aimed specifically at graphic designers: native support for color conversion, grid systems, typography, pixel iteration, as well as an expanding set of computational geometry helpers. Oh, and
Textures.js
SVG patterns for Data Visualization Textures are useful for the selective perception of different categories View on Github Getting started -- from the top of d3.js -- var svg = d3.select("#example") .append("svg"); var t = textures.lines() .thicker(); svg.call(t); svg.append("circle") .attr("r", radius) .style("fill", t.url()); Lines
deSVG
deSVG Remove inline SVG bloat from your HTML document. Style SVGs with CSS. SVGs still accessible without JavaScript. What does it do? deSVG takes the <img /> tags you supply. It then grabs, using AJAX, the raw SVG you've set in the "src" attribute and replaces that <img /> with the <svg /> it downloads. Include the JavaScript file on your page <script src="path/to/desvg.js"></script> Kick off deS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Free Open Source SVG Icons Set Pack and Library [100+ Icons] - Vivid.js![Free Open Source SVG Icons Set Pack and Library [100+ Icons] - Vivid.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e585746ef177cb897ca6e7387b43f40d9ecd59f/height=288;version=1;width=512/https%3A%2F%2Fwebkul.github.io%2Fvivid%2Fassets%2Fres%2Fvivid-cover.png)
サービス終了のお知らせ
GitHub - veltman/flubber: Tools for smoother shape animations.
GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas
Loading...
GitHub - jonathantneal/svg4everybody: Use external SVG spritemaps today
