Free, open-source loaders and spinners for your next project. Built with HTML, CSS & SVG, and powered by web components, for maximum compatibility.
LDRS — UI Ball
Free, open-source loaders and spinners for your next project. Built with HTML, CSS & SVG, and powered by web components, for maximum compatibility.
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
Cacoo開発チームの木村（@cohhei）です。Cacooでは図形の描画にScalable Vector Graphics（以下、SVG）を採用しています。本記事では、CacooのサーバーサイドにおけるSVGの生成手法の刷新と、それによって得られた図のエクスポート機能のパフォーマンス向上についてご説明します。 要約 サーバーサイドでのSVGの生成方法を変更しました。 結果として、SVGエクスポートが約4倍速くなりました。 PDFエクスポートもその恩恵を受けて早くなりました。 図の内容に依存しますが、1シートあたり1.5〜2倍ほど高速化しました。 技術的にはHeadless Chromeからjsdomを使ったSVG生成に切り替えました。 クライアントサイドのTypeScriptのコードをNode.jsで実行させています。 SVG？エクスポート？生成？とは？ SVGとはXMLをベースとした2
追記情報 v0.5.0で.vueの拡張子もサポートするようになりました。 はじめに 現在のJavaScriptはexport、importによるモジュールの切り離しと結合が可能であるため。大きなプロジェクトに成長させることができます。 実装が進むにつれてファイル間の依存が複雑になっていき、実装全体の依存関係を把握するのが難しくなっていきます。これはプロジェクトに対して新しいメンバーが増えたときに、コードリーディングの時間を十分に取る必要があります。また、OSSのライブラリに貢献したいときも同様の状況が生まれるでしょう。特に後者は開発メンバーが近くにいるとも限らず、他国の方である可能性も十分に高いため開発に参加するための準備が必要になります。 このような、全体の依存関係の設計を見直したい場合や、新たに開発に参画する場合により短時間に理解を深めるためのツールを作成したので紹介します。 @cod
viewBoxcircleellipserectlinepolylinepolygonpathfill & stroketransformgdefsusesymbolclipPathmaskpatternlinearGradientradialGradientfiltermarkertexttspan viewBoxviewBox is an important attribute set on the <svg> element. It defines the coordinate system for the entire SVG. The value for viewBox is a set of 4 space-separated values: x-min, y-min, width and height. In the majority of the cases, x-min
Radix Icons
React componentsAll icons are available as individual React components. Install Radix Icons from npm:
GitHub - google/forma: An efficient vector-graphics renderer
A (thoroughly) parallelized experimental Rust vector-graphics renderer with both a software (CPU) and hardware (GPU) back-end having the following goals, in this order: Portability; supporting Fuchsia, Linux, macOS, Windows, Android & iOS. Performance; making use of compute-focused pipeline that is highly parallelized both at the instruction-level and the thread-level. Simplicity; implementing an
Fluenticons
Fluent Icons Open source icons by Microsoft. Viewer by Colton Griffith NOT AFFILIATED WITH MICROSOFT, IN ANY WAY
Asanaのダッシュボード内のバーンアップチャートに予測線と完了日をプロットするChrome拡張 - hitode909の日記
Asanaのダッシュボードに置けるバーンアップチャートには今後の予測を表示する機能がなく、過去の実績だけが表示されている。 Asanaのバーンアプチャートの例一方、よくあるバーンアップチャートはこんな感じで、予測線が引かれていて、タスクがこれだけあって、タスクの完了ペースはこうなってて、このペースが続けばいつ終わりそうです、という予測ができるようになっている。 差し込みの多いプロダクト開発のスケジュールの精度を上げるためにはバーンアップチャートがおすすめです - スタディサプリ Product Team Blog タスク管理にはAsanaを使いながら、いつ終わるかも予測したい。 既存手法 社内ではいくつかのアプローチが試みられていた。 タスク一覧をCSVをエクスポートして、Google Sheetsにインポートしてバーンアップチャートを構築する 最初に試みられた手法がこれで、更新するたびに
ベクター画像編集ソフトウェア「Inkscape」開発チームは5月4日、「Inkscape 1.0」を公開した。macOS版でネイティブGUIに対応し、ユーザーインターフェイスも新しくなった。 Inkscapeはオープンソースのベクターグラフィック編集ソフトウェア（ドローソフトウェア）。「Sodipodi」からフォークして生まれたプロジェクトで、ベクター画像の編集だけでなくカラーセレクタ、テキストのサポート、レンダリングなどの機能も備え、SVGを初め、XML、PNG、OpenDocument Drawing、DXF、PostScriptなどさまざまなファイルフォーマットを処理できる。WindowsおよびmacOS、Linuxで動作し、ライセンスはGPLv2。 3年近くの開発期間を経てのリリースとなり、多数の新機能や機能強化が加わっている。大きなものとしてはエディタのユーザーインターフェイスの
当ブログでもお馴染みのIcons8から実験的なアイコンとして、セリフフォントの特徴をデザインに取り入れたSerif iconsがリリースされたので紹介します。 アイコンはセリフフォントのようにストロークの端に飾りがついているデザインで、箇条書きリストやテキストボックスに適しています。
この記事も例に漏れず、Web における組版は 1 段組みを基本としており、テキストが延々と下に伸びていく単調なレイアウトが主流です。 しかしながら新聞や雑誌等の組版を見つめ直すと、ブラウザでは実装されることのない縦横無尽に動き回るグリッドの配置、テキストの流し込みが当たり前のように実現されています。こうした自在な組版、Web でぜひ実現してみたいと感じませんか……？ できたもの 図 1: Web で新聞のような組版が実現されたスクリーンショット 図 1 の通り、新聞風のレイアウトを実現しています。 Web で自在なテキストレイアウトは不可能？ CSS3 にて導入された columns プロパティ は、ブラウザ上で段組みを用いたコンテンツの表示を実現します。論文のスタイルでよく見かけるアレですね。ところが、CSS3 の段組みの仕様には「段の高さが揃っていなければならない」[1]と規定があるこ
Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。 さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方 一覧です。黒単色で描かれたアイコンになります。 左側にカテゴリが多数並んでいるのが分かります。 その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部
Shape Divider App
Create fully responsive shape dividers for your next web project
SvgPathEditor
Online editor to create and manipulate SVG paths
フリーアイコンSVG、PNG、ICO、ICNS
あなたは、フォーマット、SVG、ICOとICNSをPNG形式にダウンロードすることができます...私たちは、あなたのWebプロジェクト、アプリ、雑誌、ポスター、広告デザインのための無料のアイコンを見つけるか、あなたはそれを使用したいです。 主要ブランドの何千ものロゴが無料でダウンロードできます。さまざまなスタイルから選択して、アイデアに最適なものを見つけることができます。
Gradient Generator Tool
Why this gradient generator is better than others When you try to create gradients across a wide range of hues, you often will see a gray dead zone ☠️™ in the middle of your gradient. Why is this worth a ridiculously ominous emoji? Because it means your gradients look like this: Color geeks: this is a slight approximation, since we’re squishing a cross-section of a cube into a circle. Put simply:
GitHub - felixfbecker/dom-to-svg: Library to convert a given HTML DOM node into an accessible SVG "screenshot".
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
簡単で便利！Sketch, Figma, AdobeXDなどにコピペで利用できるUIデザイン用のカラーパレットを生成 -CopyPalette
最近のUIデザインでよく使用されている、一貫性のある単色のカラーパレットを簡単に生成でき、そのカラーパレットをSketch, Figma, AdobeXDなどにコピペで利用できるオンラインツールを紹介します。 CopyPalette CopyPaletteは1つのカラーをベースに、濃淡のバリエーションでカラーパレットを簡単に生成できるオンラインツールです。生成されるカラーパレットはSVGなので、さまざまなソフトウェアにコピペで利用できます。 CopyPaletteの使い方は簡単、登録など面倒なことも一切不要です。 まずは、サイトにアクセスします。
グラフィックデザインの環境はいまや完全にビッグ・テックが提供するアプリケーションに囲いこまれてしまったようにみえる。しかし近年、デザイナーたちはそのような枠組みにとどまらない自由なアプローチを探究し続けてきた。身体性やアナログツールの復権はその代表的な動向だといえる。また、3Dや動画をはじめとするデジタル環境のさらなる深部へと方法を拡張していく方向も見逃せない。そんななかデザイナーの石川将也はデザインツールを自らプログラムするというプロジェクトに取り組んでいる。本論ではその動機やプロセスを公開する。 ●ちょっと一緒にやってみてくださいThe Graphic Design Reviewの読者の多くは、お使いのパソコンにAdobe Illustrator（CC）がインストールされていると思います。そこで、この文章をパソコンで読まれている方は、本稿の導入のための小さなワークショップとして、以下の
アイコン集はいくら知っていてもいいものです。多彩なパターンに対応したものもあれば、特定の用途に使えるものもあります。様々なものを知っていれば、役立つ機会が多いにあります。 今回紹介するSuperTinyIconsは1KB以下という小さなサイズが特徴なアイコン集となっています。 SuperTinyIconsの使い方 ソーシャルメディアとメディア。 Google。 コミュニケーション。 Webサイト。 Webサイトとインターネット。 ブラウザとポッドキャスト。 ロゴ。 セキュリティ。 決済。 プログラミング。 その他。 SuperTinyIconsの各アイコンにはサイズも書かれています。その殆どが3桁バイトであるのが分かります。SVGと合わせてPNGも提供されています。汎用的なデザインなので、利用できる場面は多そうです。 SuperTinyIconsは edent/SuperTinyIcons
週刊Webテク通信 2019年6月第1週号1位は、 もう終わったウェブデザインのトレンド、気になるネタは、アップル、約4年ぶりに「iPod touch」新モデル--6色展開で2万1800円から ネットで見かけたWebテク（Webテクニック・Webテクノロジー）記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2019年5月27日～6月2日の間に見つけた記事のベスト5です。 1. 10 Web Design Trends We’re Already Over | Design Shackhttps://designshack.net/articles/graphics/5-web-design-trends-were-already-over/ もう終わったウェブデザインのトレンドをまとめています。 全てがビンテージ 近日公開ページ とても細いタイポグラフィ
Introduction Modern web technologies enable developers to create clean, yet visually rich, user experiences which are widely supported as standard by all of the major browsers. So, how do you actually go about writing standards-based visualisations for the web…? And what support is there exactly for 3D graphics? Let’s start by reviewing the two main supported approaches in the HTML standard: SVG a
無限の芸術性 ジェネレーティブAIツール Pixlr の新しい AI 搭載ジェネレーティブツールは、クリエイティブな可能性を無限に広げます。初心者にも熟練したプロにも最適なこれらのツールは、直感的な AI テクノロジーでアーティスティックな表現を再定義し、クリエイティブなプロセスに革命をもたらします。 ジェネレーティブAI AIイメージジェネレーターマジック！ 画期的なText to Image AIイメージジェネレータで、あなたの作品をより魅力的なものにしましょう。あなたのイマジネーションを解き放ち、聴衆を魅了しインスパイアする、息をのむようなAI生成の傑作を作りましょう。 テスト画像ジェネレーター
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ曲線的なデモです。 グリッドを効かせたドラッグを行うデモです。 スナップする時に、スムーズに動くこともできます。 特定のDOM内には入らないように指定できます。 応用すると、二つのノード、それぞれが入れない場所を指定できます。 ソートにも使えます。 PlainDraggableはDOMだけでなく、SVGに対しても利用できます。ドロー系のアプリケーションであったり、簡易的なゲームなどでも使えそうです。ソートでも使えるので、様々な場面で利用できそうです。 PlainD
今日は週末に勢いでGIFアニメ生成アプリを作ったので開発の流れ＆技術的なポイントを共有します。ソースコードも全て公開しているので、ご自由に流用して遊んでみてください。 作ったもの アプリ： https://fulful.web.app/ ソースコード : https://github.com/yuneco/fulful 珍しく、ちょいバズりました（※当社比） ふるふるふるえるGIFアニメを生成できるWebサービスをリリースしました！あそんでみてね #フルフルネコチャンhttps://t.co/x49XIjEBuN — ゆき (@yuneco) May 10, 2020 この記事で書くこと ちょっとした個人開発アプリを短期間でリリースする流れ＆ポイント 技術解説：SVGフィルタの作り方 技術解説：ブラウザでGIFアニメを生成するアプリの作り方 なお、このアプリはもともとお仕事で↓の記事を書く
Changelog September 5, 2023 Added 10 new patternsAdded Japanese translation available hereAdded Korean translation available hereJuly 16, 2023 Added 10 new patternsUpdated Russian translationAdded Czech translation by Jan Drochytka available hereAdded Danish translation available hereAdded Finnish translation available hereAdded footer link to Creze certificate generator hereJune 2, 2023 Added 12
Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
これまた、便利なツールが登場しました！ 使用するアイコンだけをアイコンフォントやSVGアイコンのセットにできる無料オンラインツールを紹介します。 さまざまなアイコンプロジェクトがサポートされており、BootstrapやMaterial Designをはじめ、当ブログでも紹介したことのある数多くのアイコンから使用するアイコンだけを選択できます。 例えば、Bootstrapからホームとアローだけをセットにするとか、BootstrapのホームとMaterial Designのアローをセットにするとかも簡単です。 Icônes Icônes -GitHub Icônesの特徴 Icônesの使い方 Icônesの特徴 Icônesは複数の商用利用無料のアイコンから、使用するアイコンを選んでセットにして利用できるオンラインツールです。 登録など面倒なことは一切なく、ブラウザから簡単に利用できます。
Free svg background generator for your websites, blogs and app.
speckyboy Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web. SVGとは画像形式の１つで、おなじみのJPG形式やPNG形式と違い、２次元ベクターなので拡大縮小しても画質が落ちないというメリットがあります。また、XMLというマークアップ言語で記述されるため、テキストとしてテキストエディタで編集できるのが特徴です。 このSVGをwebデザインに応用すると、かなりクレイジーなことができてしまいます。なんと、ページにコードを書くだけで、画像ファイルを用意することなくイラストやアニメーショ
SVGは、Webサイトの中では、アイコンやロゴやシンプルなイラストに使われている、拡大してもずっと綺麗な画像ファイルです。画像フォーマットでありながら、XMLに基づくマークアップ言語でもあるので、テキストエディタで編集できてしまえるのも魅力。しかもずっと綺麗なんです。 そんなSVGファイルを作るときに僕がよくやることをちょこちょこまとめてゆきます:)。 書き出しはイラレから XMLに基づくマークアップ言語とはいえ、複雑な図形やイラストは、人力では到底マークアップできません…X‹。 図形やイラストはAdobe Illustrator（以下、イラレ）で制作して、そのままイラレから、SVGファイルとして書き出すことが常です。 ここでは、このサイトの左上にいるパンちゃんアイコンを書き出してみます:)。 イラレのデータを用意 まずは何はなくともaiデータを用意しなくちゃいけません。 「新規...（⌘
This website allows you to select a city and then draws every single road on a screen.
CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。 この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。 最新Webデザインでもよく見かけるテクニックです、ぜひ活用してみましょう。 これらの例のHTMLはすべて、外側の.card divと内側の.inner divから構成されています。詳しくはデモを参照してください。 コンテンツ目次フェイクボーダーアウトラインの使用SVGによるアニメーション・ボーダーさいごに フェイクボーダー まずは、単にパディングやマージンを使ってボーダーを表現する3つの例から見ていきます。 この記事のすべての例では、以下のCSSを使用しています。 .card
svgをtemplateにコピペする暗黒時代の終わりを告げる 🔍 vue svg 体験 一番いいやつ— ねこじまぐ (@nakajmg) August 29, 2019 vue-svg-loader を使う github.com vue-svg-loaderを使うとsvgファイルをvueコンポーネントとして扱えるようになる <template> <a href="https://github.com/vuejs/vue"> <VueLogo /> Vue </a> </template> <script> import VueLogo from './public/vue.svg'; export default { name: 'Example', components: { VueLogo, }, }; </script> Nuxtで使うときは nuxt.config.js の bu
Basecamp disclosed on HackerOne: AWS keys and user cookie leakage...
Basecamp supports uploading SVG pictures as avatars. Apparently, they are converted via an outdated librsvg version at Basecamp's servers. This version contains a vulnerability that allows leakage of the contents of an uninitialized memory block (that is, something is malloced, never initialized, and then used to build the preview image). Since it seems to be performed in the same unix process...
Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a <style> element. That CSS can use a prefers-color-scheme media query, and as a result, a favicon that supports dark mode! < pre rel=”HTML”> < svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: yellow; stroke: black; stro
日本観光をテーマにした、シンプルで分かりやすいピクトグラム280個を揃えたExperience Japan Pictogramの無料公開がスタートしています。 利用規約の範囲内であれば、個人利用はもちろん、商用でも無料で利用できるという太っ腹なプロジェクトとなっています。 Experience Japan Pictogramとは Experience Japan Pictogramの開発コンセプトは、以下のように述べられています。 〈EXPERIENCE JAPAN PICTOGRAMS〉は、ピクトグラムを誰もが自然と目にする日本観光のインフラと捉え、そのデザイン性を追求すること、そして1人でも多くの方に使っていただくことを何よりの使命と考えて開発しています。 それゆえ、利用規約の範囲内であれば、個人、法人、商用、非商用を問わず、無料で利用可能です。 また、情報を伝えるにとどまらず、多様性
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Modules で作る SVG Icon Component
Cacooのエクスポート機能が4倍速くなりました！SVGの生成手法の刷新によるパフォーマンスの向上 | Cacooブログ
JavaScript・TypeScriptのimport・exportの依存関係を可視化するcode-dependencyの紹介 - Qiita
SSSVG: An Interactive SVG Reference | fffuel
オープンソースのベクター画像編集ソフト「Inkscape 1.0」リリース | OSDN Magazine
UIデザインのアイコンにお勧め！ セリフフォントの特徴をデザインに取り入れた美しいアイコン素材 -Icons8
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
Web だって組版の夢を見る――新聞のように自在にテキストを流し込むには
css.gg - 500種類を超えるCSSアイコン集 MOONGIFT
作り続けるための仕組みづくり｜ARTICLES｜The Graphic Design Review
SuperTinyIcons - 1KB以下の軽量アイコン集
2019年6月第1週号 1位は、 もう終わったウェブデザインのトレンド、気になるネタは、アップル、約4年ぶりに「iPod touch」新モデル--6色展開で2万1800円から | gihyo.jp
X3D: Declarative 3D for the Modern Web
無料オンラインAIフォトエディタ、イメージジェネレータ、デザインツール
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ MOONGIFT
VueとSVGでGIFアニメ生成アプリ作ったのでソース全公開＆解説 - Qiita
Pattern Monster - SVG Pattern Generator
複数のアイコンプロジェクトから、使用するアイコンだけをアイコンフォントやSVGのセットにできる無料ツール
Free svg background generator
CSSで絵が描ける！コード入力によるアニメーションやパララックス付きSVG風景イラスト12選
SVGでやることのまとめ。
Draw all roads in any city at once
コピペで楽々、CSSでできるボーダーアニメーション５選
Vueでsvgファイルをいい感じに扱う - じまろぐ
Dark Mode Favicons | CSS-Tricks
https://isoflat.com/explore-isobuild/
商用可能！日本観光がテーマの無料ピクトグラム280個セットExperience Japan Pictogram