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
iPhone Xには「Super Retina HDディスプレイ」が搭載されており、今後のスマートフォンの主流が「超高画素」になることは間違いないでしょう。 これらのディスプレイでJPEGやGIF画像を見ると画像が荒れて見えることがありますが、その対処法としての画像が劣化しないSVGの使用の拡大は、Webデザイン界では急務となっています。 ベクターデータは、単に静止画像で活用されるだけでなく、アニメーションでの利用もしやすいのが特徴です。しかし、SVGなどをそのままアニメーションに利用するのは難しいので、モーションライブラリと呼ばれるアニメーション用ライブラリを導入するのが手っ取り早いでしょう。このようなライブラリを使えば、JavaScript側で、関数などを使ってアニメーションを実装できるようになるからです。 今回は、滑らかな動きを実現するJavaScriptモーションライブラリ11選を
SVGはドロー系描画機能として今後、ますます高画素化の進むディスプレイに対するリソースの肥大化問題の解決策として注目が集まっていくでしょう。PNGやJPEG画像ではキャンバスサイズが大きくなるにつれてファイルサイズが肥大化しますが、SVGはベクターデータなのでファイルサイズは変わりません。 しかしSVGの魅力は静的な表示を行うだけに限りません。JavaScriptで内容を変えたり、動かしたりできます。今回はそうしたSVGアニメーションを助ける各種ライブラリを紹介します。 flubber 特定の形から別な形へ自然にモーフィングできるライブラリです。一つから一つの場合、一つから複数（またはその逆）とアニメーションが可能です。 veltman/flubber: Tools for smoother shape animations. Shape Shifter 二つのSVGファイルを指定して、ア
狼将棋（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を使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し
d3.annotationLabel A centered label annotation Code below is ready to use with these setttings
物理演算とは物体の運動を物理法則に基づき数値計算することです。Web業界ではゲームやビジュアル表現の分野で利用されています。アクションゲームを例にすると、キャラクターが地面に立つ、ジャンプする、重力落下する、壁とぶつかる、坂道を滑り落ちる、といったことが物理演算の実装範囲になります。 本記事ではGoogleが提供するJavaScriptライブラリ「LiquidFun」を題材にHTML5で利用可能な物理演算シミュレーションの表現を紹介します。 ▲「LiquidFun」の公式サイトではドキュメントやデモが掲載されている 物理演算ライブラリ「LiquidFun.js」とは LiquidFunは2次元の物理演算ライブラリの定番「Box2D」をベースとした拡張ライブラリです。Box2Dが提供する基本的な物理演算機能をはじめ、LiquidFunによるプラスアルファの機能が提供されています。 重力 （B
続編と、コード自体ではなく、何をすればいいかを書きましたAmazonに見るi18n -「国際化対応」とは何を変える事か Webサイトを多言語化する 最近多言語化に関する仕事をしている関係でi18n(l10n)用のライブラリを色々と見たので、 i18nライブラリによくある使い方を紹介します。 とは言ってもほとんどのライブラリは同じような書き方をするのでJavaScriptを例にします。 ライブラリ一覧 書き方の紹介として使用するものはawasome-javascriptにあるものと、他に気になったものを選びました。 ただし、この記事の目的は「書き方」を紹介するもので「ライブラリ」を紹介するものではありません。 動くことは確認しましたがどのくらいまともに動くかはチェックしていないのでご注意ください。 Polyglot Airbnbが公開するシンプルなライブラリ i18next 色々な環境やフレ
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
現場で使えるアニメーション系JSライブラリまとめ GSAP, Anime.js, Motion, Tween.js, WebAnimationなど ウェブサイトのインタラクションやUIの演出など、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、Canvas、SVGなどJavaScriptを用いる場合は、CSS Transitionでは対応できず、アニメーションライブラリが必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころです。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブラリ6種類 メジャーなJavaScriptライブラ
Highchartsとは Javascriptで動作する可視化ライブラリです。 下記のような機能/特徴があります。 ピュアJavaScript プラグイン不要、2つのJSファイルだけで動作 多彩なチャートタイプ 折れ線グラフ スプライン曲線 面グラフ エリアスプライン 横棒グラフ 縦棒グラフ 散布図 OHLC ローソク足 エリアレンジ エリアスプラインレンジ レンジセレクタ 時系列データを素早く表示 時間範囲の選択 1か月、1年、日付指定 時間範囲のチャートをズーム ツールチップ・ラベル データ系列やポイントに関する情報をツールチップ・テキストで表示 マウスをグラフの上に動かすと、ツールチップが表示 エクスポートと印刷 ボタンをクリックして指定のフォーマットでエクスポート PNG、JPG、PDF、SVG ウェブ・ページから直接チャートを印刷 非常に高機能ですが、商用は有償となります。 なぜ
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
Bun- gee!Fonts for vertical and multicolor typographyText: Horizontal VerticalPreset color themesColors Base Inline Outline Shade Banner BackgroundBackground shapes Alternates Alternate A, M, N, W, X, Y Round E Simplified I Simplified L Alternate ampersand Small apostropheSave/SharePermalinkDownload SVGDownload PNGDownload PDFView codeStackingVertical signs in Oakland, San Francisco, and Los Angel
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
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![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%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fwebkul.github.io%2Fvivid%2Fassets%2Fres%2Fvivid-cover.png)
