How to stop the animation and freeze the image when pressing the `Stop` button

I created a layout of the working planetary gear.

When you click on the Stop button, the animation of the rotation of the gears should stop and the image “freeze”.

But in reality the image returns to its original state. This can be seen on the yellow markers on the gears.

Below is the code I’ve made at the moment:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

Question:

How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state.

I could not do it. I will be grateful for any solution CSS,JS, SVG or a combination of them.

edited Feb 25 at 8:18

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

2

You can find a CSS solution here But need to change animation from SMIL style to CSS style

– Duannx
Feb 25 at 7:53

@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision

– Alexandr_TT
Feb 25 at 7:59

1

This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.

– enxaneta
Feb 25 at 8:32

@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.

– Alexandr_TT
Feb 25 at 8:39

add a comment |

I created a layout of the working planetary gear.

When you click on the Stop button, the animation of the rotation of the gears should stop and the image “freeze”.

But in reality the image returns to its original state. This can be seen on the yellow markers on the gears.

Below is the code I’ve made at the moment:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

Question:

I could not do it. I will be grateful for any solution CSS,JS, SVG or a combination of them.

edited Feb 25 at 8:18

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

2

You can find a CSS solution here But need to change animation from SMIL style to CSS style

– Duannx
Feb 25 at 7:53

@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision

– Alexandr_TT
Feb 25 at 7:59

1

This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.

– enxaneta
Feb 25 at 8:32

@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.

– Alexandr_TT
Feb 25 at 8:39

add a comment |

I created a layout of the working planetary gear.

When you click on the Stop button, the animation of the rotation of the gears should stop and the image “freeze”.

But in reality the image returns to its original state. This can be seen on the yellow markers on the gears.

Below is the code I’ve made at the moment:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

Question:

I could not do it. I will be grateful for any solution CSS,JS, SVG or a combination of them.

edited Feb 25 at 8:18

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

I created a layout of the working planetary gear.

When you click on the Stop button, the animation of the rotation of the gears should stop and the image “freeze”.

But in reality the image returns to its original state. This can be seen on the yellow markers on the gears.

Below is the code I’ve made at the moment:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

Question:

I could not do it. I will be grateful for any solution CSS,JS, SVG or a combination of them.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="gO1.click" end="stop1.click" dur="14s" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" begin="gO1.click" end="stop1.click" dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" begin="gO1.click" end="stop1.click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

javascript css animation svg

edited Feb 25 at 8:18

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

edited Feb 25 at 8:18

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

edited Feb 25 at 8:18

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

asked Feb 25 at 6:27

Alexandr_TT

2,1682521

2

You can find a CSS solution here But need to change animation from SMIL style to CSS style

– Duannx
Feb 25 at 7:53

@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision

– Alexandr_TT
Feb 25 at 7:59

1

This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.

– enxaneta
Feb 25 at 8:32

@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.

– Alexandr_TT
Feb 25 at 8:39

add a comment |

2

You can find a CSS solution here But need to change animation from SMIL style to CSS style

– Duannx
Feb 25 at 7:53

@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision

– Alexandr_TT
Feb 25 at 7:59

1

This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.

– enxaneta
Feb 25 at 8:32

@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.

– Alexandr_TT
Feb 25 at 8:39

You can find a CSS solution here But need to change animation from SMIL style to CSS style

– Duannx
Feb 25 at 7:53

@Duannx Thank you for the useful link. I tried this before, but it didn’t work. Please publish your decision

– Alexandr_TT
Feb 25 at 7:59

This is what I found in Using SVG with CSS3 and HTML5: Vector Graphics for Web Design: Speaking of limitations of SMIL animations: "You cannot easily pause individual animation effects in process". My interpretation: you'll need javascript to deal with it.

– enxaneta
Feb 25 at 8:32

@enxaneta Thank you, I have this wonderful book that I read. I hope to get your great JS solution.

– Alexandr_TT
Feb 25 at 8:39

add a comment |

4 Answers
4

active

oldest

votes

I have made some changes in the snippet. Please have a look and let me know if this is what you want.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

edited Feb 25 at 10:44

answered Feb 25 at 7:07

Kumar Aman

2365

3

Sorry, but the terms of the decision were: "How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state "

– Alexandr_TT
Feb 25 at 7:19

1

I have updated the snippet to fit the requirement

– Kumar Aman
Feb 25 at 10:46

At first glance, everything is fine and I like it. I will study your decision

– Alexandr_TT
Feb 25 at 10:55

2

better add some explanation instead of simply saying I have edited .. so we can have a clear idea how it works and probably link to some useful ressources

– Temani Afif
Feb 25 at 13:56

@Kumar Aman Thank you. Your decision suited me more than others. So it completely answers my question. Please add comments explaining the code.

– Alexandr_TT
Feb 25 at 14:10

|
show 1 more comment

Here is a trick/hack using CSS. The idea is to rely on transition to have the rotation then you play with the duration to create the illusion of freezing. By setting a big value you make the transition very very slow thus it will be stopped for us.

You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

UPDATE

The above one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

edited Feb 25 at 11:22

answered Feb 25 at 9:10

Temani Afif

76.8k94490

Good answer, but 2 of the gears in your snippet do not rotate

– souzan
Feb 25 at 9:14

@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome

– Temani Afif
Feb 25 at 9:15

1

@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?

– Temani Afif
Feb 25 at 9:34

2

@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p

– Temani Afif
Feb 25 at 9:53

1

@Alexandr_T there is no issue, you have to select one solution that is the best for you and I am fine if it's not mine ;) the purpose of SO is to have different answers providing different method for future reader and all of them will get reward later with upvotes if they are good (so please don't serial upvote me instead)

– Temani Afif
Feb 25 at 13:54

|
show 8 more comments

This is my solution, very similar to the @Duannx solution. However, when it comes to cogs I like to see them fitting. (no overlapping teeth). So what I've made was trying to recalculate the size of the teeth. I hope you will like it.

The animation starts and begins on clicking the svg canvas

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

edited Feb 25 at 12:14

answered Feb 25 at 11:56

enxaneta

8,7522519

1

I have a difficult choice. One solution is better than another. But, unfortunately, I can not select multiple solutions at the same time. Really gear drive looks great. The teeth while rotating the gears are perfect for each other. The implementation of the code at a high level. But unfortunately another solution suits me better.

– Alexandr_TT
Feb 25 at 13:59

add a comment |

Here is the simple code snipet i create to simulate the idea. All you need is

Change SMIL style to CSS style (Don't use animateTransform. Use css transform propertive).

Toggle animation-play-state when click the button

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

answered Feb 25 at 10:32

Duannx

3,4731335

Try to transfer your decision to an example from my question. (+)

– Alexandr_TT
Feb 25 at 10:40

1

@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself

– Duannx
Feb 25 at 10:59

1

@Alexandr_T you basically need to do the same as I did for transition ... you apply the animation to each element, you adjust the origin and the different values.

– Temani Afif
Feb 25 at 11:16

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54860601%2fhow-to-stop-the-animation-and-freeze-the-image-when-pressing-the-stop-button%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

I have made some changes in the snippet. Please have a look and let me know if this is what you want.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

edited Feb 25 at 10:44

answered Feb 25 at 7:07

Kumar Aman

2365

3

Sorry, but the terms of the decision were: "How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state "

– Alexandr_TT
Feb 25 at 7:19

1

I have updated the snippet to fit the requirement

– Kumar Aman
Feb 25 at 10:46

At first glance, everything is fine and I like it. I will study your decision

– Alexandr_TT
Feb 25 at 10:55

2

better add some explanation instead of simply saying I have edited .. so we can have a clear idea how it works and probably link to some useful ressources

– Temani Afif
Feb 25 at 13:56

@Kumar Aman Thank you. Your decision suited me more than others. So it completely answers my question. Please add comments explaining the code.

– Alexandr_TT
Feb 25 at 14:10

|
show 1 more comment

I have made some changes in the snippet. Please have a look and let me know if this is what you want.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

edited Feb 25 at 10:44

answered Feb 25 at 7:07

Kumar Aman

2365

3

Sorry, but the terms of the decision were: "How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state "

– Alexandr_TT
Feb 25 at 7:19

1

I have updated the snippet to fit the requirement

– Kumar Aman
Feb 25 at 10:46

At first glance, everything is fine and I like it. I will study your decision

– Alexandr_TT
Feb 25 at 10:55

2

better add some explanation instead of simply saying I have edited .. so we can have a clear idea how it works and probably link to some useful ressources

– Temani Afif
Feb 25 at 13:56

@Kumar Aman Thank you. Your decision suited me more than others. So it completely answers my question. Please add comments explaining the code.

– Alexandr_TT
Feb 25 at 14:10

|
show 1 more comment

I have made some changes in the snippet. Please have a look and let me know if this is what you want.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

edited Feb 25 at 10:44

answered Feb 25 at 7:07

Kumar Aman

2365

I have made some changes in the snippet. Please have a look and let me know if this is what you want.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" onload='Init(evt)' id = "SVGRoot">

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="14s" id = "innerCircle" begin="click" repeatCount="indefinite" />

        <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />





        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 188 100" to="-360 188 100" id = "smallerCircle" begin="click"  dur="3.5s" repeatCount="indefinite" />

        <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

        <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="-360 100 100" id = "outerCircle" begin="click" dur="28s" repeatCount="indefinite" />



        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1" onclick='Play()'>

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1" onclick='Pause()'>

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

<script>

  var SVGDocument = null;

  var SVGRoot = null;

  var pauseButton = null;

  var playButton = null;

  var innerCircle = null;

  var outerCircle = null;

  var smallerCircle = null;



  function Init(evt)

  {  

     SVGDocument = evt.target.ownerDocument;

     SVGRoot = SVGDocument.getElementById('SVGRoot')



     pauseButton = SVGDocument.getElementById('stop1');

     playButton = SVGDocument.getElementById('gO1');

     innerCircle = SVGDocument.getElementById('innerCircle');;

     outerCircle = SVGDocument.getElementById('outerCircle');;

     smallerCircle = SVGDocument.getElementById('smallerCircle');;

  };



  function Pause()

  {  

     SVGRoot.pauseAnimations();

  };



  function Play()

  {

     if(SVGRoot.animationsPaused()){

        SVGRoot.unpauseAnimations();

     }

     else{

         innerCircle.beginElement();

         outerCircle.beginElement();

         smallerCircle.beginElement();

     }

  };



   </script>

edited Feb 25 at 10:44

answered Feb 25 at 7:07

Kumar Aman

2365

edited Feb 25 at 10:44

answered Feb 25 at 7:07

Kumar Aman

2365

answered Feb 25 at 7:07

Kumar Aman

2365

answered Feb 25 at 7:07

Kumar Aman

2365

3

Sorry, but the terms of the decision were: "How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state "

– Alexandr_TT
Feb 25 at 7:19

1

I have updated the snippet to fit the requirement

– Kumar Aman
Feb 25 at 10:46

At first glance, everything is fine and I like it. I will study your decision

– Alexandr_TT
Feb 25 at 10:55

2

better add some explanation instead of simply saying I have edited .. so we can have a clear idea how it works and probably link to some useful ressources

– Temani Afif
Feb 25 at 13:56

@Kumar Aman Thank you. Your decision suited me more than others. So it completely answers my question. Please add comments explaining the code.

– Alexandr_TT
Feb 25 at 14:10

|
show 1 more comment

3

Sorry, but the terms of the decision were: "How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state "

– Alexandr_TT
Feb 25 at 7:19

1

I have updated the snippet to fit the requirement

– Kumar Aman
Feb 25 at 10:46

At first glance, everything is fine and I like it. I will study your decision

– Alexandr_TT
Feb 25 at 10:55

2

better add some explanation instead of simply saying I have edited .. so we can have a clear idea how it works and probably link to some useful ressources

– Temani Afif
Feb 25 at 13:56

@Kumar Aman Thank you. Your decision suited me more than others. So it completely answers my question. Please add comments explaining the code.

– Alexandr_TT
Feb 25 at 14:10

Sorry, but the terms of the decision were: "How to make it so that when you click the Stop button the image stops in the current state and the next time you press the GO button, the animation does not start from the beginning, but from the locked state "

– Alexandr_TT
Feb 25 at 7:19

I have updated the snippet to fit the requirement

– Kumar Aman
Feb 25 at 10:46

At first glance, everything is fine and I like it. I will study your decision

– Alexandr_TT
Feb 25 at 10:55

better add some explanation instead of simply saying I have edited .. so we can have a clear idea how it works and probably link to some useful ressources

– Temani Afif
Feb 25 at 13:56

@Kumar Aman Thank you. Your decision suited me more than others. So it completely answers my question. Please add comments explaining the code.

– Alexandr_TT
Feb 25 at 14:10

|
show 1 more comment

You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

UPDATE

The above one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

edited Feb 25 at 11:22

answered Feb 25 at 9:10

Temani Afif

76.8k94490

Good answer, but 2 of the gears in your snippet do not rotate

– souzan
Feb 25 at 9:14

@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome

– Temani Afif
Feb 25 at 9:15

1

@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?

– Temani Afif
Feb 25 at 9:34

2

@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p

– Temani Afif
Feb 25 at 9:53

1

@Alexandr_T there is no issue, you have to select one solution that is the best for you and I am fine if it's not mine ;) the purpose of SO is to have different answers providing different method for future reader and all of them will get reward later with upvotes if they are good (so please don't serial upvote me instead)

– Temani Afif
Feb 25 at 13:54

|
show 8 more comments

You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

UPDATE

The above one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

edited Feb 25 at 11:22

answered Feb 25 at 9:10

Temani Afif

76.8k94490

Good answer, but 2 of the gears in your snippet do not rotate

– souzan
Feb 25 at 9:14

@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome

– Temani Afif
Feb 25 at 9:15

1

@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?

– Temani Afif
Feb 25 at 9:34

2

@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p

– Temani Afif
Feb 25 at 9:53

1

@Alexandr_T there is no issue, you have to select one solution that is the best for you and I am fine if it's not mine ;) the purpose of SO is to have different answers providing different method for future reader and all of them will get reward later with upvotes if they are good (so please don't serial upvote me instead)

– Temani Afif
Feb 25 at 13:54

|
show 8 more comments

You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

UPDATE

The above one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

edited Feb 25 at 11:22

answered Feb 25 at 9:10

Temani Afif

76.8k94490

You have to adjust the value of transtion/rotation for each wheel to have the speed you want. You also need to make the values bigger enough so the user never reach the end of the transition.

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

UPDATE

The above one seems to work fine only on chrome so here another one where I had to duplicate the code of the small wheel so it works fine on Firefox too:

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

$('#gO1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,#col-small,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

#col-small,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg);

  transition:1400s linear;

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

#col-small.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear;

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

#col-small.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g id="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g>

      <use xlink:href="#col-small" transform="rotate(240 100 100)" />

      <use xlink:href="#col-small" transform="rotate(120 100 100)" />

    </g>



    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

$('#gO1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate').removeClass('rotate-1');

})



$('#stop1').click(function() {

    $('#wheel,.col-small g,#planetar').addClass('rotate-1').removeClass('rotate');

})

#wheel,

.col-small g,

#planetar{

  transform-box:fill-box;

  transform-origin:center;

}

#wheel.rotate{

  transform:rotate(36000deg); /*360 x 100*/

  transition:1400s linear; /*14s x 100*/

}

#planetar.rotate {

  transform:rotate(-36000deg);

  transition:2800s linear;

}

.col-small g.rotate {

  transform:rotate(-36000deg);

  transition:350s linear;

}



#wheel.rotate-1{

  transform:rotate(36001deg); /*we need a slight change to re-trigger the transition*/

  transition:140000s linear; /*14s x 100 x 100*/

}

#planetar.rotate-1 {

  transform:rotate(-36001deg);

  transition:280000s linear;

}

.col-small g.rotate-1 {

 transform:rotate(-36001deg);

  transition:35000s linear;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >

  <title>animation planetary mechanism</title>

  <defs>

    <marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="14" height="10" rx="2" fill="#22211D" />

    </marker>

    <line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;

				 marker-end: url(#MarkerArrow);

				 marker-start: url(#MarkerArrow);

			   stroke:#22211D; stroke-width:6; ">

    </line>

    <marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">

      <rect width="7" height="3.5" rx="2" fill="#22211D" />

    </marker>

    <line id="line-s" x1="175" y1="100" x2="202" y2="100" style=" fill:none;

			 marker-end: url(#MarkerArrow-s1);

			 marker-start: url(#MarkerArrow-s);

		   stroke:#22211D; stroke-width:2; ">



    </line>

    <linearGradient id="vertical" x2="0%" y2="100%" spreadMethod="pad">

      <stop offset="0%" stop-color="powderblue" />

      <stop offset="100%" stop-color="lightgreen" />

    </linearGradient>



  </defs>

  <rect width="100%" height="100%" fill="url(#vertical)" />

  <g transform="translate(90,50)">



    <g id="wheel">

      <g>

       <use xlink:href="#line1" transform="rotate(0 100 100)" />

        <use xlink:href="#line1" transform="rotate(120 100 100)" />

        <use xlink:href="#line1" transform="rotate(240 100 100)" />



        <circle cx="100" cy="100" r="15" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="100" cy="100" r="50" style="stroke: #22211D; fill:none;   stroke-width: 15px;" />

        <circle cx="100" cy="100" r="60" style="stroke: #22211D; fill:none; stroke-dasharray: 5 6;  stroke-width: 10px;" />

        <circle cx="150" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small">



      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

    </g>

    

    <g id="planetar">

      <g>

       

        <circle cx="100" cy="100" r="116" style="stroke: #22211D; fill:none;   stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="100" cy="100" r="124" style="stroke: #22211D; fill:none;   stroke-width: 12px;" />

        <circle cx="224" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />

      </g>

    </g>



    <g class="col-small" transform="rotate(240 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

     <g class="col-small" transform="rotate(120 100 100)">

      <g>

       <use xlink:href="#line-s" transform="rotate(0 188 100)" />

        <use xlink:href="#line-s" transform="rotate(120 188 100)" />

        <use xlink:href="#line-s" transform="rotate(240 188 100)" />



        <circle cx="188" cy="100" r="8" style="stroke: #22211D; fill:none;   stroke-width: 4px;" />

        <circle cx="188" cy="100" r="18" style="stroke: #22211D; fill:none;   stroke-width: 7px;" />

        <circle cx="188" cy="100" r="24" style="stroke: #22211D; fill:none; stroke-dasharray: 5 5;  stroke-width: 10px;" />

        <circle cx="206" cy="100" r="3" style="stroke: #22211D; fill:yellow; " />



      </g>

     </g>

  

    <g transform="translate(-10,160)">

      <g id="gO1">

        <rect x="45" y="85" height="22" width="60" rx="5" fill="#0080B8" stroke="dodgerblue" />

        <text x="62" y="102" font-size="16" fill="yellow">GO</text>

      </g>

      <g id="stop1">

        <rect x="110" y="85" height="22" width="60" rx="5" fill="crimson" stroke="red" />

        <text x="120" y="102" font-size="16" fill="yellow">STOP</text>

      </g>

    </g>



  </g>

</svg>

edited Feb 25 at 11:22

answered Feb 25 at 9:10

Temani Afif

76.8k94490

edited Feb 25 at 11:22

answered Feb 25 at 9:10

Temani Afif

76.8k94490

answered Feb 25 at 9:10

Temani Afif

76.8k94490

answered Feb 25 at 9:10

Temani Afif

76.8k94490

Good answer, but 2 of the gears in your snippet do not rotate

– souzan
Feb 25 at 9:14

@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome

– Temani Afif
Feb 25 at 9:15

1

@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?

– Temani Afif
Feb 25 at 9:34

2

@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p

– Temani Afif
Feb 25 at 9:53

1

@Alexandr_T there is no issue, you have to select one solution that is the best for you and I am fine if it's not mine ;) the purpose of SO is to have different answers providing different method for future reader and all of them will get reward later with upvotes if they are good (so please don't serial upvote me instead)

– Temani Afif
Feb 25 at 13:54

|
show 8 more comments

Good answer, but 2 of the gears in your snippet do not rotate

– souzan
Feb 25 at 9:14

@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome

– Temani Afif
Feb 25 at 9:15

1

@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?

– Temani Afif
Feb 25 at 9:34

2

@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p

– Temani Afif
Feb 25 at 9:53

1

@Alexandr_T there is no issue, you have to select one solution that is the best for you and I am fine if it's not mine ;) the purpose of SO is to have different answers providing different method for future reader and all of them will get reward later with upvotes if they are good (so please don't serial upvote me instead)

– Temani Afif
Feb 25 at 13:54

Good answer, but 2 of the gears in your snippet do not rotate

– souzan
Feb 25 at 9:14

@souzan Firefox I suppose? .. always forget to test there, it's fine on Chrome

– Temani Afif
Feb 25 at 9:15

@Alexandr_T yes I didn't spend a lot of time to fix the synchronization but it's only a matter of adjust, you need to find the correct value to use with the transtion and rotation to increase/decrease the speed of each rotation and obtain the needed effect (will edit later if I find some times). But how the appearance is broken?

– Temani Afif
Feb 25 at 9:34

@Alexandr_T it's fixed. I was hypnotized by the rotation and didn't even notice this :p

– Temani Afif
Feb 25 at 9:53

@Alexandr_T there is no issue, you have to select one solution that is the best for you and I am fine if it's not mine ;) the purpose of SO is to have different answers providing different method for future reader and all of them will get reward later with upvotes if they are good (so please don't serial upvote me instead)

– Temani Afif
Feb 25 at 13:54

|
show 8 more comments

The animation starts and begins on clicking the svg canvas

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

edited Feb 25 at 12:14

answered Feb 25 at 11:56

enxaneta

8,7522519

1

I have a difficult choice. One solution is better than another. But, unfortunately, I can not select multiple solutions at the same time. Really gear drive looks great. The teeth while rotating the gears are perfect for each other. The implementation of the code at a high level. But unfortunately another solution suits me better.

– Alexandr_TT
Feb 25 at 13:59

add a comment |

The animation starts and begins on clicking the svg canvas

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

edited Feb 25 at 12:14

answered Feb 25 at 11:56

enxaneta

8,7522519

1

I have a difficult choice. One solution is better than another. But, unfortunately, I can not select multiple solutions at the same time. Really gear drive looks great. The teeth while rotating the gears are perfect for each other. The implementation of the code at a high level. But unfortunately another solution suits me better.

– Alexandr_TT
Feb 25 at 13:59

add a comment |

The animation starts and begins on clicking the svg canvas

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

edited Feb 25 at 12:14

answered Feb 25 at 11:56

enxaneta

8,7522519

The animation starts and begins on clicking the svg canvas

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

c1r = 140;//the radius of the _c1 circle

c1perim = 2*Math.PI * c1r;// the perimeter of the _c1 circle



let sda = c1perim / 120;//sda = value for stroke-dasharray

// a css variable used to set the value for stroke-dasharray

cogs.style.setProperty("--foo", sda);

// the perimeter of _c2. This is the smaller circle used for the 3 identical cogs

c2perim = c1perim / Math.PI;

c2r = c1r/4; //the radius of the c2 circle

// the value  of the cx attribute of the _c2

c2cx = 150 + c1r - c2r;// 150 = center.x of the cogs

//the radius of the 3-rd circle, the one in the middle

c3r = c1r - c2r*2





// setting attributes

c1.setAttributeNS(null,"r",(c1r + sda));

_c1.setAttributeNS(null,"r",c1r);





_c2.setAttributeNS(null,"cx",c2cx);

c2.setAttributeNS(null,"cx",c2cx);

_c2.setAttributeNS(null,"r",c2r);

c2.setAttributeNS(null,"r",(c2r-sda));

g2.style.transformOrigin=`${c2cx}px 150px`;



_c3.setAttributeNS(null,"r",c3r);

c3.setAttributeNS(null,"r",(c3r-sda));





//event listener to toggle the class animated of the svg element

cogs.addEventListener("click",()=>{cogs.classList.toggle("animated")})

svg {

  width: 300px;

  border: 1px solid;

}

circle {

  

  stroke-width: var(--foo);

  fill: none;

}



g {

  transform-origin: 150px 150px;

  animation: rotate 80s linear infinite;

  stroke: black;

}



.animated g{animation-play-state: paused;}

#g2 {

  animation-duration:20s;

  stroke:#444;

}

#g3 {

  animation-duration:40s;

  animation-direction: reverse;

}



[id ^="_"] {

  stroke-dasharray: var(--foo);

}

#_c2 {

  stroke-dashoffset: var(--foo);

}



@keyframes rotate {

  to {

    transform: rotate(360deg);

  }

}

<svg id="cogs" class="animated" viewBox="-20 -20 340 340">

  <g id="g1">

  <circle id="c1" cx="150" cy="150" r="" />

  <circle id="_c1" cx="150" cy="150" r="" />

  </g>

  <g id="g2">

  <circle id="c2" cx="" cy="150" r="" />

  <circle id="_c2" cx="" cy="150" r="" />

  </g>

  <g id="g3">

  <circle id="c3" cx="150" cy="150" r=""  />

  <circle id="_c3" cx="150" cy="150" r=""  />

  </g>

 

  <use xlink:href="#g2" transform="rotate(120 150 150 )" />

  <use xlink:href="#g2" transform="rotate(240 150 150 )" />

</svg>

edited Feb 25 at 12:14

answered Feb 25 at 11:56

enxaneta

8,7522519

edited Feb 25 at 12:14

answered Feb 25 at 11:56

enxaneta

8,7522519

answered Feb 25 at 11:56

enxaneta

8,7522519

answered Feb 25 at 11:56

enxaneta

8,7522519

1

I have a difficult choice. One solution is better than another. But, unfortunately, I can not select multiple solutions at the same time. Really gear drive looks great. The teeth while rotating the gears are perfect for each other. The implementation of the code at a high level. But unfortunately another solution suits me better.

– Alexandr_TT
Feb 25 at 13:59

add a comment |

1

I have a difficult choice. One solution is better than another. But, unfortunately, I can not select multiple solutions at the same time. Really gear drive looks great. The teeth while rotating the gears are perfect for each other. The implementation of the code at a high level. But unfortunately another solution suits me better.

– Alexandr_TT
Feb 25 at 13:59

I have a difficult choice. One solution is better than another. But, unfortunately, I can not select multiple solutions at the same time. Really gear drive looks great. The teeth while rotating the gears are perfect for each other. The implementation of the code at a high level. But unfortunately another solution suits me better.

– Alexandr_TT
Feb 25 at 13:59

add a comment |

Here is the simple code snipet i create to simulate the idea. All you need is

Change SMIL style to CSS style (Don't use animateTransform. Use css transform propertive).

Toggle animation-play-state when click the button

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

answered Feb 25 at 10:32

Duannx

3,4731335

Try to transfer your decision to an example from my question. (+)

– Alexandr_TT
Feb 25 at 10:40

1

@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself

– Duannx
Feb 25 at 10:59

1

@Alexandr_T you basically need to do the same as I did for transition ... you apply the animation to each element, you adjust the origin and the different values.

– Temani Afif
Feb 25 at 11:16

add a comment |

Here is the simple code snipet i create to simulate the idea. All you need is

Change SMIL style to CSS style (Don't use animateTransform. Use css transform propertive).

Toggle animation-play-state when click the button

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

answered Feb 25 at 10:32

Duannx

3,4731335

Try to transfer your decision to an example from my question. (+)

– Alexandr_TT
Feb 25 at 10:40

1

@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself

– Duannx
Feb 25 at 10:59

1

@Alexandr_T you basically need to do the same as I did for transition ... you apply the animation to each element, you adjust the origin and the different values.

– Temani Afif
Feb 25 at 11:16

add a comment |

Here is the simple code snipet i create to simulate the idea. All you need is

Change SMIL style to CSS style (Don't use animateTransform. Use css transform propertive).

Toggle animation-play-state when click the button

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

answered Feb 25 at 10:32

Duannx

3,4731335

Here is the simple code snipet i create to simulate the idea. All you need is

Change SMIL style to CSS style (Don't use animateTransform. Use css transform propertive).

Toggle animation-play-state when click the button

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

const runBtn = document.getElementById('runBtn')

const pauseBtn = document.getElementById('pauseBtn')

const circle = document.getElementById('circle')



runBtn.addEventListener('click', () => {

  if (!circle.classList.contains('running')) {

    circle.classList.add('running')

  }

})

pauseBtn.addEventListener('click', () => {

  circle.classList.remove('running')

})

body {

  text-align: center;

}



#circle {

  animation: rotate 3s linear infinite;

  transform-origin: 200px 200px;

  animation-play-state: paused;

}



#circle.running {

  animation-play-state: running;

}



@keyframes rotate {

  0% {

    transform: rotateZ(0)

  }

  100% {

    transform: rotateZ(360deg)

  }

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="200" height="200" viewBox="0 0 400 400" id="rootSvg">

<g id="circle">

  <circle cx="200" cy="200" r="100" stroke-width="20" stroke="black" fill="none"/>

  <circle cx="200" cy="100" r="5" fill="yellow"/>

</g>

</svg><br>

<button id="runBtn">run</button>

<button id="pauseBtn">pause</button>

answered Feb 25 at 10:32

Duannx

3,4731335

answered Feb 25 at 10:32

Duannx

3,4731335

answered Feb 25 at 10:32

Duannx

3,4731335

answered Feb 25 at 10:32

Duannx

3,4731335

Try to transfer your decision to an example from my question. (+)

– Alexandr_TT
Feb 25 at 10:40

1

@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself

– Duannx
Feb 25 at 10:59

1

@Alexandr_T you basically need to do the same as I did for transition ... you apply the animation to each element, you adjust the origin and the different values.

– Temani Afif
Feb 25 at 11:16

add a comment |

Try to transfer your decision to an example from my question. (+)

– Alexandr_TT
Feb 25 at 10:40

1

@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself

– Duannx
Feb 25 at 10:59

1

@Alexandr_T you basically need to do the same as I did for transition ... you apply the animation to each element, you adjust the origin and the different values.

– Temani Afif
Feb 25 at 11:16

Try to transfer your decision to an example from my question. (+)

– Alexandr_TT
Feb 25 at 10:40

@Alexandr_T Sorry, i just can provide this simple example because it takes time to convert your question's example to css style. You should do it yourself

– Duannx
Feb 25 at 10:59

@Alexandr_T you basically need to do the same as I did for transition ... you apply the animation to each element, you adjust the origin and the different values.

– Temani Afif
Feb 25 at 11:16

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky