SVG can do THAT?!
//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())
SVGコンテンツ制作に役立つ！ 流行りのSVGライブラリまとめ - ICS MEDIA
SVGはベクターグラフィックスの画像形式で、昨今のウェブサイトで幅広く使われています。ウェブサイトのアニメーションやインタラクションにもSVGを使えますが、その用途ではJavaScriptを使わなければなりません。 たとえば矩形を1つ描くだけでも標準のAPIでは10行近いコードの記述が必要になりますが、JSライブラリを利用するとほんの数行で実装可能です。手軽に導入できるだけでなく、JSライブラリを使うことで表現の自由度が上がったり、古いブラウザもサポートできる利点もあります。この記事では有用なSVGライブラリをいくつかピックアップし、それぞれの特徴を紹介します。 Snap.svg Snap.svgはAdobe Systems社が提供しているオープンソースのライブラリです。SVG DOMの操作や、アニメーション・モーフィング、マスキング・クリッピングといったさまざまな高度な機能を簡潔に提供し
Hero Patterns | Free repeatable SVG background patterns for your web projects
Hello! I’m Steve Schoger, a UI designer and illustrator from Kitchener, Ontario. I draw and maintain Hero Patterns. Hero Patterns will always be updating and will always be free. Follow me on Twitter and Dribbble to find out when new updates are available. Also, check out Zondicons: A set of free premium SVG icons for you to use on your digital products.
#SVG で スクラッチくじ を作ってみた - 職業プログラマの休日出勤
この記事は、SVG Advent Calendar 2016 の3日目の記事です。 SVG Advent Calendar には、このような記事も過去に投稿しています。 clip と transform との組み合わせ - 職業プログラマの休日出勤 手入力のSVGでクリスマスツリーを描こう☆ - 職業プログラマの休日出勤 マスター・オブ・円弧 #SVG - 職業プログラマの休日出勤 さて。 年末ということで、宝くじ や 占い、それに類するものに興味をお持ちの方も多いかと思います。私自身はそのようなものは好きではないのですが、くじ等を作る側（射幸心を煽る側）の人間として各種法令を遵守しながら立ち回ることは嫌いではありません。ここでは、くじを作る側の人間として、SVGでスクラッチくじを作る手法を紹介したいと思います。 まずは完成品のご紹介 さすがにブログ記事の中でJavaScriptを動作させ
VML - the Vector Markup Language
NOTE-VML-19980513 Vector Markup Language (VML) World Wide Web Consortium Note 13-May-1998 Submission to the World Wide Web Consortium This version: http://www.w3.org/TR/1998/NOTE-VML-19980513 Latest version: http://www.w3.org/TR/NOTE-VML Authors: Brian Mathews, Autodesk Inc. Daniel Lee, Hewlett-Packard Company Brian Dister, Macromedia, Inc. John Bowler, Microsoft Corporation Howard Cooperstein, Mi
Vector Markup Language - Wikipedia
Vector Markup Language （VML、ベクトルマークアップ言語） は、ベクター画像を描画するための XML 言語である。 VML は1998年に Microsoft, Macromedia, HP, Autodesk, Visio（英語版） の 5 社によって W3C に提出された。 その一方で Adobe や Sun など数社は、競合する仕様である PGML を提出した。[1] この 2 つの仕様は後に統合・改良され、その結果 SVG が生まれた。 VML は W3C標準にはならなかったものの、Internet Explorer 5.0 以降及び Microsoft Office 2000 以降の製品に実装されている。 Google マップや非ActiveX型電子国土Webシステムのβ2版では、Internet Explorer 5.5 以降のブラウザでベクトル画像を描
SVG 2 new features
Do not edit this page directly. Instead, see https://github.com/nikosandronikos/svg2-info I'd like to move this into a proper matrix where we can list implementer feedback and support, but for now here's a basic list of what is new in SVG 2. This list: Tries to describe new features and new behaviours Does not list features moved from one SVG spec to another (e.g. SVG Tiny 1.2 to SVG 2, SVG 1.1 to
A pocket-sized guide to using SVG icon sprites in web apps
There are many ways to handle icons — over the last few years we went through PNG sprite maps, icon fonts, and more recently, SVG embeds. Taking it one step further, let me show you a simple, yet powerful, vector-based technique. Start with exporting each of the icons using the same artboard size (e.g: 128x128):
Delivering Octicons with SVG
EngineeringDelivering Octicons with SVGGitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While the changes are mostly under-the-hood, you’ll immediately feel… GitHub.com no longer delivers its icons via icon font. Instead, we’ve replaced all the Octicons throughout our codebase with SVG alternatives. While
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
ゲームミュージックと生存確認をかねた画期的な
2018/05/02 サーバー側の証明書が正しく更新されました. 従って, 以降はこの作業を行う必要はありません. NOTE: wikiへの（引用なしでの）転載が確認されましたが, 問題はありません. 更新日付を見るにwikiの方が早かったようです(ほぼ同時期に全く同じ対処策が見つかった模様です). ※あなた, 自意識過剰よorz... なんか結局こちらの方が早いという結論だったそうで…（みなさんお疲れ様です） 当方何ら気にしておりませんので, ご安心を. なお, この操作を行うかどうかはあくまで自己責任でお願いいたします. (特に問題は出ていないようです) NOTE:4/25追記 通信エラー0が発生する場合もこの操作を行うことで問題が改善するかもしれません. (https://api.shiropro-re.net/にアクセスできなかった場合のエラー) FireFox60版はこちら --
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The best Icon Tool - Orion Icon Library
uiplease.com
xvg
Tumblr
SVG heat shimmer
GitHub - moarwick/react-mt-svg-lines: A React.js wrapper component to animate the line stroke in SVGs
SVG Porn
Building Better Interfaces with SVG
手動SVG組版機