svg

mrdoob/three.js

ブラウザ3D表現を支える定番ライブラリ — three.jsはWebGLやWebGPUを抽象化し、軽量かつクロスブラウザで3D表現を実現する定番ライブラリです。SVGやCSS3Dレンダラーもアドオンで利用可能で、VR/ARやWebXR対応も進んでおり、ゲームやビジュアライゼーション制作者に広く使われています。

JavaScript 3D Library.

juliangarnier/anime

軽量・多機能なJSアニメエンジン最新版 — CSS・SVG・DOM属性・JSオブジェクトまで統一APIで扱える軽量アニメーションライブラリです。シンプルながら強力な記法で複雑なモーションも簡潔に書け、GSAPなどの代替として長く支持されてきた定番ツールのV4版です。

JavaScript animation engine

cathrynlavery/diagram-design

AIエージェント向け「編集者品質」ダイアグラム生成スキル — Claude CodeやCodexなどのAgent Skills対応ホスト用に、影なし・Mermaidっぽくない編集記事風の図をHTML+SVGで自動生成するスキルです。フローチャートやSankey図、UML、DB設計図など20種超のレイアウトに対応し、draw.ioやMermaid、Excalidraw素材の再描画も可能。Figmaでの微調整作業を省きたいライター・デザイナー向けです。

Editorial diagram design for Claude Code, Codex, GitHub Copilot, Cursor, Factory Droid, Qoder, and Pi. 45 diagram types. Self-contained HTML + SVG. No shadows. No Mermaid slop.

tabler/tabler-icons

6200超の無料SVGアイコン集 Tabler Icons — 24x24グリッド・2pxストロークで統一デザインされたMITライセンスのSVGアイコンセットです。アウトライン版とフィル版を合わせて6000以上収録し、React・Svelteなど各フレームワーク向けパッケージも提供。Bootstrap Iconsなどと並ぶ選択肢として、デザインの統一感を保ちつつ幅広い用途に使える点が魅力です。

A set of over 6200 free MIT-licensed high-quality SVG icons for you to use in your web projects.

wheresryan22/anatomy

仕組みを精密な図解にするAIスキル — Claudeなどのエージェントで動くスキルで、機械や複雑なシステムの構造を精密なアイソメトリックSVG図解として自動生成します。WebGLシェーダーや3D効果も使え、依存ゼロで動作。アイデアを「実際に動く物」として説明したい開発者やエンジニアに刺さるツールです。

An agent skill for creating detailed, interactive isometric illustrations of real-world machines and complex systems. Generates polished SVGs with optional WebGL shaders and 3D effects.

rough-stuff/rough

手描き風スケッチ描画ライブラリRough.js — Canvas/SVG両対応で、線や図形を手描き・スケッチ風に描画できる軽量ライブラリです。9kB未満と小さく、ハッチングやジグザグなど多彩な塗りつぶしスタイルを備え、ワイヤーフレームや手書き風UIの表現に手軽に使えます。

Create graphics with a hand-drawn, sketchy, appearance

storytold/vectorcraft

VectorCraft: An open-source, vector art tool written by scratch in pure Rust

kane50613/takumi

Render OG images and paged PDFs from JSX, HTML, and CSS. No headless browser. Runs on Node.js, Cloudflare Workers, browsers, and Rust.

guillermolg00/morphicons

Any icon morphs into any other — universal morphing for stroke-based icons with spring physics. Zero dependencies, ~7 KB gzip.

reladraw/reladraw

相対位置で描く新感覚ダイアグラム記法「reladraw」 — reladrawはノードの相対的な位置関係を記述してSVG図を生成するテキスト言語です。MermaidやGraphvizのような自動レイアウトでは思い通りの配置ができず、draw.ioのような座標指定は手間がかかるという悩みを解消し、両者の中間を狙います。CLIやWebコンポーネントとしても利用可能です。

A text diagram language where you say where things go. Playground: reladraw.github.io/reladraw

lovisdotio/motion2code

Skills for coding agents: rebuild a motion design video as looping SVG + GSAP code, checked frame by frame against the source

Garinmckayl/anima

Anima: a Claude Code skill that turns a biology idea into an interactive, sourced, isometric figure. Dopamine receptors, stimulants, addiction circuits, semaglutide.