Anthropic Claudeデザイン・クリエイティブ⭐ リポ 0品質スコア 60/100

svg-animations

美しくパフォーマンスの高いSVGアニメーションとイラストを作成できます。ユーザーがSVGグラフィックス、アイコン、イラスト、アニメーションロゴ、パスアニメーション、シェイプモーフィング、ローディングスピナー、またはその他のアニメーションSVGコンテンツの作成をリクエストする場合に使用してください。SMILアニメーション、CSSドリブンSVGアニメーション、パス描画エフェクト、シェイプモーフィング、モーションパス、グラデーション、マスク、フィルターに対応しています。

description の原文を見る

Create beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any animated SVG content. Covers SMIL animations, CSS-driven SVG animation, path drawing effects, shape morphing, motion paths, gradients, masks, and filters.

SKILL.md 本文

注意: このスキルのライセンスは ライセンス未確認 です。本サイトでは本文プレビューのみを表示しています。利用前に GitHub の原本でライセンス条件をご確認ください。

このスキルは、シンプルなアニメーションアイコンから複雑なマルチステージのパスアニメーションまで、ハンドクラフトされたSVGアニメーションの作成をガイドします。SVGは画像用のマークアップ言語です。すべての要素がDOMノードであり、スタイル、アニメーション、スクリプトが可能です。

SVGの基礎

座標系

SVGは viewBox="minX minY width height" で定義された座標系を使用します。viewBoxはキャンバスです。すべての座標がそれに相対的であるため、SVGは解像度非依存になります。

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <!-- 200x200ユニットのキャンバス、任意のサイズにスケール -->
</svg>

図形プリミティブ

<rect x="10" y="10" width="80" height="40" rx="4" fill="#1a1a1a" />
<circle cx="50" cy="50" r="30" fill="#e63946" />
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#457b9d" />
<line x1="

...

全文を GitHub の原本で見る →リポジトリ

詳細情報

作者: sunprema
リポジトリ: sunprema/genieos
ライセンス: 不明
最終更新: 2026/4/17

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/sunprema/genieos / ライセンス: 未指定