Troubleshooting issues with SVG infinite animation functionality

I have been working on an SVG infinity animation, but it's not running smoothly. It gets stuck in the middle and then flows off. I tried adjusting nodes in Illustrator for the SVG, but the issue persists. Can someone please review my code and assist me?

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.circ{fill:#000000; }
.st0{fill:#cccccc;}
.st1{fill:#cccccc;}
.st2{fill:none;stroke:#cccccc;stroke-width:6;stroke-miterlimit:10;}
<div class="svg-main">
<svg version="1.1" id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="300px" height="200px" viewBox="0 0 685 310" style="enable-background:new 0 0 671.1 304.4;" xml:space="preserve"
>
<g class="svg-col">
<path class="sd1" id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
<animate attributeName="stroke-dasharray" attributeType="XML"
    from="1900, 1700"  to="200 1700"
    begin="0s" dur="3s"
    repeatCount="indefinite"/>
<animate attributeName="stroke-dashoffset" attributeType="XML"
    from="-1700"  to="-3600"
    begin="0s" dur="3s"
    repeatCount="indefinite"/>  
</path>

<circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
<animateMotion
xlink:href="#plug"
  dur="3s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"    
keySplines="0.42, 0, 0.58, 1">
<mpath xlink:href="#loop-normal"/>
</animateMotion> 
</g>
</svg>
 
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="svg-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="300px" height="200px" viewBox="0 0 685 310" style="enable-background:new 0 0 685 310;" xml:space="preserve"> 
<path class="st2" d="M159.1,5.8C76.7,5.8,9.9,72.6,9.9,155s66.8,149.2,149.2,149.2S342.5,155,342.5,155S241.5,5.8,159.1,5.8z
 M525.9,5.8C443.5,5.8,342.5,155,342.5,155s101,149.2,183.4,149.2S675.1,237.4,675.1,155S608.3,5.8,525.9,5.8z"/>
</svg>
</div>

cssanimationsvgcss-animationssvg-animate

Answer №1

To achieve smooth movement in stroke-dashoffset animations, the first step is to accurately determine the length of the path:

document.querySelector('#loop-normal').getTotalLength() // approximately 1910
  1. Avoid animating stroke-dasharray. Instead, divide the total length of the path into one dash and one gap: stroke-dasharray="200 1710". (Any other proportional values can be used as long as they add up to 1910.)
  2. Ensure your <animateMotion> includes the keyPoints attribute set to "0;1".
  3. Defining keySplines will have no effect unless you specify calcMode="spline". Omit this if not needed.

Simplify the process by defining the path once, positioning both the background and animated use elements within the same SVG, specifying the correct path length in the stroke-dashoffset animation for seamless movement, and removing any unused CSS rules.

.svg-main {
    width: 700px;
    margin: 30px auto;
    position: relative;
}
svg#svga {
    position: absolute;
    top: 0;
    left: auto;
    bottom: auto;
    right: auto;
}

.st2{fill:none;stroke:#cccccc;stroke-width:6;}
.sd1{fill:none;stroke:#000000; stroke-width:6;stroke-linecap:round;}
.circ{fill:#000000; }
<div class="svg-main">
<svg id="svga" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="300px" height="200px" viewBox="0 0 685 310">
  <g class="st2">
<path id="loop-normal" d="M343.6,156.5c11,15.9,104.6,147.2,181.9,147.6c0.1,0,0.8,0,1,0c82.1-0.3,148.6-67,148.6-149.2
c0-82.4-66.8-149.2-149.2-149.2c-77.2,0-170.8,131-182.2,147.5c-0.8,1.1-1.6,2.3-2.1,3.1c-10.6,15.3-104.8,147.8-182.4,147.8
C76.7,304.2,9.9,237.4,9.9,155S76.7,5.8,159.1,5.8c77.2,0,170.7,130.9,182.2,147.5C342.1,154.4,342.9,155.6,343.6,156.5z"/>
  </g>
<use class="sd1" stroke-dasharray="200 1710" xlink:href="#loop-normal">
<animate attributeName="stroke-dashoffset"
    from="200"  to="-1710"
    begin="0s" dur="3s"
    repeatCount="indefinite"/>  
</use>

<circle id="plug" class="circ" cx="0" cy="0" r="7"/> 
<animateMotion
xlink:href="#plug"
  dur="3s"
rotate="auto"
repeatCount="indefinite"
calcMode="linear"
keyTimes="0;1"    
keyPoints="0;1">
<mpath xlink:href="#loop-normal"/>
</animateMotion> 
</svg>
</div>

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

Enhancing image clips using jQuery techniques

Could someone help me figure out why the image clip value isn't changing when I move the range slider in the code below? $('#myRange').on('input', function() { var nn = $(this).val(); $("img").css({ 'clip': ...

javascriptjquerycss

Initiate activity when link is clicked

I am currently in the process of developing a website that includes 5 divs. <div class="one"></div> <div class="two"></div> <div class="three"></div> <div class="four"></div> <div class="five"></div ...

javascriptjqueryhtmlcss

Ways to keep images in line instead of moving to a new line

http://jsfiddle.net/KuFbH/ I'm attempting to have all four images displayed on a single line without wrapping to the next line. Strangely, I can't seem to achieve this even though zooming out shows it exactly as desired. How can I make this work ...

htmlcss

SVG fails to render in the browser upon page initialization

I am experiencing difficulties with rendering SVG icons in Google Chrome and other browsers when added through CSS on my website, specifically in a custom dropdown background. Here is a sample of the SVG code: background: #fff url("data:image/svg+xml ...

javascripthtmlcss

The function in jQuery that can be used to hide a <div> when clicked

I am facing a problem with my jQuery code that is supposed to remove/hide a specific div. Despite checking various examples, I can't seem to make it work properly. This issue arises in the context of jQuery on Drupal 7. The live site where this proble ...

javascriptjqueryhtmlcss

Getting images using index in Selenium

When it comes to extracting images from HTML, we usually rely on XPath, CSS selectors, or unique IDs. However, there are cases where images lack any distinguishable attributes. The structure of the HTML is as follows: <div id="altImages" class="a-fixed ...

javacssseleniumxpath

The tbody element fails to occupy the full width of the table, leaving the content exposed

HTML: <body class="header"> <div class="container-fluid"> <div class="container d-flex justify-content-center"> <p class="display-3">Secure Vault</p> < ...

htmlcssbootstrap-5

Adaptable Image Functionality in Jquery Carousel

I've encountered an issue with my images within a jquery slider. While the slider itself is functioning properly, I am facing a couple of challenges. Initially, I aimed to make the images responsive, but upon removing the height property, the content ...

javascriptjqueryhtmlcss

How to create an Angular Material data table with scrolling rows and a fixed header

Visit Stack Blitz Demo I'm currently facing a challenge with getting my code to function as required. In the demonstration provided, there is a table where clicking the add button inserts a new row. Once the table reaches a certain height (let' ...

htmlcssangularangular-material

Guide for changing the background color exclusively in the final row of a dynamically-generated HTML table with PHP

<table width="100%"> <tr> <? $count=0; $i=1; foreach($gallery as $key => $list1) { $count++; ?> <td> <img src='<?echo base ...

phphtmlcss

Inserting pictures onto Bootstrap SVGs

Currently working on a website using Bootstrap 5 and incorporating an element from BS5 templates: <div class="col" data-aos="fade-up" data-aos-delay="200"> <div class="card shadow-sm"> ...

htmlcsstwitter-bootstrapsvgbootstrap-5

The automatic CSS cookie bar functions smoothly, but could benefit from a small delay

I successfully added a pure CSS cookie bar to my website, but there is a slight issue. When entering the site, the cookie bar is the first thing that appears, and then it goes up and down before settling at the end. How can I make my cookie bar only go do ...

javascriptjqueryhtmlcssnavbar

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

htmlcsslayoutcss-float

Setting a card to the center within a col-md in Bootstrap 4: Step-by-step guide

I'm looking to position this card in the middle, not centered. How can I achieve that? I've already attempted using my-auto, but it didn't work at all. Please take a look at my code and suggest any necessary changes. Thank you! https://i.s ...

htmlcsstwitter-bootstrapbootstrap-4

Positioning the subheading "perfectly beneath the main heading" for a clean and professional look

I'm feeling a bit lost when it comes to tasks like this. While I can easily design an entire website using html and css, I start to question my approach when faced with challenges like these. Could someone offer some guidance? My goal is to have a H1 ...

htmlcsslayout

How can I make the footer on my webpage have a white background?

My goal is to create a white div that spans from point (A) to point (B) on the page, just like in the image. I aim for it to stretch all the way down to cover the entire browser without showing any gray background underneath, even when the page is scrolled ...

javascriptjqueryhtmlcss

What is the best way to align div elements side by side while using a flex direction of column?

I need help aligning the text input next to the h1 tag, inline, and then displaying it as a flex-direction of column. Currently, all inputs are being set in a line with the h1 on top which is not the intended layout. Here is an illustration: https://i.sst ...

htmlcssreactjs

How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow. If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this functi ...

javascriptjqueryhtmlcssinternet-explorer

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

htmlcssresponsive-designnavigation

What are the best solutions for resolving inconsistent column spacing within a bootstrap accordion card header?

I am experiencing a spacing issue with my Bootstrap 4 accordion. The issue arises when the text in the second column of each card header row increases in length, causing inconsistent spacing between the columns. This inconsistency is particularly noticea ...

htmlcssbootstrap-4accordion