用途
新着
履歴
分類

SVG 文字の輪郭のアニメーション

SVG 文字の輪郭のアニメーション
文字の輪郭に沿って、だんだん線がひかれるアニメーションのサンプルです。

SVGのテキストの輪郭の破線の間隔をアニメーションすることによって、文字の縁取りをするような表現になります。

文字の 輪郭を アニメ

SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="demo">
    <text x="10" y="60" font-size="50" class="demo">
        文字の
    </text>
    <text x="10" y="120" font-size="50" class="demo">
        輪郭を
    </text>
    <text x="10" y="180" font-size="50" class="demo">
        アニメ
    </text>
</svg>

CSS

<style>
    svg.demo{
        margin:20px;
        width: 300px;
        display:block;
        margin:40px;
        background-color: #CCC;
    }
    text.demo{
        fill:#FFF;
        font-weight:900;
        stroke:#F00;
        stroke-width: 2px;
        stroke-dasharray: 500;
        animation: demo_kururi ease 5s infinite;
    }
    
    @keyframes demo_kururi {
        from {
            stroke-dashoffset: 500;
        }
        to {
            stroke-dashoffset: 0;
        }
    }
</style>
公開 2021-12-30 13:35:34
更新 2021-12-30 13:36:09
このページの二次元コード
SVG 文字の輪郭のアニメーション

人気のサンプル

search -  category -  about
© 2024 kipure
Top