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スプライトをnpm-scriptsで作ってみる - Photosynthesic blog
GWの中日、如何お過ごしでしょうか。仕事をしなきゃなんだけど、これっぽっちも気力が沸いてこない私はお勉強タイムに充てることにしました。 ターゲットはSVG。 ココの処ずっと、あーSVGに移行しなきゃなーと思いつつ、gulpか・・・という気持ちになって中々腰が上がらなかったのですが、gulpに出来ることがnpm-scriptsに出来ないはずが無いと思って調べてみました。 結果、凄い分かりやすいページを発見！これをいわゆるSVGスプライトと言っていいかは謎ですが。 Workflow for creating SVG sprites with NPM scripts – Oleg Varaksin – Medium で、ほぼまるっとコレを参照しつつ、パスとか書き出し方をコソコソ自分好みに変えただけなのですが色々学べたのでメモしておきます。 必要なパッケージ ejs … みんなの救世主、テンプレー
ロゴはSVGにして使いまわそう！簡単スマホ対応。｜ビリオンプランのスタッフブログ
せっかくのスマホサイト、高解像度デバイスで見たらロゴや見出し画像が粗くて残念。 なんてことはよくある話。というわけでロゴだけでもSVGでスマートフォン対応しましょう！ ロゴはSVGで使いまわそう。 サイト内で複数回の使用が想定されるロゴ画像は、いちいちサイズ別に画像を用意するのは面倒です。 ひとつベクターデータのSVGロゴを用意しておけば、使いまわせますし何より高解像度デバイスにも対応できます。 参考：各ブラウザの対応状況 http://caniuse.com/#search=SVG SVGとは？ SVG（エスブイジー）【 Scalable Vector Graphics 】とは、ベクター形式の画像フォーマット／画像記述言語です。ベクター形式なので、画像品質を維持したまま拡大縮小を行うことができます。そのため高品質なグラフィックでも、ファイルサイズが小さいのが特徴です。JPEGやPNGデー
Web 関連仕様 日本語訳
このページは、 Web プラットフォーム関連の様々な仕様の日本語訳の一覧と， それらの日本語訳に共通な事項についての説明です。 これらの翻訳の正確性は保証されません。 これらの仕様の公式な文書は英語版であり、 日本語訳は公式なものではありません。 誤訳が無いことは保証されません。 ［ 当の仕様の策定者たちが想定している／当の仕様に期待されている ］意味論を完全かつ正確に反映することは保証されません。 翻訳なので、 語彙レベルで原文と正確に一致する意味を表すことは決してありません。 日本語は自然言語なので、 誰がいつどこで読んでも同じ解釈になることは保証されません。 ）（ 実際に誤訳が見つかることも時折あります。 それらについては見つかり次第修正され， 加えて用語の対訳や言い回しなども時折修正されるので、 これらの翻訳が「完成」する日は永遠に来ません。 逆に原文仕様が誤っていることもあり、
SVGの見た目は「属性」で書く――HTMLとの違い
SVGはCSSよりも後に登場した仕様なので（SVG 1.0が2001年リリース、CSS 2が1998年リリース）、いくつかの属性は普段CSSでなじみのあるプロパティとまったく同じ名前になっています。また、それ以外の属性名についても、ハイフン「-」区切りとなっており、CSSプロパティ名の作法に則っています。SVGの属性名は、当時としてはモダンなルールで決められたわけですね。 それぞれの属性がどのような表示になるのか、簡単に見ていきましょう。 塗り色を指定する「fill属性」 fill属性は、塗り色を指定する属性です。値にはCSSでも使っている「色」を指定します。fill-opacity属性を併用すれば、塗り色の透明度も指定できます。 <body> <svg width="320" height="200" viewBox="0 0 320 200"> <circle cx="40" cy="
Mirage Festival - Art, Innovation et Cultures Numériques
Fin du Mirage Festival / End of the Mirage Festival english below Après 8 années passées à défendre l’innovation artistique et la création hybride et numérique, à défricher les artistes de demain et promouvoir ceux d’aujourd’hui, 8 années à faire rêver, à bousculer, à éveiller un public toujours plus nombreux, à créer des temps de partage et de réflexion sur nos sociétés hyper-technologiques et hy
Haru TP - さくらインターネット株式会社 | 日本デザインセンター
さくらインターネット株式会社のコーポレートフォント「Haru TP」のご紹介
SVG画像にRDFでメタ情報を記述する：CCライセンスや派生元作品など - 聴く耳を持たない(片方しか)
これはSVG Advent Calendar 2014の第23日目の参加記事です。昨日はしょん(id:syonx)さんの「SVGでキラキラをつくりたい（願望） - X X X」でした。キラキラとした3Dの球体をSVGで表現するコンテンツを構想中ということで、完成が楽しみですね。 はじめに私はこれまで昨年、一昨年とSVG関連のAdvent Calendarに参加してきて毎度ファイルサイズの削減・最適化をテーマにしていました。 SVG画像を1キロバイトでも削るダイエット術！ SVG画像を1バイトでも削るためのコードゴルフ SVG画像を書き出す際に重要な設定「小数点以下の桁数」とはなにか？ 不要な記述は減らしてファイルサイズを抑える、というのは閲覧者の環境や転送速度を考えると重要な手法ではありますが、その一方で必要な情報はきちんと残す、というのも大切なことです。特にSVGは単なる画像ファイルでは
POKER369 - IDN POKER, Situs Judi Poker Online, DominoQQ & Ceme
Mencari situs poker online nomor satu di indonesia tentunya hanya ada di IDNPLAY yang menjadi agen resmi idnpoker terpercaya sejak tahun 2010. Yang sudah berpengalaman dalam melayani dan membantu ratusan ribu member bettor poker. Tentunya segala kebutuhan dan kenyamanan member idn poker online menjadi prioritas utama kami selama 24jam penuh. Banyak pula aneka ragam jenis judi online lainnya yang b
LETTERS, INC.
We love Web Design & Technology. We are a small team, but we possess a highly skilled work force. Our goal is to produce great work with positive energy. Let’s enjoy creating together. Hello everyone! We are Letters Inc. Our Team is a company that designs interesting & unique websites. To tell the truth, we are starting to receive world wide attentions and we want more! Nice to meet you. We value:
リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました - #daiizメモ
閲覧しているウェブサイトの選択された範囲のスクリーンショットを撮ってSVG形式でダウンロードできるChrome拡張機能をつくりました．SVGで出力しているため，普通のPNGやJPGと比べると，以下のような少しだけ高度なことができます． スクリーンショットを撮ったページのURLを<svg>のdata属性として保持できる スクリーンショットの範囲内のリンクをそのまま残すことができる． ページ中の<a>の位置に，外部ページヘのリンクを持つ<rect>を挿入しています．クリックするとリンク先のページが開きます． ブラウザで通常リンクと同じように扱われるため，rectをホバーするとChromeの左下にジャンプしようとしているURLが表示されるので，移動先もしっかり確認できます． まだかなり荒いベータ版ですが，GitHubで公開しています．クローンして，そのままChromeの拡張機能管理ページから読み
)
Basic SVG animation (Windows)
This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. This topic covers basic SVG animation and is a prerequisite for Intermediate SVG Animation. Basic knowledge of HTML and JavaScript is assumed. To fully understand the material presented in this topic, plan to spend about one hour of study. Note In order
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
anime.js
SVG MANIAX Ver.2 - Mars vanilla
http://blog.e-riverstyle.com/2014/12/svg.html
JOHA
Tech Me Up ! : L'actualité high tech, informatique, technologies et sciences
SVGを使ってウェブページにかっこいいエフェクトを与えるチュートリアルのまとめ