Setting the initial position for an SVG path

Question

Setting the initial position for an SVG path

Working on a unique loading animation with 3 shapes that will scale as they follow a path. Each shape begins from a different starting point but follows a similar path. Shapes and paths were created in Illustrator and exported as SVGs. See below for an example of the largest shape and its path.

https://i.sstatic.net/T14ix.png

My challenge is finding an efficient method to set the starting point without resorting to trial and error with path points. The current starting point, shown in this image, is not ideal.

https://i.sstatic.net/uaVWi.png

.loading-wrap {
    width:200px;
    height:200px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.cir-3 {
    width:50px;
    height:50px;
    border-radius: 50%;
    background:cornflowerblue;
    position: absolute;
    top: 30%;
    left: 30%;

    offset-path: path("M147.33,108.45A49.76,49.76,0,0,0,97.57,58.69c-22.33,0-45.32,20.86-47.52,35-1.46,4.68-2.23,19.13,61,21.5-.79,14.37-43.76,9.63-61.5,6.39a49.77,49.77,0,0,0,97.78-13.09Z");
    
    animation: move 3s ease-in-out infinite reverse;
}

@keyframes move {
    100% { 
        offset-distance: 100%;
    }
}

    <div class="loading-wrap">
            <div class="cir-1"></div>
            <div class="cir-2"></div>
            <div class="cir-3"></div>
        </div>

EDIT: Check out the codepen for a live demo: https://codepen.io/CodeFreeze/pen/JjGNLRN

css svg css-animations

Answer 1

Answer №1

I have come up with a unique solution that involves incorporating 3 different animations for each div element. Each div is assigned a distinct initial offset-distance, and the animation transitions it to a different value.

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border:1px solid silver;

  position:absolute;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;

}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: 10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: 20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

@keyframes move2 {
  100% { 
    offset-distance: 110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: 120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

UPDATE

If you require the animation to play in reverse, there are two solutions:

Reverse the SVG path by using this path

M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z

instead.

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  
  position:absolute;
  border:1px solid silver;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;

}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: 10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: 20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% {     
    offset-distance: 100%;
  }
}

@keyframes move2 {
  100% {     
    offset-distance: 110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: 120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

You can use the same path but animate the divs to have negative offset distances.

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border:1px solid silver;

  position:absolute;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;

}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: -10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: -20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% { 
    offset-distance: -100%;
  }
}

@keyframes move2 {
  100% { 
    offset-distance: -110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: -120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

Answer 2

I have come up with a unique solution that involves incorporating 3 different animations for each div element. Each div is assigned a distinct initial offset-distance, and the animation transitions it to a different value.

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border:1px solid silver;

  position:absolute;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;

}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: 10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: 20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

@keyframes move2 {
  100% { 
    offset-distance: 110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: 120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

UPDATE

If you require the animation to play in reverse, there are two solutions:

Reverse the SVG path by using this path

M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z

instead.

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);  
  position:absolute;
  border:1px solid silver;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;

}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: 10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: 20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% {     
    offset-distance: 100%;
  }
}

@keyframes move2 {
  100% {     
    offset-distance: 110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: 120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76L97.78,49.8A49.77,49.77 0 0 10,62.89C17.74,66.13 60.71,70.87 61.5,56.5C-1.73,54.123 -0.96,39.68 0.5,35C2.7,20.86 25.69,0 48.02,0A49.76,49.76 0 0 197.78,49.76z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

You can use the same path but animate the divs to have negative offset distances.

.loading-wrap {
  width:100px;
  height:100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  border:1px solid silver;

  position:absolute;
}

test{position:relative;}

.test div{
  position:absolute;
  offset-path: path("M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z");  
}

.cir-1 {
  width:20px;
  height:20px;
  border-radius: 50%;
  background:rgb(119, 30, 30);
  animation: move 3s ease-in-out infinite;

}
.cir-2 {
  width:30px;
  height:30px;
  border-radius: 50%;
  background-color: blueviolet;
  offset-distance: -10%;
  animation: move2 3s ease-in-out infinite;
}
.cir-3 {
  width:50px;
  height:50px;
  border-radius: 50%;
  background:cornflowerblue;
  offset-distance: -20%;
  animation: move3 3s ease-in-out infinite;
}
@keyframes move {
  100% { 
    offset-distance: -100%;
  }
}

@keyframes move2 {
  100% { 
    offset-distance: -110%;
  }
}

@keyframes move3 {
  100% { 
    offset-distance: -120%;
  }
}




svg{position:absolute;}

<div class="loading-wrap">
<svg viewBox="0 0 100 100">
  <path d="M97.78,49.76a49.76,49.76,0,0,0,-49.76,-49.76c-22.33,0,-45.32,20.86,-47.52,35c-1.46,4.68,-2.23,19.13,61,21.5c-0.79,14.37,-43.76,9.63,-61.5,6.39a49.77,49.77,0,0,0,97.78,-13.09z" fill="none" stroke="black"/>
</svg>
<div class="test">
  <div class="cir-1"></div>
  <div class="cir-2"></div>
  <div class="cir-3"></div>
</div>
</div>

Setting the initial position for an SVG path

Answer №1

UPDATE

Similar questions

Would you like to learn how to set an auto-play video as the background in a webpage section, similar to the one found on http://www8.hp.com/in/en/home.html?

CSS - revealing additional submenu on hover

What is the method to set an element's height equivalent to the height of the entire screen?

Contrasts between space and the greater than selector

When creating a FlipCard, you may encounter the error message "The object may be null" while using the document.querySelector() method

Office Outlook Client experiencing incorrect div width

I am experiencing an issue wherein after using jquery's hover() function, the CSS :hover state is not

What is the best way to eliminate the border around an image when including a hyperlink?

Troubleshooting border styling problems on an iPad for a table

What is the best way to generate a CSS design with wavy patterns?

What is the best way to define my background image using markup language?

Breaking free of the constraints of a 100% height container, UL escapes its

Show image details on hover?

Component rendering based on conditions is not working properly when using Next.js, especially on the initial load

Can file input buttons be custom styled?

The Beginner's Guide to Mastering Ajax and Grails

Being required to design a distinct div for every article I am extracting from the API

Tips for hiding website content on larger screens

Enhancing Dropdown Functionality Using Jquery

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues