Layer Cake is a graphics framework for Svelte. It uses the measurements of your target div and your data extents to create scales that stay synced on layout changes. Use these scales to organize multiple, mostly-reusable Svelte components, whether they be SVG, HTML, Canvas or WebGL. Since they all share the same coordinate space, you can build your graphic one layer at a time. It can also be used
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
Sketch なり Illustrator なりで作成した SVG のアイコン群を、React のコンポーネントとして扱いたくなりました。アイコンの数が少なければ、SVG のコードを手動でコピペしてコンポーネント化すれば良さそうですが、3 個くらいからもう辛くなってきそうです。 SVG を外部ファイル化して読み込むことも考えましたが、CSS でのスタイル指定が面倒になることや、HTTP リクエスト数を抑えるという点を考慮すると、やはりコンポーネント化しておくのが無難な気がします。 ただ、そこへ労力を割くのは微妙な気がするので、ある程度自動でズバッと出来ないかなと試してみたら、react-svg-converterを使うことで簡単に実現出来たので、その工程についてメモです。 前提 上記の様なアイコンセット(SVG ファイル)を React コンポーネント(JSX)化したい 書き出されるコンポ
<svg width="395" height="274" viewBox="0 0 395 274" xmlns="http://www.w3.org/2000/svg"> <title> logo_after </title> <path d="M284.788 43.44c0 6.712 1.487 18.648 1.487 24.615 0 5.968 1.856 8.208-1.488 13.056-3.346 4.85-4.46 5.97 0 11.94s13.04 5.97 17.48 7.83c0 0-24.54-2.98-33.46 0-8.92 2.99-18.582 8.95-33.82 7.46-15.236-1.49-33.446-5.59-50.166-4.47s-40.13 5.97-58.34 20.14c-18.21 14.18-23.4 16.78-32
In modern browsers and under normal conditions, SVG icons and logos are fully responsive if five rules are followed during design & development: One: Design & build SVG icons & logos at the approximate pixel dimensions they will appear on-screen (~ 50 × 50px for icons, as needed for logos) Two: Ensure that your design tool is set up & used correctly. (Strokes in the middle of paths, exporting styl
12 JavaScript Libraries for SVG Animation by Julian Anderson March 28, 2016, 03:55 1.8k Views In this post i’ve collected 12 Javascript libraries for SVG animation that you can use to develop scalable vector animations with ease. So, what the best JavaScript libraries for make SVG animation? Let us look at few of the JavaScript libraries that are best in the business. See what works for you best.
<script type="text/javascript" src="//web.archive.org/web/20151204075254/https://cdn.rawgit.com/icons8/bower-webicon/v0.10.7/jquery-webicon.min.js"></script> Flat ColorWin10Font AwesomeFoundationMaterialGlyphiconsIcomoonIonWebhostinghubEntypoElusiveWPFMfglabsRaphaelSimple LineWeatherLsfLineconsMeteoconsMetrizeOcticonsIconicMakiOpenwebiconsStroke7TypiconsZocialBrandicoFontelicoStateface <!DOCTYPE h
Global settings Show original Compare gzipped Prettify markup Multipass Number precision Transform precision Features Remove doctype Remove XML instructions Remove comments Remove <metadata> Remove xmlns Remove editor data Clean up attribute whitespace Merge styles Inline styles Minify styles Style to attributes Clean up IDs Remove raster images Remove unused defs Round/rewrite numbers Round/rewri
東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します ロンドン地下鉄路線図での作図方法に基づいた東京の鉄道路線図を作ったので公開・配布します time2014/12/20 hatenabookmark- Illustratorを使って、東京圏の交通路線図を作りました。 現在、これを書きだしたSVGファイルを以下に置いて、ウェブ上から見られるようにしています。まだマップとして大した処理はしていないので、PCとかだとスクロールが面倒ですが、スマートフォンなどタッチ端末だとそこそこ見られると思います。 なお、AIファイル・SVGファイルはパブリックドメイン(CC0)としますので、配布・改変・販売含め、煮るなり焼くなり好きに使っていただいてかまいません。 railmaps - github どうして描いたの？ 昔からハリーベック氏のロンドン地下鉄路線図がとても好きで、自分もこういうも
SVGはそのリサイズ(スケーリング)においてブラウザ間で差異やバグがあります。有名なのはviewBoxがないことによるIE9やWebKitでのバグでしょうか。それでもimg要素等でSVGを使う場合はSVG側でwidthとheightそしてviewBox属性を指定し、CSSなどでリサイズすれば大体問題ありません。なので背景画像で使う場合もbackground-sizeプロパティーを使えば……と思いきや、なかなかの落とし穴がありました。 Demo: SVG Arrow WebKit以外では自動リサイズが期待されるviewBoxのみ指定したSVGを背景画像にすると問題なくキレイにリサイズされます。対してWebKitではリサイズされたりされなかったりです。しかもChromeとSafariでは挙動が少し違ったりもし、追求する気が失せるほど挙動不審です。どうも良きに計らってはくれそうにないので、明示的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
