パーツ番号 02-15-04 ・ CSSのみ

輪郭ドローイング→塗りつぶし文字

文字の輪郭が線で描かれたあと内側がじわっと塗りつぶされます。WordPressのブランドロゴ的な見出しやコンセプトワードの提示に洗練された印象を与えます。

css

プレビュー

ソースコード

HTML

<svg class="d02-15-04-svg" viewBox="0 0 260 70" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <text class="d02-15-04-text" x="10" y="50">DESIGN</text>
        </svg>

CSS

.d02-15-04{background:#111827}
        .d02-15-04-svg{width:260px;height:70px}
        .d02-15-04-text{font-size:44px;font-weight:900;fill:transparent;stroke:#facc15;stroke-width:1.5;stroke-dasharray:900;stroke-dashoffset:900}
        .d02-15-04.is-in .d02-15-04-text{animation:d1804outline 1.6s ease forwards,d1804fill 1s ease 1.6s forwards}
        @keyframes d1804outline{to{stroke-dashoffset:0}}
        @keyframes d1804fill{to{fill:#facc15}}
        @media (prefers-reduced-motion: reduce){.d02-15-04-text{animation:none!important;stroke-dashoffset:0;fill:#facc15}}

クラス名 .d02-15-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。