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

手書きサイン風見出し

担当者名やブランド名の下にサインのような一筆書きが描かれます。WordPressの代表挨拶や制作者クレジットに温かみを添えられます。

css

プレビュー

ソースコード

HTML

<div class="d02-15-01-wrap">
          <h4 class="d02-15-01-name">Ohara Design</h4>
          <svg class="d02-15-01-sig" viewBox="0 0 220 60" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path class="d02-15-01-path" d="M8,42 C24,10 34,10 40,34 C46,54 54,54 62,30 C68,10 76,8 84,26 C90,42 98,44 108,28 C118,10 128,8 140,22 C150,34 160,38 176,20 C188,8 200,10 212,26" fill="none"/>
          </svg>
        </div>

CSS

.d02-15-01{background:#fdfaf3}
        .d02-15-01-wrap{text-align:center}
        .d02-15-01-name{margin:0 0 4px;font-size:22px;font-weight:800;color:#1f2937;font-family:Georgia,serif}
        .d02-15-01-sig{width:220px;height:60px}
        .d02-15-01-path{stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none;stroke-dasharray:520;stroke-dashoffset:520}
        .d02-15-01.is-in .d02-15-01-path{animation:d1801draw 2.2s ease forwards}
        @keyframes d1801draw{to{stroke-dashoffset:0}}
        @media (prefers-reduced-motion: reduce){.d02-15-01-path{animation:none!important;stroke-dashoffset:0}}

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