SVG Stroke Animation With CSS | SVG Text (Desktop)

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng SVG Stroke Animation đơn giản chỉ bằng CSS3 nhưng không kém phần ấn tượng.

Danh mục

Effects Navigations Templates UX Patterns Plugin

Tags

#text #svg #desktop

DEMO

HTML

<svg id="text-effect">
    <symbol id="text">
        <text text-anchor="middle" x="50%" y="70%">SVG Text</text>
    </symbol>
    <use xlink:href="#text"></use>
</svg>

SCSS

#text-effect {
    font-weight: bold;
    width: 100%;
    height: 350px;
    text-transform: uppercase;
    text {
        font-size: 200px;
        fill:rgba(0,0,0,.1);
        stroke-width:1px;
        stroke: #fff;
        stroke-linejoin: round;
        stroke-dasharray: 80;
        -webkit-animation: anmation 1s linear infinite;
                animation: anmation 1s linear infinite;
    }
}
@-webkit-keyframes anmation {
    100% {
        stroke-dashoffset:160;
    }
}
@keyframes anmation {
    100% {
        stroke-dashoffset:160;
    }
}