SVG Text Animation Using HTML5 & CSS3

182

Hello, learner today In this blog post, We will be creating an SVG Text Animation Using HTML & CSS. In the past post, we have created many projects one of them is Build a Kinetic Loading using HTML & CSS3. With Out wasting time Now it is time to create an SVG Text Animation. This code is written by ANAMADLA.

SVG Text Animation Using HTML5 & CSS3

Creating a Text Animation is very easy and simple. We have to use a <div> tag with class patterns for the CSS code after that we have to give text width and height using an SVG tag. After that, we have given a text for Animation. We positioned the given text in the center.

After creating the HTML file we have to create the CSS file and link it with the HTML File. In the CSS code, there is the animation code for Animation textAnimate: 5s infinite alternate; this code says the text animation is fo 5 sec.

There are 3 types of styles to connect CSS with HTML files. Inline CSS, Internal CSS, External CSS. For Inline CSS in this, we have to write the CSS code inside the HTML code using style Attribute elements. For internal CSS we have to use the Style tag in the Head section on HTML File. we Have used this Internal CSS in The below section. Last is External CSS for this we have to create another CSS File in the same folder this

Code ByANA MAFLA
Language UsedHTML And CSS
External Link / DependenciesYes
ResponsiveYes

Preview of SVG Text Animation

In this preview, we have used internal CSS in the code. In the internal CSS we have to write the code in the head section using the Style tag. We have to write the code in <Style> CSS code </style> in the Head section in the HTML file. You can Copy and Run the preview in the Top left of the code

<!DOCTYPE html>
<!--Codingthai.com--> 
<html lang="en">
  <head>
    <title> SVG text Animation</title>
<style>
body {
   background-color: #2e4057;
   margin:0;
}

.patterns {
  height: 100vh;
}



svg text {
  font-family: Lora;
  letter-spacing: 10px;
  stroke: #ffa5d8;
  font-size: 150px;
  font-weight: 700;
  stroke-width: 3;
 
  animation: textAnimate 5s infinite alternate;
  
}

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(189, 68%, 75%)

  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(189, 68%, 75%,0%)
  }
  
}    </style>
</head>
<body>
  <div class="patterns">
  <svg width="100%" height="100%">
    <defs>
      <pattern id="polka-dots" x="0" y="0"  width="100" height="100"
               patternUnits="userSpaceOnUse">
        <circle fill="#be9ddf" cx="25" cy="25" r="3"></circle>
      </pattern>
    </defs>        
    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
 <text x="50%" y="60%"  text-anchor="middle"  >
   Gracias
 </text>
 </svg>
</div>
</body>
</html>

SVG Text Animation Using HTML & CSS [Source Code]

For Creating an SVG Text Animation Using HTML & CSS At first, you have to create two files (HTML and CSS)files with the named index.html, and style.css in the same folder and you have to link the CSS files to HTML. after that paste, the HTML code in index.html, and paste the CSS code in style.css that’s all after pasting the code.

First, you have to create an HTML file with the named index.html and paste the below HTML code on it and save it. Remember to give a .html extension to the HTML file.

<body>
  <div class="patterns">
  <svg width="100%" height="100%">
    <defs>
      <pattern id="polka-dots" x="0" y="0"  width="100" height="100"
               patternUnits="userSpaceOnUse">
        <circle fill="#be9ddf" cx="25" cy="25" r="3"></circle>
      </pattern>  
    <style>
     @import url("https://fonts.googleapis.com/css?  family=Lora:400,400i,700,700i");
    </style>
      
    </defs>
              
    <rect x="0" y="0" width="100%" height="100%" fill="url(#polka-dots)"> </rect>
   
 <text x="50%" y="60%"  text-anchor="middle"  >
   Gracias
 </text>
 </svg>
</div>
 
</body>

After pasting the HTML code, Now have to create a second CSS file with the named style.css. Paste the below code on it and save it. Again remember to give a .css extension to the CSS file.

body {
   background-color: #2e4057;
   margin:0;
}

.patterns {
  height: 100vh;
}



svg text {
  font-family: Lora;
  letter-spacing: 10px;
  stroke: #ffa5d8;
  font-size: 150px;
  font-weight: 700;
  stroke-width: 3;
 
  animation: textAnimate 5s infinite alternate;
  
}

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%;
    stroke-dashoffset:  20%;
    fill:hsl(189, 68%, 75%)

  }
  
  100% {
    stroke-dasharray: 50% 0;
    stroke-dashoffstet: -20%;
    fill: hsla(189, 68%, 75%,0%)
  }
  
}

That’s all after pasting the code now your code will be successfully run. If you get any kind of error/problem in the code just comment or contact me on social media You can see the Output of the above code Below.

Output Result

SVG Text Animation Using HTML & CSS
Written By@codingthai
Code By @ANA MAFLA

LEAVE A REPLY

Please enter your comment!
Please enter your name here