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

SVGとHTMLを使って簡潔に、マテリアルデザイン風の時計やカレンダーを作成しましょう。 簡単なSVGで書いているので、ぜひSVGの参考に見てみてください。 もうわかってるという人は、一番下のソースコードリンクからどうぞ。 完成図： 製作フロー 時計部分のSVGパーツ 秒針パーツ(id:secondHand) 分針パーツ(id:minuteHand) 時針パーツ(id:hourHand) 時間の目盛りパーツ(id:hourScale) 時計本体パーツ(id:clock) カレンダー部分のSVGパーツ 週のラベルパーツ(id:calendarWeek) 日付パーツ(id:calendarDay) カレンダー本体パーツ(id:calendar) SVGパーツの呼び出しと位置調整 現在時刻を適用させるスクリプト 時計部分のSVGパーツ 秒針パーツ(id:secondHand) 秒針のパーツは高さ

OH: “People end up making graphics with CSS [instead of SVG], because for many use cases, it offers them more flexibility. Which is absurd.” — fantasai (@fantasai) January 31, 2015

Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. These graphics can consist of paths, images, and/or text that are able to be scaled and resized without losing image quality. Inline SVG refers to the embedded code written within HTML to generate these graphics in a browser, which will be the focus of this book. There are many advantages to using SVG this

Patatap is a portable animation and sound kit. With the touch of a finger create melodies charged with moving shapes. Warning: contains flashing images.

ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素

I tryed create full svg web site, that report.Read less

Why would you even need to generate SVG on the server? The technology is entirely client-side, so what would motivate anyone to move it from there? When we talk about “generating SVG” nowadays, we mean “generating SVG with JavaScript.” The current state of browser support and libraries makes the creation of complex visuals a trivial task. There are a lot to choose from! So the right question is, h

もはや、フォントは「画像形式」のひとつです。アイコンやロゴをWebで表示するならば、シンボルフォント(アイコンフォント)を自作するのが一番。 前半で、シンボルフォントを取り巻く現状を、後半で実際の制作方法を紹介します。 ※このスライドは、2014年5月15日のCSS Niteで話した内容です。 http://cssnite.jp/afterdark/cpi/vol10/Read less

Scalable Vector Graphics (SVG) exists in a quantum state of accessibility. Which is to say that SVG is both accessible and inaccessible at the same time. Happily, there is no SVG uncertainty principle. We know which aspects of SVG are accessible to whom, which are not, and what we can do to improve both. SVG 1.0 was released by the W3C in 2001. SVG 1.1 came along in 2003, and SVG 1.1 2nd edition i