Printing music with CSS grid
Printing music with CSS Grid Too often have I witnessed the improvising musician sweaty-handedly attempting to pinch-zoom an A4 pdf on a tiny mobile screen at the climax of a gig. We need fluid and responsive music rendering for the web! Stephen Band 24 Apr 2024 Music notation should be as accessible and as fluid as text is, on the web; that it is not, yet, is something of an afront to my sensibil
Webページを作成する時に役立つ、HTMLをはじめとする必要最小限のファイルをまとめたシンプルな基本テンプレート一式を紹介します。 最新版は、最近の実装に合わせた設計にアップデートされました。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による10年間の分析・研究・実験を元にしています。 ブラウザの見え方を最適化 プログレッシブエンハンスメントを念頭において設計されています。 インクルード 推奨されるmetaタグやその他の利点を備えたH
Layer Cake
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
PHPカンファレンス小田原2024 の発表資料です。 https://phpcon-odawara.connpass.com/event/296492/ https://fortee.jp/phpconodawara-2024/proposal/7c57d5ca-213a-4d7a-aaf0-26ddc44897f0
CSSでボーダーをアニメーションさせるのは意外と難しいもの。幅や色のような単純な動きは別として、より複雑なアニメーションは他の選択肢を必要なケースがしばしば。 この記事ではCSSのborderプロパティを使わずにできる、”フェイク”ボーダーやアウトライン、さらにはSVGを使ったアニメーションの例を5つご紹介します。 最新Webデザインでもよく見かけるテクニックです、ぜひ活用してみましょう。 これらの例のHTMLはすべて、外側の.card divと内側の.inner divから構成されています。詳しくはデモを参照してください。 コンテンツ目次フェイクボーダーアウトラインの使用SVGによるアニメーション・ボーダーさいごに フェイクボーダー まずは、単にパディングやマージンを使ってボーダーを表現する3つの例から見ていきます。 この記事のすべての例では、以下のCSSを使用しています。 .card
これでもうUIデザイン用のSVGアイコンに困らない！ 商用無料のSVGアイコンを横断検索・ダウンロードでき、カスタマイズもできる便利サイト -Iconbuddy
商用で無料利用できる、MITライセンスなどのオープンソースで利用できるSVGアイコンは、たくさんのサイトからリリースされています。これらをまとめて検索してダウンロードでき、しかもカスタマイズもできてしまう便利サイトを紹介します。 FigmaとVS Codeのプラグインも揃っており、そこから直接アイコンを利用することもできるので、かなり便利です。 Iconbuddy -200K+ open source free svg icons Iconbuddyの特徴 SVGアイコンの利用方法 Iconbuddyで利用できるSVGアイコン Iconbuddyの特徴 Iconbuddyは、オープンソースで利用できる200,000種類以上のSVGアイコンを無料で検索、ダウンロード、さらにアイコンのカスタマイズもできるアイコン検索エンジンです。 Iconbuddy -200K+ open source fr
SVG Flag Icons
Powered by Nucleo: Icon Manager for Mac/Windows SVG Flag Icons Explore over 200 optimized SVG country flag icons — Perfectly crafted on a 32px grid No results found. Suggest missing flag. SVG Flag of Aaland Islands SVG Flag of Afghanistan SVG Flag of Albania SVG Flag of Algeria SVG Flag of Andorra SVG Flag of Angola SVG Flag of Antigua Barbuda SVG Flag of Argentina SVG Flag of Armenia SVG Flag of
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
Illustratorでアイコンなどを余白も含めた正方形サイズでSVG書き出しするベストプラクティス｜DTP Transit 別館
池原さんが問題提起されていた「アイコンなどを余白も含めた正方形サイズでSVG書き出し」する方法について考えてみます。 Illustratorで、アイコンなどを余白も含めた正方形サイズでSVG書き出ししたい場合、一番スマートな方法は…？ — けんじ / UX Designer (@kenji_clown5) January 30, 2024
UIデザインで、小さいサイズでもはっきりと美しく見えるように設計されたMicroサイズのSVGアイコン -Heroicons Micro
テキストの横にアイコンを配置すると、アイコンが少し大きすぎてバランスが悪いと感じることはありませんか？ アイコンは通常のMiniサイズだと20x20ですが、それより一回り小さく高密度のUI向けに設計されたMicroサイズの16x16のSVGアイコンを紹介します。 Heroicons Micro Heroicons -GitHub Heroicons Microの特徴 Heroicons Microのダウンロード Heroicons Microのアイコン Heroicons Microの特徴 Microサイズのアイコンは、先日v2.1にアップデートされたHeroiconsに新しく加わったサイズです。 タイトで高密度のUI向けに設計されており、UIデザイン用に約300種類のアイコンが揃っています。MITライセンスで、商用プロジェクトでも無料で利用できます。 Heroicons 既存のアイコンを
ゲームパッド・キーボードなどの入力ボタンアイコンが800種以上詰まった『Input Prompts』、Webサイト「Kenney」で無料公開
入力ボタンのアイコンパック『Input Prompts』、Webサイト「Kenney」で無料公開 各種コンシューマー機のゲームパッド、キーボード・マウスといった入力ボタンのアイコンが収録されている SVGファイル、サイズの異なる2種のPNGファイルで用意 ゲーム開発用素材の配布やゲームの公開・販売などを行うWebサイト「Kenney」にて、ゲームパッドなどの入力ボタンのアイコンがセットになったパック『Input Prompts』が公開されました。 Input Prompts are now available! Contains 800+ glyphs for common input types, including overlays and generic controls. Includes PNG (64×, 128×) and SVG, plus an overview of a
グラフィックデザインの環境はいまや完全にビッグ・テックが提供するアプリケーションに囲いこまれてしまったようにみえる。しかし近年、デザイナーたちはそのような枠組みにとどまらない自由なアプローチを探究し続けてきた。身体性やアナログツールの復権はその代表的な動向だといえる。また、3Dや動画をはじめとするデジタル環境のさらなる深部へと方法を拡張していく方向も見逃せない。そんななかデザイナーの石川将也はデザインツールを自らプログラムするというプロジェクトに取り組んでいる。本論ではその動機やプロセスを公開する。 ●ちょっと一緒にやってみてくださいThe Graphic Design Reviewの読者の多くは、お使いのパソコンにAdobe Illustrator（CC）がインストールされていると思います。そこで、この文章をパソコンで読まれている方は、本稿の導入のための小さなワークショップとして、以下の
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。 SVGとは SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。 また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。 ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。 SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体の
Addendum Dec 7, 2023 One of my ongoing fixations with the web is how improvements in technology inform web design. In an earlier post this year I wrote about my theory that the increasing pixel density of displays galvanized the shift from photography to vector illustrations in the early to mid 2010s. In recent years there has been a design trend that runs counter to this. Illustrations still rule
How to Draw a Clock with SVG and JavaScript that Shows the Actual Time
これでもうUIデザイン用のSVGアイコンに困らない！ 2,000種類以上が揃った商用無料、改変・再配布可の太っ腹ライセンス- MingCute Icon
WebサイトやスマホアプリのさまざまなUIデザイン用に、シンプルで洗練されたデザインのSVGアイコンが完全無料で利用できるMingCute Iconを紹介します。 このアイコンの特徴は、小さいサイズでもくっきり見えること。2,452種類のアイテムが揃っており、すべてSVGアイコン、そしてWebフォントとして利用できます。 MingCute Icon MingCute Icon -GitHub MingCute Iconの特徴 MingCute Iconのダウンロード MingCute Iconのアイコン MingCute Iconの特徴 MingCute Iconは、Webサイトやスマホアプリ用にシンプルで洗練されたデザインのアイコンです。すべてのアイコンは、24x24のグリッド内に設計されており、アウトラインと塗りつぶしの2スタイル、2pxのストロークとなっています。アイコンのフォーマッ
Use text-to-svg to create unique SVG cut files with our AI Generator tool. 100% FREE, no signup.
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
本記事は<svg>要素のみを持つ<button>要素（アイコンボタン）にアクセシブルな名前（accessible name）を持たせる方法について調査した結果と、WCAG 2.2のSuccess Criterion 1.1.1 Non-text Contentに関する私見をまとめたものです。 結論 アイコンボタンの非テキストコンテンツは装飾ではなく意味を持つ画像なので、ボタンではなくアイコン画像自体にアクセシブルな名前を持たせるべきだと考えます 一方で、非テキストコンテンツの範囲をアイコンのみではなくアイコンボタン全体と捉えると、ボタンにアクセシブルな名前を持たせることも妥当に思えますが、<img>要素や<svg>要素など様々な種類のアイコン画像の実装を想定した場合、やはりボタンにアクセシブルな名前を持たせない方針に倒す方がシンプルだと思います <svg>要素のみを持つ<button>要素
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
イラレの生成AIが凄いので Live - 2023/10/11 Adobe MAX 2023｜CreativeEdge Vlog
Adobe Illustraor 28.0に搭載された生成AI（ベクターグラフィックの生成）が衝撃的だったので、このページにまとめていきます。 イラレの生成AIの探求は以下の新しいページに掲載しています 新しいイラレ生成AI関連ページイラレの生成AIでハロウィンのイラストを描こう！ イラレの生成AIでイラストを描くLive - 2023/10/14-15 Adobe Illustrator「イラレの生成AIを探求する」ライブ配信 イラレで生成したベクターグラフィック本日からロスアンゼルスでAdobe MAX 2023がスタートしましたが、遂にAdobe Illustrator（バージョン28.0）に「テキストからベクター生成 (Beta)」が実装されました。Adobe Fireflyのベータ版が登場した時から待機リストに掲載されていたので、いつ搭載されるのか注目していました。 参考：Ill
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...
デジタルプロダクション「factory4」でアプリやさまざまなIoTプロジェクトのUIUXデザインを手がける新谷友樹さんが、UIやUXにまつわるトピックについて解説する本連載。今回は「Vectorizer.AI」についてです。 こんにちは！株式会社Cosmowayが組織するデジタルプロダクション「factory4」のUIUXデザイナー新谷です。 今回は以前、AIを活用したロゴ作成に関する記事で少し触れた「Vectorizer.AI」について深掘りしていきたいと思います。 この一年でプロンプトを打ち込むチャット型AIツール「ChatGTP」や、画像生成系のAIツール「Midjourney」「Stable Diffusion」などさまざまなAIサービスが登場しています。そのなかでも「Vectorizer.AI」は、ほかとは少し違う角度のAIサービスではないでしょうか。簡単に言ってしまえば、JP
X (旧Twitter)のSVGロゴアイコン Twitterの名称がXに変更され、ロゴのアイコンも青い鳥から黒いXに変更されました。 今後はWebサイトで使用されているTwitterアイコンをXアイコンに差し替える作業が必要となります。 SVGロゴアイコンの作成方法と保存場所 Xの黒のSVGのロゴのアイコンの素材は、公式では用意されていません。 しかし、XのヘルプセンターなどのXのロゴのアイコンがSVGになっているので、これを利用すればXのロゴをSVGで作成できます。 SVGのコード作成 Xの公式サイトで使用されているSVGのパスを不要なコードを除くと以下のようになります。 <svg viewBox="0 0 1200 1227" xmlns="http://www.w3.org/2000/svg"> <path d="m714.163 519.284 446.727-519.284h-1
Transhumans: Open Source Punk Sci-Fi Art Collection by Pablo Stanley
transhumansopen source illustrations of character transcending their biological barriers
SVGとPNG完備のおしゃれなイラスト素材！ あらゆるメディアで完全無料で利用できる太っ腹ライセンス -Transhumans
商用でも完全に無料で利用できる、SVGとPNG完備のおしゃれなイラスト素材を紹介します。Webやアプリ、プレゼン、提案書、ポスター、同人誌など、あらゆるメディアで無料で利用できます。 イラストはすべて手描きのベクターで、80年代のSF映画や日本のイラストにインスパイアされて描かれています。 Transhumans さっそく、イラスト素材のダウンロード方法から。 イラストをクリックすると各イラストのページに移動するので、「download SVG」「download PNG」ボタンをクリックすると、ダウンロードできます。登録など面倒なことは一切不要です。
サイト制作・ブログ・WEB開発・Notionに幅広く使える！SVGアイコン(SVG ICONS)素材サイトを紹介「サイトにSVCアイコンを取り入れたい」「ブログをかっこよくしたい」「無料で使えるSVCサイトが知りたい」 SVGアイコン(SVG ICONS)素材の需要は高いです。しかしSVCアイコンサイトはたくさんあり、どのサイトを使えば良いのかよく分からず、選ぶのも面倒ですよね。 そこで今回は、無料で使えるSVCアイコンサイトをサイトの特徴と併せて紹介します。自分にピッタリのSVCアイコンサイトを見つけましょう。 今回紹介するSVGアイコンサイトはすべて「無料」「商用利用可能」ですが、利用規約が変更になっている場合もありますので、必ず公式サイトの利用規約を確認してからダウンロードするようにしてください。
CSS @font-faceに使用する新しい構文の基礎知識と使い方、format()とtech()、OpenType-SVGとCOLRv1によるカラーフォントの表示
CSSの@font-faceで見慣れない構文があるなと思ったら、どうやら新しい構文がChrome, Edge, Safari, Firefoxの各ブラウザにサポートされていました。 CSSの@font-faceに使用する新しい構文の基礎知識と使い方を紹介します。 The new @font-face syntax by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 @font-faceの新しい構文のブラウザサポート @font-faceによる可変フォントの使用方法 tech()によるカラーフォントの使用方法 @supportsでも同等の機能が使用できる @font-faceの新しい構文のブラウザサポート CSSの@font-faceの新しい構文は、Safai 17（次のバージョンアップ）, Fir
ChatGPTでSVGのイラストを描いてみよう - Taste of Tech Topics
最近三年ぶりに海水浴にって来ました、やっぱり夏は海ですね。菅野です。 ChatGPTは、言語生成AIであり、Stable Diffusion、Midjourneyといった画像生成AIとは異なり画像を生成することは通常できません。 しかしながら、テキストベースのフォーマットであれば、プログラムといった文章とは異なるものも出力することができます。 そう、XML形式で画像を表現するSVGであれば、ChatGPTから生成することが可能なのです。 今回はSVGを使ってChatGPTのGPT-4モデルにお絵描きをしてもらい、 どういった表現まで可能なのかを探っていこうと思います。 www.w3.org 簡単な図形から描いてもらう まずは、試しに簡単な図形から描画してもらいましょう。 <svg xmlns="http://www.w3.org/2000/svg" width="200" height="
この<Icon />コンポーネントを使用すると、以下キャプチャのようになります。 UI ライブラリから提供されているものを使用する選択肢もありますが、デザイナーが用意した SVG を使用する場合は自作する必要があります。自作<Icon />コンポーネントのフォルダ構成は、概ね以下のようになるでしょう。 SVG Icon Component をどう作るか アイコン画像を背景画像ではなく SVG にする理由は「塗り色」を動的に変更したいためです。新色を追加するとき、全種のアイコン画像を追加するのは大変です。SVG であれば、要素に対しpath { fill: #ff0; }のように CSS 指定をすることで動的に塗り色を変更できるため、このようなケースでは「インラインレンダリング」が選択できます。インラインレンダリングであれば、塗り色だけでなくサイズも動的に変更できます。 ただし、インラインレ
The ultimate source for icons.Download, Customize, Edit and Personalize. Over 200k+ open source icons.
I’ve been really enjoying the latest Zelda game, Tears of the Kingdom. One of the ways the game creates a cohesive aesthetic is by repeating patterns between the game environment and interface screens. There was one pattern in particular that I was drawn to. This repeating circle motif can be found throughout the game’s many shrines and on interface screens. The pattern is even used on the officia
Advanced Data Analysis（旧ChatGPT Code Interpreter）の活用方法を片っ端から試していく
Advanced Data Analysis（旧ChatGPT Code Interpreter）の活用方法を片っ端から試していく ChatGPT Code Interpreterをとにかく触ってみる 「Code Interpreterが凄い！」と、みんなが騒いでいるのでとりあえずネットで目についた活用方法を片っ端から試していきたいと思います。 試したら追記していきます。 Code Interpreterのセットアップ 以下3ステップです。簡単ですね。よく分からなかったら別のサイトみてください。 ChatGPT Plusに課金 Setting Beta featuresでCode interpreterのトグルをオン ChatGPTのGPT4でCode Interpreterを選択 以下参考のスクリーンショットです。 Code Interpreterの活用例 ここから活用例を載せていきます
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro）faviconVue.jsastroNext.jsSvelteKit 「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定しま
Understanding SVG PathsIf you've ever looked at the SVG code for an icon before, you might have noticed that they're usually made up of a bunch of path elements, each with a cryptic d attribute. If you're anything like me, you might've glossed over this attribute in the past, assuming they're nothing more than the output of your designer's favorite vector graphics editor. While, er, that may be tr
https://svghub.vercel.app/
Please don't import SVGs as JSX. It's the most expensive form of sprite sheet: costs a minimum of 3x more than other techniques, and hurts both runtime (rendering) performance and memory usage. This bundle from a popular site is almost 50% SVG icons (250kb), and most are unused. SVGs in JS have a cost and SVGs do not belong into your JS bundle. It’s about time to bring back SVG-in-HTML. Let’s take
WebサイトやスマホアプリのUIデザイン用にシンプルで、可読性を最大限に高めたアイコン素材を紹介します。ライン・デュオトーン・ソリッド・フラットの4つのスタイルに、計4,000種類のアイコンが揃っています。 アイコンはオープンソースなので、商用プロジェクトでも無料で利用できます。Figmaで配布されているので、すぐに使用できるのも嬉しいですね。 4,000 Free + Open Source Icons アイコン界のヘルベチカを目指して、可読性を最大限に高めるために14pxのグリッド上に構築されています。Streamlineの10年以上の経験を持つ8人のアイコンデザイナーによって作成されています。 アイコンの利用方法は簡単で、下記ページにアクセスし、「Figmaで開く」をクリックします。
Webサイトのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材 -UI Skeleton Gallery
Webサイトやスマホアプリで使用される、カード、セクション、ボタン、フォーム、見出し、テキスト、リスト、画像、動画など、UI要素のスケルトン素材を紹介します。 商用利用も無料で、ダークモード・ライトモードに対応しており、素材はSVGのファイルとコードでダウンロードできます。もちろん、Figmaでも利用できます。 UI Skeleton Gallery UI Skeleton Galleryは、デザインのワイヤーフレームやモックアップに使用するSVGで制作されたUI要素のスケルトン素材です。スケルトン素材とは実際のコンテンツは一切含まず、コンテンツが完全に読み込まれる前にページのワイヤーフレームを提供するUI要素です。 素材の利用にあたっては商用プロジェクトでも無料で、クレジットなども必要ありません。詳しくはTerms of useをご覧ください。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版最近の実装に合わせた、HTMLでWebページを実装するための必要最小限をまとめたテンプレート一式
FigmaとPHPで作る1ミリたりとも表示崩れしない最強の帳票印刷ソリューション
コピペで楽々、CSSでできるボーダーアニメーション５選
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
作り続けるための仕組みづくり｜ARTICLES｜The Graphic Design Review
Making noisy SVGs — Daniel Immke
SVG Tutorial - Learn how to code images in HTML with SVG
AI text prompt to SVG
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
ラスター画像をベクター変換するAIツール「Vectorizer.AI」が便利すぎた
X (旧Twitter)のSVGロゴアイコンの作成方法と保存場所
SVGアイコン素材サイト14選【無料・商用利用可】Notionからサイト制作まで自由に。 | KodoCode
CSS Modules で作る SVG Icon Component
Iconbuddy — 200K+ open source free svg icons
Coding Randomized Zelda Patterns
A Deep Dive Into SVG Path Commands
Breaking Up with SVG-in-JS in 2023
Figmaですぐに使えるUIデザイン用のアイコン素材！ シンプルで、可読性を最大限に高めた4,000種類のアイコン