Stunning Text Animation with SVG and CSS



Text Animation CSS Ganesh

We would like to present this great effect, which we found on bootsnipp.com. Written by developer Ganesh Gujjeti 123, the effect generates moving borders in different colors around any desired text string.

The best thing is: You can quickly and easily create your own great text animation by modifying the font family, the text, and the colors. I could imagine to build a plugin for jQuery.

We have created a little custom DEMO Be careful, it’s performance-heavy!

DEMO in a new window

The HTML-Markup

<div class="container">
        <div class="row">
            <svg viewBox="0 0 960 300">
                <symbol id="s-text">
                    <text text-anchor="middle" x="50%" y="80%">Ganesh </text>
                </symbol>
                <g class = "g-ants">
                    <use xlink:href="#s-text" class="text-copy"></use>
                    <use xlink:href="#s-text" class="text-copy"></use>
                    <use xlink:href="#s-text" class="text-copy"></use>
                    <use xlink:href="#s-text" class="text-copy"></use>
                    <use xlink:href="#s-text" class="text-copy"></use>
                </g>
            </svg>
        </div>
        <div class="row">
            <address>
                    author by: Ganesh Gujjeti
            </address>
        </div>
</div>

The CSS-Code

@import url(https://fonts.googleapis.com/css?family=Montserrat);

html, body{
  height: 100%;
  font-weight: 800;
}

body{
  background: #030321;
  font-family: Arial;
}

svg {
    display: block;
    font: 10.5em 'Montserrat';
    width: 960px;
    height: 300px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 5px;
    stroke-dashoffset: 0%;
    animation: stroke-offset 5.5s infinite linear;
}

.text-copy:nth-child(1){
    stroke: #4D163D;
	animation-delay: -1;
}

.text-copy:nth-child(2){
	stroke: #840037;
	animation-delay: -2s;
}

.text-copy:nth-child(3){
	stroke: #BD0034;
	animation-delay: -3s;
}

.text-copy:nth-child(4){
	stroke: #BD0034;
	animation-delay: -4s;
}

.text-copy:nth-child(5){
	stroke: #FDB731;
	animation-delay: -5s;
}

@keyframes stroke-offset{
	100% {stroke-dashoffset: -35%;}
}

Write a comment!

Comment
Jeff | am 23. July 2017 um 17:37

That thing kills my computer!!!


GOCHILLA | am 23. July 2017 um 17:42

Hey Jeff, so I had written that you should be careful because it’s quite performance-heavy