Animated Text using CSS
Animated Text using CSS

As a web developer, you know that CSS (Cascading Style Sheets) is a powerful tool for styling and animating web content. With CSS, you can change the color, size, and layout of HTML elements, as well as add transitions and animations to create dynamic and engaging websites.

Also Read – Color picker in HTML easy way

One of the most popular ways to use CSS is to animate text. By adding transitions and transformations with SVG-to-text elements, you can create eye-catching and attention-grabbing effects that will make your website stand out.

In this post, we’ll take a look at how to create animated text with SVG using CSS.

Here is the HTML

  <div class="patterns">
    <svg width="100%" height="100%">
          <circle fill="#be9ddf" cx="25" cy="25" r="3"></circle>
          @import url("  family=Lora:400,400i,700,700i");


      <text x="50%" y="60%" text-anchor="middle">RP</text>

In the above code, we are using <text> an element to create SVG text, so that we can animate it.

Now we should animate it

Here is the CSS

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%);

Here in the CSS part, we are using @keyframes to create a stroke animation. The @keyframes is an at-rule used to create animations in CSS.

That is it for this post, Please share this post

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply