How Should I Go About Fixing This Text Animation?

user_18838313 0
Viewed 26

I am pretty new to programming in HTML and CSS and I wanted to add some cool text effects to my website and I came across this pretty cool animation on Codepen. So this is how one of my paragraphs looks like right now. I would like to use the animation on the words "Florida State University". I have made some progress but I am not sure how to properly resize it. This is how it looks. Can anyone explain how to fix this?

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }
body{
    min-height: 100vh;
    background: #141414;
    transition: 3s;
}

svg {
    display: inline-flex;
    font: 4.5em 'Montserrat';
    width: 200px;
    height: 50px;
    margin: 0 auto;
}

.text-copy {
    fill: none;
    stroke: white;
    stroke-dasharray: 6% 29%;
    stroke-width: 4px;
    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%;}
}

h1{
    color: #FAF9F6;
    font-size: 50px;
    font-weight: lighter;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    text-align: center;
}

h2, h3{
    color: #FAF9F6;
    font-size: 20px;
    font-weight: lighter;
    font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>


    <h1>Hey I'm Julian </h1>
    <h2>
        I'm an incoming CS student<br>
        at 
        <span>
            <svg viewBox="0 0 960 300">
                <symbol id="s-text">
                    <text text-anchor="middle" x="50%" y="80%">Florida State University</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>
        </span><br>
        I enjoy creating small projects, such<br>
        as this website!
    </h2>

</body>
</html>

css html
0 Answers
Related