The animation in my SVG comes to a halt at a certain point

I am having an issue with my SVG element (shown below) where it stops animating after a certain period of time. I want the animation to continue indefinitely like in this jsfiddle.

.path {
    stroke-dasharray: 20;
    animation: dash 10s linear;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px"
     height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333"
     xml:space="preserve">
    <path class="path" fill="#fff" stroke="#000" stroke-width="2"
          d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-
             1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2
             1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
</svg>
htmlcsssvg

Answer №1

Don't forget to include the infinite keyword in your CSS animation. You can find more information in the documentation.

.path {
    stroke-dasharray: 20;
    animation: dash 10s linear infinite;
}

@keyframes dash {
    to {
        stroke-dashoffset: 1000;
    }
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="340px"
     height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333"
     xml:space="preserve">
    <path class="path" fill="#fff" stroke="#000" stroke-width="2"
          d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-
             1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2
             1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
    </svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Type in "Date" and select a date using your mobile device

Hey, does anyone know a good solution for adding placeholder text to an input with type="date"? I'm looking for a way to utilize the phone's built-in date selection feature on a website, rather than having users manually enter dates using the ke ...

javascripthtmlformsinput

Is it possible to utilize the onClick event while preserving the use of "this" within the function it triggers?

There is a project with specific needs that require implementation. The task involves adding points to the total score when a button is clicked, without making any changes to the provided HTML code. This requires writing unobtrusive JavaScript code by atta ...

javascripthtml

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

Creating JavaScript functions that accept three inputs and perform an operation on them

Apologies in advance if there are any silly mistakes as I am new to Javascript. I want to add "salary", "pension", and "other" together, then display the result in an input field when a button is clicked. Not sure if I have used the correct tags in my cod ...

javascripthtml

Using the power of Javascript's jQuery library: the fantastic ".on()" Event Handler

I'm encountering an issue with the Jquery Event Handler ".on()". On my home page, I have a Favorite button on each post. If the post has not been favorited: li appears inactive Event 1 is triggered If the post has been favorited: li appears act ...

javascriptjqueryhtml

Trying to replace all instances of a word in an HTML document with a <span> element, but only for <p>, <span>, and <div> tags. It shouldn't work if the parent node already contains

Here is the HTML code snippet I am working with: <div> hello world <p> the world is round <img src="domain.com/world.jpg"> </p> </div> I am looking to replace the word "world" (or any mixed case variations) with < ...

javascripthtml

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to assign default value to input field of type "time" in Chrome browser

I'm intrigued by Chrome's feature that automatically applies masking/formatting when using the type="time" attribute/value. However, I'm having trouble setting an initial value for the control. For example: <input type="ti ...

htmlgoogle-chromehtml-input

The issue of Basic Bootstrap 5 Modal triggering twice is causing a frustrating experience

My modal is almost working perfectly - it changes content based on the clicked image, but it is triggering twice in the backend and I can't figure out why! I followed Bootstrap's documentation for this, so I'm unsure where the issue lies. Al ...

javascripthtmlbootstrap-modalbootstrap-5

Loading templates dynamically within ng-repeat is a powerful feature that enhances the flexibility and

I need help loading a template dynamically while using an ng-repeat: <ul> <li ng-repeat="prop in entity" > <div ng-include src="prop.template"></div> </li> </ul> The value of prop.template is the URL of ...

htmlangularjs

JavaScript date input formatting with HTML

When using the input date picker in HTML, the default format displayed is MM-DD-YYYY. <input type="date" id="gdatum" /> Is there any method to change the mask to DD-MM-YYYY? ...

javascripthtmldatedatepicker

Creating a new row with a dropdown list upon clicking a button

I want to include a Textbox and dropdown list in a new row every time I click a button. However, I seem to be having trouble with this process. Can someone assist me in solving this issue? Thank you in advance. HTML <table> <tr> ...

javascriptjqueryhtmlbuttondrop-down-menu

Seeking guidance on utilizing JavaScript for implementing an onclick event

I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...

javascriptjqueryhtmlgoogle-analytics

How can the carousel item numbers be adjusted for proper display?

I'm currently working on an Angular app and have encountered a task related to displaying 5 cards using mdbootstrap. I want to showcase these cards in a carousel format, but with a twist - I only want the carousel functionality to be active on mobile ...

cssangularbootstrap-4mdbootstrap

Elements of <nav> within a <footer> section

I've recently started using HTML5 display elements like header, footer, and nav. While reading about the nav element in particular, I found this interesting information in the HTML5 spec: The nav element is primarily intended for major navigation b ...

htmlcss

Adjacent components

I have a query regarding the utilization of Angular. I aim to align the sentences side by side. These are two distinct components that I developed. I wish for recipe-list and recipes-details to function properly, with both statements displayed alongside ...

cssangular

Style not being applied to CSS class

When using the 'p' tag by itself, the first CSS rule works fine. However, when I apply the 'article' class with or without the 'p' tag, it does not work. Any thoughts on why that might be? Interestingly, the 'hr' tag ...

htmlcssdjango

Enhancing jQuery functionality: Ensuring newly added elements are aware of existing functions

I need assistance with my HTML table. Each row (tr) contains a value, for example 200$, and a delete button. How can I ensure that each new row added automatically knows the recent functions without having to call them every time? $(function () { $(&ap ...

javascripthtmljqueryfunctioncall

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

I am facing an issue with a div inside another div. The child div contains text, and when I apply animation to decrease the width and height, the text inside gets reset according to the new size. While I understand why this happens, I want to find a way to ...

javascriptjqueryhtmlcss