こいつ、動くぞ！ UIデザインでよく使用されるSVG完備のアイコン素材、しかもオープンソースで商用無料 -Potlab Icons
アイコンをクリックして、コードをコピペ アイコンのライセンスはCC 4.0のオープンソース、商用プロジェクトでも無料で利用でき、改変、再配布もOKです。 以下にアニメーションで動くSVGアイコンをいくつか、コピペしてみました。 SVGなので、サイズは簡単に変更できます。 「Send」アイコン <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> <style> .send { animation: send 2s cubic-bezier(1, -0.47, 0.01, 1.37) infinite both; } @keyframes send { 0% { transform: translateY(0) translateX(0); } 100%
JS+SVGで液晶画面風の表示をつくる | tech - 氾濫原
液晶風の画面は決まった形をオン・オフするだけなので、canvas にコードで描くのは大変なだけで無駄が多い。かといってセグメントを1つ1つ画像にわけて座標指定で配置していくのも面倒くさい。 と考えていくと SVG を埋めこんで、SVG の要素を JS で操作するのが効率が良い。ワークフローとしては SVG の作成と JS の実装で綺麗に境界を作ることができる。 Inkscape Inkscape の良いところは以下の点 XML エディタが UI と連動している レイヤーやオブジェクトを選択すると該当箇所にエディタ上で跳べる 構造をコントロールしやすい 画像を編集するというより SVG の XML を編集するUIというイメージ Inkscape でオブジェクトに名前をつけると、svg 上では inkscape:label 属性に入る。これを利用して JS から操作すれば Inkscape で
商用利用無料、UIデザイン用のSVGアイコンが1000種類以上！ 改変・再配布も可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザインに適した、シンプルなデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 アイコンは小さいサイズでもくっきり見えるようにデザインされており、SVGだけでなく、Webフォントも揃っています。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 アイコンのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute IconはWebサイトやスマホアプリのUI用にシンプルにデザインされた高品質なアイコンです。24x24のグリッドで設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストローク、SVG、PNG、およびWebフォントがサポートされています。 ライセンスはApache License 2.0で、商用
GitHub - LingDong-/psvg: Programmable Scalable Vector Graphics -- drawings that draw themselves
Doc | Playground | Examples | NPM PSVG is an extension of the SVG (Scalable Vector Graphics) format that introduces programming language features like functions, control flows, and variables -- Instead of writing a program that draws a picture, write a picture that draws itself! PSVG is compliant with XML and HTML specs, so it can be easily embedded in a webpage or edited with an XML editor. This
SVGBox | API for Web Icons
API for Web Icons Including icons is harder than it should be. SVGBox allows you to add icons to your project by using simple tags. The idea behind the service is that including icons should be as simple as copy and paste. It's free and icons are delivered over Cloudflare CDN, the same technology that powers CDNJs's 190B+ monthly requests . Explore Iconsets
岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
DIV ⇒ SVG 移行して気付いたこと - ジンジャー研究室
マップ閲覧・編集システムで画面上に DIV で描いていた図形を SVG に移行した。内部に数百のオブジェクトを含む要素の動作が重く、ドラッグしたときにカクカクになる問題を解決したかった。ちなみに Virtual DOM は使っているがすでに最適化は済んでおり、毎回描画されるような事態はあらかじめ避けている。代替案として Canvas と迷ったが CreateJS のようなライブラリを使わないとイベントハンドリングがきついので、 SVG で行けるならそれが一番。以下、移行した結果と移行中に気付いたことのまとめ。 描画パフォーマンスが上がった（Firefox: 20fps ⇒ 60fps、Chrome: 50fps ⇒ 60fps）。 Chrome の DevTools で見ると、DIV 版は UpdateLayout と Paint に時間がかかっているが、 SVG は Layout に時間
macSVG - macOS用のSVGエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGがいくらテキストベースだといっても、手入力で作成しようと考える人はまずいないでしょう。専用のドローソフトウェアがなかったらとても作ることはできません。かといってその手のソフトウェアは効果なのが常です。 そこで使ってみたいのがmacSVGです。GUIで簡単にSVGコンテンツが作成できます。 macSVGの使い方 新規作成画面です。 エディタの画面です。文字を書いたり、色を変更したり、シェイプを追加したりできます。レイヤーもサポートされているので通常のドローソフトウェアを使った事があればすぐに使いこなせるでしょう。 生成されたSVGです。 macSVGはタイムラインベースのアニメーション作成もサポートされています。macSVGを使えばSVGコンテンツの作成がとても簡単にできるでし
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
物理サーバを選定する際のポイント – Eureka Engineering – Medium
Eureka EngineeringLearn about Eureka’s engineering efforts, product developments and more.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Boxicons : Premium web friendly icons for free
GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.
GitHub - bytedance/IconPark: 🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
GitHub - alexjlockwood/ShapeShifter: SVG icon animation tool for Android, iOS, and the web
svgwrite 1.4.3 documentation — svgwrite 1.4.3 documentation
Ascii to SVG
Gradient color in a treemap for D3
Lake Whistleman - pure SVG filter topo