SVGアニメーションでマスクした写真をぷるぷる動かす方法 ｜ Tips Note by TAM
ちょっと凝った動きをつけたいけど、Canvasでガリガリ書くのはちょっと・・ という方に是非お勧めしたいのがSVGアニメーション！ SVGはXMLをベースとした2次元ベクターイメージなので拡大縮小が自由というのも魅力の一つ。 このTipsNoteのロゴで弊社のキャラクターTAMくんが動いているのもSVGアニメーションによるものです。 今回はそんなSVGで、マスクした画像のフチをぷるぷる動かすサンプルを作ってみたいと思います。 完成デモ ＞＞ 素材を作成 まずはIllustratorでぐねぐねした枠(A)を書きます。 続いて(A)を複製し、パスの数は変えずに枠の凹み具合などを変えた(B)を作成します。 これだけでも枠を動かすことは可能ですが、2つだけだと動きが単調になってしまうので 今回は4パターンの異なる枠(A〜D)を用意しました。 用意ができればそれらをSVG形式に保存して準備完了です！
Raphaël—JavaScript Library
What is it? Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create i
FakeSmile
A JavaScript library that allows you to animate web content SMIL is a specification defining a set of elements that control animations. This is called declarative animations. FakeSmile is a SMIL implementation written in ECMAScript. What people call a polyfill. It is primarily targeted to SVG animations. While some browsers already support animations (Opera, Firefox, Safari and Chrome), others don
asamuzaK.jp : IEのインラインSVGの固有サイズ表示をSVG1.1仕様に修正する方法
この記事はSVG Advent Calendar 2014 - Adventarの11日目の参加記事です。 実は、この記事のきっかけとなったのも、SVG Advent Calendarに投稿されていた@_tanshioさんの「IEにも対応したレスポンシブSVGの作り方」という記事でした。 記事を読んだとき、直感的に「IEの問題というよりもSVGやCSSの記述方法に問題がありそう」という印象を持ち、簡単にテストしてみてツイッターでつぶやいたら、ご本人からリプライがあっていろいろやりとりをしていました。 この記事は、その一連のやりとりをまとめなおしたものです。 ただ、自分の思い込みなどから見当違いなツイートがアレやコレやとあったりもしたので、この記事は、その一連のやりとりにおける自分の発言に対する訂正の意味合いも兼ねていますw インラインSVGでIEがFirefoxやChromeと表示が異なる
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を使いこなすための便利ツールいろいろ
2015年1月28日 SVG, 便利ツール SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術。高解像度ディスプレイでもくっきりはっきり表示できるので、近年海外サイトを中心に見かける機会が増えてきました。SVGについてはWebクリエイターボックスでも何度か取り上げてきたので、耳にしたことのある方も多いかと思います。今回はそんなSVGを使いこなすための便利なオンラインツールやJavaScriptなどを紹介します。SVGってなんぞや？という方は、過去記事「アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう」をご覧ください！ ↑私が10年以上利用している会計ソフト！ ラスター画像をSVGに変換 Vector Magic Vector MagicはJPEG、GIF、PNG形式の画像をベクター画像に変換し、EPS
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
blobanimation.com
Simple Icons
Webサイトでよく使うアイテムが揃ってる！美しくデザインされたSVGの超軽量アイコン素材 -Evil Icons