CODEWITHSUNDEEP
javascripthtmlcsssvg
Maan56
Maan56

Reputation: 33

circle svg with 8 arc rotate clockwise and anti-clockwise

Please help me on this.

I've this svg shown in this image Image and its my code here:

var arcpoint = [-31, -66, -101, -136, -171, -206, -241, -276];
colors = ["red", "green", "blue", "orange", "yellow", "purple", "pink"];
for (var i = 0; i < colors.length; i++) {
  document.querySelector("#" + colors[i]).style.strokeDashoffset = arcpoint[i];
}
svg {
  height: 100px;
  width: 100px;
}

circle {
  stroke-width: 4px;
  fill: transparent;
}

#gray {
  stroke: gray;
}

#red {
  stroke: red;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}

#green {
  stroke: green;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}

#blue {
  stroke: blue;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}

#orange {
  stroke: orange;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}

#yellow {
  stroke: yellow;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}

#purple {
  stroke: purple;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}

#pink {
  stroke: pink;
  stroke-dasharray: 35.5, 284;
  /* length of arc, circumference of circle */
}
<div id="orbit">
  <svg viewBox='0 0 100 100'>
			  <circle cx='50' cy='50' r='45' id='gray'/>
			  <circle cx='50' cy='50' r='45' id='red'/>
			  <circle cx='50' cy='50' r='45' id='green'/>
			  <circle cx='50' cy='50' r='45' id='blue'/>
			  <circle cx='50' cy='50' r='45' id='orange'/>
			  <circle cx='50' cy='50' r='45' id='yellow'/>
			  <circle cx='50' cy='50' r='45' id='purple'/>
			  <circle cx='50' cy='50' r='45' id='pink'/>
			</svg>
</div>

Now i want to rotate all arc's clockwise and anti-clockwise by clicking on a button. Problem is, my mind is stuck on how to make function and loop to change colors and rotate clockwise and anti-clockwise.

Any help would be appreciated. Thanks in advance!

Upvotes: 3

Views: 469

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101810

Maybe you want something like this?

var colors = ["gray", "red", "green", "blue", "orange", "yellow", "purple", "pink"];
var rotateOffset = 0;

function setColours()
{
  for (var i = 0; i < colors.length; i++) {
    var arcIndex = (i + rotateOffset) % colors.length;
    document.querySelector("#" + colors[i]).style.strokeDashoffset = (arcIndex ) * -35.3;
  }
}

// Set initial colours
setColours();
    

// Button handlers
document.getElementById('left').addEventListener("click", function() {
  rotateOffset += (colors.length - 1);
  setColours();
});

document.getElementById('right').addEventListener("click", function() {
  rotateOffset++
  setColours();
});
svg {
  height: 100px;
  width: 100px;
}
circle {
  stroke-width: 4px;
  fill: transparent;
}
#gray{
  stroke: gray;
}
#red{
  stroke: red;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#green{
  stroke: green;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#blue{
  stroke: blue;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#orange{
  stroke: orange;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#yellow{
  stroke: yellow;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#purple{
  stroke: purple;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#pink{
  stroke: pink;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
<div id="orbit" >
  <svg viewBox='0 0 100 100' >
    <circle cx='50' cy='50' r='45' id='gray'/>
    <circle cx='50' cy='50' r='45' id='red'/>
    <circle cx='50' cy='50' r='45' id='green'/>
    <circle cx='50' cy='50' r='45' id='blue'/>
    <circle cx='50' cy='50' r='45' id='orange'/>
    <circle cx='50' cy='50' r='45' id='yellow'/>
    <circle cx='50' cy='50' r='45' id='purple'/>
    <circle cx='50' cy='50' r='45' id='pink'/>
  </svg>
</div>

<button id="left">left</button>
<button id="right">right</button>

Upvotes: 1

Alvaro Men&#233;ndez
Alvaro Men&#233;ndez

Reputation: 9012

You can easily use a css animation and then just add the class to your svg on a click function. Like this:

var arcpoint = [-31, -66, -101, -136, -171, -206, -241, -276];
colors = ["red", "green", "blue", "orange", "yellow", "purple", "pink"];
for (var i = 0; i < colors.length; i++) {
        document.querySelector("#" + colors[i]).style.strokeDashoffset = arcpoint[i];
    }
    
    
$('.left').click(function(){
    $("#orbit svg").attr("class", "rotating-left");
});
$('.right').click(function(){
    $("#orbit svg").attr("class", "rotating-right");
});  
svg {
  height: 100px;
  width: 100px;
}
circle {
  stroke-width: 4px;
  fill: transparent;
}
#gray{
  stroke: gray;
}
#red{
  stroke: red;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#green{
  stroke: green;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#blue{
  stroke: blue;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#orange{
  stroke: orange;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#yellow{
  stroke: yellow;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#purple{
  stroke: purple;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}
#pink{
  stroke: pink;
  stroke-dasharray: 35.5, 284; /* length of arc, circumference of circle */
}

.rotating-right {
  
  animation: rotating-right 2s linear infinite;
}
@keyframes rotating-right {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating-left {
  
  animation: rotating-left 2s linear infinite;
}
@keyframes rotating-left {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="orbit" >
      <svg viewBox='0 0 100 100' >
          <circle cx='50' cy='50' r='45' id='gray'/>
          <circle cx='50' cy='50' r='45' id='red'/>
          <circle cx='50' cy='50' r='45' id='green'/>
          <circle cx='50' cy='50' r='45' id='blue'/>
          <circle cx='50' cy='50' r='45' id='orange'/>
          <circle cx='50' cy='50' r='45' id='yellow'/>
          <circle cx='50' cy='50' r='45' id='purple'/>
          <circle cx='50' cy='50' r='45' id='pink'/>
        </svg>
    </div>
    <button class="left">left</button>
    <button class="right">right</button>

Notice I used $("#orbit svg").attr("class", "rotating-right"); as you can't use addClass on a svg with jQuery

Upvotes: 2

Related Questions