How to scale SVG path for anime.js motionpath function?

I am using anime.js to animate an SVG circle along an SVG path using the motionPath function. Everything is working except I am unable to scale the path. When I apply CSS style or wrap the path in a div, the visible path changes, but the function still uses the original path. Is there a way to scale the SVG path so that the anime.js function recognizes the scaled path.

<!doctype html>

<html>

<head>

<style>

	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}

	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}

	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}

	svg .highlight{opacity:0.3;fill:#8ADFED;}

	svg .fireflyShape{fill:url(#firefly);}

	svg .firefly {

		background-repeat: no-repeat;}

	svg .square {

		width: 10px;

		height: 10px;

		background-color: black;}

	#jar-container{

		position: absolute;

		top: 10px;

		left: 10px;

	}

	.fireflyContainer {

		top: 100px;

		left: 1px;

		position: absolute;

	}

	.trackContainer {

		position: absolute;

		top 10px;

	}

  .track {

    fill: none;

  }

</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

</head>

<body>

<!--Track-->

	<div class="trackContainer">

	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>

	

<!--Firefly-->



<div class="fireflyContainer">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 

	 viewBox="0 0 569 990.7"  xml:space="preserve">

	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">

	<stop  offset="0.2659" style="stop-color:#00BBF2"/>

	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>

</radialgradient>

<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>

	</svg>

	</div>



	</div>

<!--Jar-->

<div id="jar-container">

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">

<g id="Whole">

<g id="corkGroup">

	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

</svg>

	</div>

	



<script>

	

	var path = anime.path('path.track');

	

	var motionPath = anime({

		targets: ".fireflyContainer",

		duration: 10000,

		translateX: (path('x')),

		translateY: (path('y')),

		rotate: path('angle'),

		direction: 'normal',

		loop: true,

		easing: 'linear',

	});

</script>

</body>

</html>

edited Jan 2 at 17:19

asked Dec 29 '18 at 19:54

Tessa Newberry

133

You'll want to set up a working example. All you have to do is edit your post, hit Ctrl-M (or Command-M if you have a Mac), and copy the relevant parts of the code into the appropriate boxes. Which code goes into which boxes should be obvious, but comment if you need help.

– BobRodes
Dec 29 '18 at 20:15

You are using 2 SVG elements, each one with a different viewBox and different sizes, and you are moving one SVG element on the other's track. This is not how it is supposed to work. The usage is to have both the track and the firefly (in your case) in the same SVG element. And it can be done with javascript only or with SMIL animations (this second one with less browser support). Please let me know if you are interested in one of those 2 ways of doing it.

– enxaneta
Dec 30 '18 at 10:20

Hi @BobRodes, pushing command+m just minimizes my screen. I have a working codepen though - codepen.io/tessabanessa/pen/BvwbOo?editors=1010 Will this work?

– Tessa Newberry
Dec 30 '18 at 17:52

@enxaneta - all the elements were originally in the same linked SVG but I couldn't get motion path to read the path of the line. I got an error of 'could return item gettotallength' So I brought the SVG code into the HTML. Otherwise, I'm not sure what you mean by the same svg element. One of them is a path and the other is a circle so they will always have to have different d='...' The animation is working; the issue is if I scale down the jar, I am unable to scale down the path too. I'm brand new to all of this so forgive me if I'm misundertanding

– Tessa Newberry
Dec 30 '18 at 17:53

I'm sorry, Tessa, I got it wrong. You have to use Ctrl-M whether you're in a Mac or not. You also have to be editing your post when you do it, and have the focus in the edit window. Works just about like codepen, and allows people to run your code directly from here rather than going to a link. Like in enxaneta's answer.

– BobRodes
Dec 31 '18 at 0:10

add a comment |

<!doctype html>

<html>

<head>

<style>

	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}

	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}

	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}

	svg .highlight{opacity:0.3;fill:#8ADFED;}

	svg .fireflyShape{fill:url(#firefly);}

	svg .firefly {

		background-repeat: no-repeat;}

	svg .square {

		width: 10px;

		height: 10px;

		background-color: black;}

	#jar-container{

		position: absolute;

		top: 10px;

		left: 10px;

	}

	.fireflyContainer {

		top: 100px;

		left: 1px;

		position: absolute;

	}

	.trackContainer {

		position: absolute;

		top 10px;

	}

  .track {

    fill: none;

  }

</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

</head>

<body>

<!--Track-->

	<div class="trackContainer">

	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>

	

<!--Firefly-->



<div class="fireflyContainer">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 

	 viewBox="0 0 569 990.7"  xml:space="preserve">

	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">

	<stop  offset="0.2659" style="stop-color:#00BBF2"/>

	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>

</radialgradient>

<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>

	</svg>

	</div>



	</div>

<!--Jar-->

<div id="jar-container">

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">

<g id="Whole">

<g id="corkGroup">

	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

</svg>

	</div>

	



<script>

	

	var path = anime.path('path.track');

	

	var motionPath = anime({

		targets: ".fireflyContainer",

		duration: 10000,

		translateX: (path('x')),

		translateY: (path('y')),

		rotate: path('angle'),

		direction: 'normal',

		loop: true,

		easing: 'linear',

	});

</script>

</body>

</html>

edited Jan 2 at 17:19

asked Dec 29 '18 at 19:54

Tessa Newberry

133

You'll want to set up a working example. All you have to do is edit your post, hit Ctrl-M (or Command-M if you have a Mac), and copy the relevant parts of the code into the appropriate boxes. Which code goes into which boxes should be obvious, but comment if you need help.

– BobRodes
Dec 29 '18 at 20:15

You are using 2 SVG elements, each one with a different viewBox and different sizes, and you are moving one SVG element on the other's track. This is not how it is supposed to work. The usage is to have both the track and the firefly (in your case) in the same SVG element. And it can be done with javascript only or with SMIL animations (this second one with less browser support). Please let me know if you are interested in one of those 2 ways of doing it.

– enxaneta
Dec 30 '18 at 10:20

Hi @BobRodes, pushing command+m just minimizes my screen. I have a working codepen though - codepen.io/tessabanessa/pen/BvwbOo?editors=1010 Will this work?

– Tessa Newberry
Dec 30 '18 at 17:52

@enxaneta - all the elements were originally in the same linked SVG but I couldn't get motion path to read the path of the line. I got an error of 'could return item gettotallength' So I brought the SVG code into the HTML. Otherwise, I'm not sure what you mean by the same svg element. One of them is a path and the other is a circle so they will always have to have different d='...' The animation is working; the issue is if I scale down the jar, I am unable to scale down the path too. I'm brand new to all of this so forgive me if I'm misundertanding

– Tessa Newberry
Dec 30 '18 at 17:53

I'm sorry, Tessa, I got it wrong. You have to use Ctrl-M whether you're in a Mac or not. You also have to be editing your post when you do it, and have the focus in the edit window. Works just about like codepen, and allows people to run your code directly from here rather than going to a link. Like in enxaneta's answer.

– BobRodes
Dec 31 '18 at 0:10

add a comment |

<!doctype html>

<html>

<head>

<style>

	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}

	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}

	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}

	svg .highlight{opacity:0.3;fill:#8ADFED;}

	svg .fireflyShape{fill:url(#firefly);}

	svg .firefly {

		background-repeat: no-repeat;}

	svg .square {

		width: 10px;

		height: 10px;

		background-color: black;}

	#jar-container{

		position: absolute;

		top: 10px;

		left: 10px;

	}

	.fireflyContainer {

		top: 100px;

		left: 1px;

		position: absolute;

	}

	.trackContainer {

		position: absolute;

		top 10px;

	}

  .track {

    fill: none;

  }

</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

</head>

<body>

<!--Track-->

	<div class="trackContainer">

	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>

	

<!--Firefly-->



<div class="fireflyContainer">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 

	 viewBox="0 0 569 990.7"  xml:space="preserve">

	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">

	<stop  offset="0.2659" style="stop-color:#00BBF2"/>

	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>

</radialgradient>

<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>

	</svg>

	</div>



	</div>

<!--Jar-->

<div id="jar-container">

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">

<g id="Whole">

<g id="corkGroup">

	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

</svg>

	</div>

	



<script>

	

	var path = anime.path('path.track');

	

	var motionPath = anime({

		targets: ".fireflyContainer",

		duration: 10000,

		translateX: (path('x')),

		translateY: (path('y')),

		rotate: path('angle'),

		direction: 'normal',

		loop: true,

		easing: 'linear',

	});

</script>

</body>

</html>

edited Jan 2 at 17:19

asked Dec 29 '18 at 19:54

Tessa Newberry

133

<!doctype html>

<html>

<head>

<style>

	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}

	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}

	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}

	svg .highlight{opacity:0.3;fill:#8ADFED;}

	svg .fireflyShape{fill:url(#firefly);}

	svg .firefly {

		background-repeat: no-repeat;}

	svg .square {

		width: 10px;

		height: 10px;

		background-color: black;}

	#jar-container{

		position: absolute;

		top: 10px;

		left: 10px;

	}

	.fireflyContainer {

		top: 100px;

		left: 1px;

		position: absolute;

	}

	.trackContainer {

		position: absolute;

		top 10px;

	}

  .track {

    fill: none;

  }

</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

</head>

<body>

<!--Track-->

	<div class="trackContainer">

	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>

	

<!--Firefly-->



<div class="fireflyContainer">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 

	 viewBox="0 0 569 990.7"  xml:space="preserve">

	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">

	<stop  offset="0.2659" style="stop-color:#00BBF2"/>

	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>

</radialgradient>

<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>

	</svg>

	</div>



	</div>

<!--Jar-->

<div id="jar-container">

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">

<g id="Whole">

<g id="corkGroup">

	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

</svg>

	</div>

	



<script>

	

	var path = anime.path('path.track');

	

	var motionPath = anime({

		targets: ".fireflyContainer",

		duration: 10000,

		translateX: (path('x')),

		translateY: (path('y')),

		rotate: path('angle'),

		direction: 'normal',

		loop: true,

		easing: 'linear',

	});

</script>

</body>

</html>

<!doctype html>

<html>

<head>

<style>

	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}

	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}

	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}

	svg .highlight{opacity:0.3;fill:#8ADFED;}

	svg .fireflyShape{fill:url(#firefly);}

	svg .firefly {

		background-repeat: no-repeat;}

	svg .square {

		width: 10px;

		height: 10px;

		background-color: black;}

	#jar-container{

		position: absolute;

		top: 10px;

		left: 10px;

	}

	.fireflyContainer {

		top: 100px;

		left: 1px;

		position: absolute;

	}

	.trackContainer {

		position: absolute;

		top 10px;

	}

  .track {

    fill: none;

  }

</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

</head>

<body>

<!--Track-->

	<div class="trackContainer">

	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>

	

<!--Firefly-->



<div class="fireflyContainer">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 

	 viewBox="0 0 569 990.7"  xml:space="preserve">

	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">

	<stop  offset="0.2659" style="stop-color:#00BBF2"/>

	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>

</radialgradient>

<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>

	</svg>

	</div>



	</div>

<!--Jar-->

<div id="jar-container">

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">

<g id="Whole">

<g id="corkGroup">

	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

</svg>

	</div>

	



<script>

	

	var path = anime.path('path.track');

	

	var motionPath = anime({

		targets: ".fireflyContainer",

		duration: 10000,

		translateX: (path('x')),

		translateY: (path('y')),

		rotate: path('angle'),

		direction: 'normal',

		loop: true,

		easing: 'linear',

	});

</script>

</body>

</html>

<!doctype html>

<html>

<head>

<style>

	svg .corkShape{fill-rule:evenodd;clip-rule:evenodd;fill:#D4A676;}

	svg .corkTexture{fill-rule:evenodd;clip-rule:evenodd;fill:#CE976A;}

	svg .jar{opacity:0.3;fill:#30AFE2;enable-background:new;}

	svg .highlight{opacity:0.3;fill:#8ADFED;}

	svg .fireflyShape{fill:url(#firefly);}

	svg .firefly {

		background-repeat: no-repeat;}

	svg .square {

		width: 10px;

		height: 10px;

		background-color: black;}

	#jar-container{

		position: absolute;

		top: 10px;

		left: 10px;

	}

	.fireflyContainer {

		top: 100px;

		left: 1px;

		position: absolute;

	}

	.trackContainer {

		position: absolute;

		top 10px;

	}

  .track {

    fill: none;

  }

</style>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

</head>

<body>

<!--Track-->

	<div class="trackContainer">

	<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="256" height="112" viewBox="0 0 38.37 68.86"><defs><style> </style></defs><path class="track" d="M-23.47-89.7c70.39-124,361.39,64.87,258.3,182.5-86.29,98.46-269.89-42.31-246.33,172C-4.9,324.9,22,421.63,85.33,448.6c81.9,34.92,123.69-45.7,118.31-115.21C191.63,178.3-113.26,68.56-23.47-89.7Z" transform="translate(40.49 130.8)"/></svg>

	

<!--Firefly-->



<div class="fireflyContainer">

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" 

	 viewBox="0 0 569 990.7"  xml:space="preserve">

	<radialgradient id="firefly" cx="137.9349" cy="1301.0017" r="68.1967" gradientTransform="matrix(0.8558 0 0 0.8512 4.3547 -551.9129)" gradientUnits="userSpaceOnUse">

	<stop  offset="0.2659" style="stop-color:#00BBF2"/>

	<stop  offset="1" style="stop-color:#00BBF2;stop-opacity:0"/>

</radialgradient>

<ellipse class="fireflyShape" cx="122.4" cy="555.6" rx="58.2" ry="57.9"/>

	</svg>

	</div>



	</div>

<!--Jar-->

<div id="jar-container">

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" x="0px" y="0px" viewBox="0 0 569 990.7" style="enable-background:new 0 0 569 990.7;" xml:space="preserve">

<g id="Whole">

<g id="corkGroup">

	<path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

 	<path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

	<path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

	<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

	<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

	<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

</svg>

	</div>

	



<script>

	

	var path = anime.path('path.track');

	

	var motionPath = anime({

		targets: ".fireflyContainer",

		duration: 10000,

		translateX: (path('x')),

		translateY: (path('y')),

		rotate: path('angle'),

		direction: 'normal',

		loop: true,

		easing: 'linear',

	});

</script>

</body>

</html>

javascript css svg anime.js

edited Jan 2 at 17:19

asked Dec 29 '18 at 19:54

Tessa Newberry

133

edited Jan 2 at 17:19

asked Dec 29 '18 at 19:54

Tessa Newberry

133

edited Jan 2 at 17:19

asked Dec 29 '18 at 19:54

Tessa Newberry

133

asked Dec 29 '18 at 19:54

Tessa Newberry

133

asked Dec 29 '18 at 19:54

Tessa Newberry

133

You'll want to set up a working example. All you have to do is edit your post, hit Ctrl-M (or Command-M if you have a Mac), and copy the relevant parts of the code into the appropriate boxes. Which code goes into which boxes should be obvious, but comment if you need help.

– BobRodes
Dec 29 '18 at 20:15

You are using 2 SVG elements, each one with a different viewBox and different sizes, and you are moving one SVG element on the other's track. This is not how it is supposed to work. The usage is to have both the track and the firefly (in your case) in the same SVG element. And it can be done with javascript only or with SMIL animations (this second one with less browser support). Please let me know if you are interested in one of those 2 ways of doing it.

– enxaneta
Dec 30 '18 at 10:20

Hi @BobRodes, pushing command+m just minimizes my screen. I have a working codepen though - codepen.io/tessabanessa/pen/BvwbOo?editors=1010 Will this work?

– Tessa Newberry
Dec 30 '18 at 17:52

@enxaneta - all the elements were originally in the same linked SVG but I couldn't get motion path to read the path of the line. I got an error of 'could return item gettotallength' So I brought the SVG code into the HTML. Otherwise, I'm not sure what you mean by the same svg element. One of them is a path and the other is a circle so they will always have to have different d='...' The animation is working; the issue is if I scale down the jar, I am unable to scale down the path too. I'm brand new to all of this so forgive me if I'm misundertanding

– Tessa Newberry
Dec 30 '18 at 17:53

I'm sorry, Tessa, I got it wrong. You have to use Ctrl-M whether you're in a Mac or not. You also have to be editing your post when you do it, and have the focus in the edit window. Works just about like codepen, and allows people to run your code directly from here rather than going to a link. Like in enxaneta's answer.

– BobRodes
Dec 31 '18 at 0:10

add a comment |

You'll want to set up a working example. All you have to do is edit your post, hit Ctrl-M (or Command-M if you have a Mac), and copy the relevant parts of the code into the appropriate boxes. Which code goes into which boxes should be obvious, but comment if you need help.

– BobRodes
Dec 29 '18 at 20:15

You are using 2 SVG elements, each one with a different viewBox and different sizes, and you are moving one SVG element on the other's track. This is not how it is supposed to work. The usage is to have both the track and the firefly (in your case) in the same SVG element. And it can be done with javascript only or with SMIL animations (this second one with less browser support). Please let me know if you are interested in one of those 2 ways of doing it.

– enxaneta
Dec 30 '18 at 10:20

Hi @BobRodes, pushing command+m just minimizes my screen. I have a working codepen though - codepen.io/tessabanessa/pen/BvwbOo?editors=1010 Will this work?

– Tessa Newberry
Dec 30 '18 at 17:52

@enxaneta - all the elements were originally in the same linked SVG but I couldn't get motion path to read the path of the line. I got an error of 'could return item gettotallength' So I brought the SVG code into the HTML. Otherwise, I'm not sure what you mean by the same svg element. One of them is a path and the other is a circle so they will always have to have different d='...' The animation is working; the issue is if I scale down the jar, I am unable to scale down the path too. I'm brand new to all of this so forgive me if I'm misundertanding

– Tessa Newberry
Dec 30 '18 at 17:53

I'm sorry, Tessa, I got it wrong. You have to use Ctrl-M whether you're in a Mac or not. You also have to be editing your post when you do it, and have the focus in the edit window. Works just about like codepen, and allows people to run your code directly from here rather than going to a link. Like in enxaneta's answer.

– BobRodes
Dec 31 '18 at 0:10

You'll want to set up a working example. All you have to do is edit your post, hit Ctrl-M (or Command-M if you have a Mac), and copy the relevant parts of the code into the appropriate boxes. Which code goes into which boxes should be obvious, but comment if you need help.

– BobRodes
Dec 29 '18 at 20:15

You are using 2 SVG elements, each one with a different viewBox and different sizes, and you are moving one SVG element on the other's track. This is not how it is supposed to work. The usage is to have both the track and the firefly (in your case) in the same SVG element. And it can be done with javascript only or with SMIL animations (this second one with less browser support). Please let me know if you are interested in one of those 2 ways of doing it.

– enxaneta
Dec 30 '18 at 10:20

Hi @BobRodes, pushing command+m just minimizes my screen. I have a working codepen though - codepen.io/tessabanessa/pen/BvwbOo?editors=1010 Will this work?

– Tessa Newberry
Dec 30 '18 at 17:52

@enxaneta - all the elements were originally in the same linked SVG but I couldn't get motion path to read the path of the line. I got an error of 'could return item gettotallength' So I brought the SVG code into the HTML. Otherwise, I'm not sure what you mean by the same svg element. One of them is a path and the other is a circle so they will always have to have different d='...' The animation is working; the issue is if I scale down the jar, I am unable to scale down the path too. I'm brand new to all of this so forgive me if I'm misundertanding

– Tessa Newberry
Dec 30 '18 at 17:53

I'm sorry, Tessa, I got it wrong. You have to use Ctrl-M whether you're in a Mac or not. You also have to be editing your post when you do it, and have the focus in the edit window. Works just about like codepen, and allows people to run your code directly from here rather than going to a link. Like in enxaneta's answer.

– BobRodes
Dec 31 '18 at 0:10

add a comment |

1 Answer
1

active

oldest

votes

Using SMIL animation

This is how I would do it with SMIL animation. As you may see I've putted everything in the same <svg> element. Now everything scales together. Now the width of the svg element is width="250" but you can change this.

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

Using Javascript

The SVG part is almost the same with the difference that now I'm not using animateMotion. Also the CSS is the same. Please read the comments in the code.

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

I understand that you may want to use anime.js instead of SMIL or plain javascript. At least I hope you understand what I mean by "the same svg element". I hope it helps.

edited Dec 30 '18 at 20:23

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

@enaneta - I've been playing around with the javascript version of the code you posted and I think I understand a lot better now. It's working great. Thank you so much for taking the time to answer my question. I really appreciate it! Cheers.

– Tessa Newberry
Jan 2 at 20:44

I'm glad it was useful to you. In this case would you consider to accept my answer?

– enxaneta
Jan 2 at 21:09

Oh sure, sorry. I didn't realize I could do that. I'm new to this site

– Tessa Newberry
Jan 2 at 22:12

@enxaneta Valuable answer decisive question in two options

– Alexandr_TT
Jan 5 at 14:17

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%2f53972901%2fhow-to-scale-svg-path-for-anime-js-motionpath-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Using SMIL animation

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

Using Javascript

The SVG part is almost the same with the difference that now I'm not using animateMotion. Also the CSS is the same. Please read the comments in the code.

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

I understand that you may want to use anime.js instead of SMIL or plain javascript. At least I hope you understand what I mean by "the same svg element". I hope it helps.

edited Dec 30 '18 at 20:23

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

@enaneta - I've been playing around with the javascript version of the code you posted and I think I understand a lot better now. It's working great. Thank you so much for taking the time to answer my question. I really appreciate it! Cheers.

– Tessa Newberry
Jan 2 at 20:44

I'm glad it was useful to you. In this case would you consider to accept my answer?

– enxaneta
Jan 2 at 21:09

Oh sure, sorry. I didn't realize I could do that. I'm new to this site

– Tessa Newberry
Jan 2 at 22:12

@enxaneta Valuable answer decisive question in two options

– Alexandr_TT
Jan 5 at 14:17

add a comment |

Using SMIL animation

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

Using Javascript

The SVG part is almost the same with the difference that now I'm not using animateMotion. Also the CSS is the same. Please read the comments in the code.

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

I understand that you may want to use anime.js instead of SMIL or plain javascript. At least I hope you understand what I mean by "the same svg element". I hope it helps.

edited Dec 30 '18 at 20:23

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

@enaneta - I've been playing around with the javascript version of the code you posted and I think I understand a lot better now. It's working great. Thank you so much for taking the time to answer my question. I really appreciate it! Cheers.

– Tessa Newberry
Jan 2 at 20:44

I'm glad it was useful to you. In this case would you consider to accept my answer?

– enxaneta
Jan 2 at 21:09

Oh sure, sorry. I didn't realize I could do that. I'm new to this site

– Tessa Newberry
Jan 2 at 22:12

@enxaneta Valuable answer decisive question in two options

– Alexandr_TT
Jan 5 at 14:17

add a comment |

Using SMIL animation

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

Using Javascript

The SVG part is almost the same with the difference that now I'm not using animateMotion. Also the CSS is the same. Please read the comments in the code.

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

I understand that you may want to use anime.js instead of SMIL or plain javascript. At least I hope you understand what I mean by "the same svg element". I hope it helps.

edited Dec 30 '18 at 20:23

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

Using SMIL animation

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

Using Javascript

The SVG part is almost the same with the difference that now I'm not using animateMotion. Also the CSS is the same. Please read the comments in the code.

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

I understand that you may want to use anime.js instead of SMIL or plain javascript. At least I hope you understand what I mean by "the same svg element". I hope it helps.

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" gradientUnits="objectBoundingBox">

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--Trackr   

<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />--> 

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" rx="58.2" ry="57.9">   

<animateMotion begin="0s" dur="10s" rotate="auto" repeatCount="indefinite">

<mpath xlink:href="#track"></mpath>

</animateMotion>

</ellipse>

</g>

</svg>

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

let track = document.getElementById("track"),

trackLength = track.getTotalLength(),

ff = document.querySelector("#ff"),



dur = 10000; //duration of one loop of track, in ms



function update(time) {

requestAnimationFrame(update);

var t = (time % dur)/dur, // position in repeat cycle 

distance, // distance along the path for the firefly

point; // SVGPoint for the distance 



distance = trackLength * ( t % 1 );//console.log(distance) 

point = track.getPointAtLength(distance);

   

ff.setAttributeNS(null,"transform",`translate( ${point.x}, ${point.y} )`);

}

requestAnimationFrame(update);

svg .corkShape {

  fill: #d4a676;

}

svg .corkTexture {

  fill: #ce976a;

}

svg .jar {

  opacity: 0.3;

  fill: #30afe2;

}

svg .highlight {

  opacity: 0.3;

  fill: #8adfed;

}

svg .fireflyShape {

  fill: url(#firefly);

}

<svg version="1.1" id="jar" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="250px" viewBox="0 0 569 990.7">

  <defs>

    



  <radialgradient id="firefly"  cx="50%" cy="50%" r="50%" >

    <stop  offset="0" stop-color="#00BBF2" stop-opacity="1"/>

    <stop  offset="1" stop-color="#00BBF2" stop-opacity="0"/>

  </radialgradient>



        <path class="track" id="track"

              d="M-23.47-89.7

                 c70.39-124,361.39,64.87,258.3,182.5

                 c-86.29,98.46-269.89-42.31-246.33,172

                 C-4.9,324.9,22,421.63,85.33,448.6

                 c81.9,34.92,123.69-45.7,118.31-115.21

                 C191.63,178.3-113.26,68.56-23.47-89.7Z" />

  

  </defs> 

  

  

  

<!--Jar-->  

<g id="Whole">

<g id="corkGroup">

    <path class="corkShape" d="M402.2,36.55H98.9A14.17,14.17,0,0,0,84.9,53l15.5,98.5a14.19,14.19,0,0,0,14,12H386.7a14.19,14.19,0,0,0,14-12L416.2,53A14.17,14.17,0,0,0,402.2,36.55Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M200.8,46c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm46.9,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm85.6,4.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-174.2,7.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm227.2,9.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-66,0c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm-66,1.3c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.3,7,2.9Zm-66,6.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm107.5,10.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm-66.1,0c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.8,10,4.2Zm129.1,0c0,1.6-3.1,2.9-7,2.9s-7-1.3-7-2.9,3.2-2.9,7-2.9,7,1.2,7,2.9Zm-204.6,5.7c0,1.8-3.4,3.2-7.6,3.2s-7.6-1.4-7.6-3.2,3.4-3.2,7.6-3.2,7.6,1.5,7.6,3.2Zm242.2,9c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-142.1,3.7c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-67.8,0c0,1.9-3.6,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.4,8.2-3.4,8.2,1.5,8.2,3.4Zm143.4,2.5c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm-182,11.3c0,2.3-4.5,4.2-9.9,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,9.9,1.9,9.9,4.2Zm81.8,6.1c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.4-4.2,10-4.2,10,1.9,10,4.2Zm130.3,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-66,0c0,1.9-3.7,3.4-8.2,3.4s-8.2-1.5-8.2-3.4,3.7-3.5,8.2-3.5,8.2,1.6,8.2,3.5Zm-113.4,14.7c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm39.9,14.6c0,2.3-4.4,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm-98.2-10.8c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.8,10,4.2Zm179,2.2c0,2.3-4.5,4.2-10,4.2s-10-1.9-10-4.2,4.5-4.2,10-4.2,10,1.9,10,4.2Zm85.5,4.2c0,2.3-4.5,4.2-10,4.2s-9.9-1.9-9.9-4.2,4.5-4.2,9.9-4.2c5.6,0,10,1.8,10,4.2Z" transform="translate(-16.6 -36.55)"/>

    <path class="corkTexture" d="M354,151.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-38.9-1.9c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM186,124.45c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm188,15.2c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-240.8,3.6c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm126-43.3c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm73.5,27.6c0-.7.8-1.3,1.7-1.3s1.7.6,1.7,1.3-.8,1.3-1.7,1.3-1.7-.6-1.7-1.3Zm-46.2-77.4c0-2,2.2-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm-37,84.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-16.4,9.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.7-4.8-3.6Zm45.2-28.8c0-1.4,1.5-2.5,3.4-2.5s3.4,1.1,3.4,2.5-1.5,2.5-3.4,2.5-3.4-1.1-3.4-2.5Zm101.6,5c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7ZM107.2,96.75c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6ZM328.4,100c0-2,2.1-3.6,4.8-3.6S338,98,338,100s-2.2,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm32.5,4.6c0-1.6,1.7-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.3-3.9-3Zm-68.8-6.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm92.3-12.4c0-1,1.1-1.8,2.4-1.8s2.4.8,2.4,1.8-1.1,1.8-2.4,1.8-2.4-.8-2.4-1.8ZM122,72.35c0-1.5,1.6-2.7,3.6-2.7s3.6,1.2,3.6,2.7-1.6,2.7-3.6,2.7-3.6-1.2-3.6-2.7Zm142,1.3c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3ZM108,48.15c0-1.6,1.8-2.9,3.9-2.9s3.9,1.3,3.9,2.9-1.8,3-3.9,3-3.9-1.4-3.9-3Zm256.8,8.2c0-1.9,2.1-3.4,4.6-3.4s4.6,1.5,4.6,3.4-2.1,3.5-4.6,3.5-4.6-1.6-4.6-3.5Zm-27.6,7.9c0-3.1,3.4-5.7,7.6-5.7s7.6,2.6,7.6,5.7S349,70,344.8,70s-7.6-2.5-7.6-5.7Zm54.4,2.8c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Zm-190.2,35.7c0-2.7,2.9-4.9,6.5-4.9s6.5,2.2,6.5,4.9-2.9,4.9-6.5,4.9-6.5-2.2-6.5-4.9Zm2.3-42.7c0-2,2.1-3.6,4.8-3.6s4.8,1.6,4.8,3.6-2.1,3.6-4.8,3.6-4.8-1.6-4.8-3.6Z" transform="translate(-16.6 -36.55)"/>

</g>

<path class="jar" d="M418.9,163.65c-.4-12.2,2.1-23.2,9.9-33.7h37.7a4.65,4.65,0,0,0,4.6-4.6V81a4.65,4.65,0,0,0-4.6-4.6H34.9A4.65,4.65,0,0,0,30.3,81v44.4a4.65,4.65,0,0,0,4.6,4.6H72.3c7.8,10.5,10.2,21.5,9.9,33.7C81,208,16.6,219.25,16.6,279.45v600.2c0,44.4,30.6,74.6,66.5,74.6H417.9c36,0,66.6-30.2,66.6-74.6V279.35C484.5,219.15,420.1,208,418.9,163.65Zm-295.7,681c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V386.25c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Zm0-536.3c0,15.1-11.6,27.3-25.9,27.3s-25.9-12.2-25.9-27.3V302c0-15,11.6-27.3,25.9-27.3s25.9,12.2,25.9,27.3Z" transform="translate(-16.6 -36.55)"/>

<g id="jarHighlightGroup">

<path class="highlight" d="M97.3,359c-14.3,0-25.9,12.3-25.9,27.3v458.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V386.25C123.2,371.15,111.6,359,97.3,359Z" transform="translate(-16.6 -36.55)"/>

<path class="highlight" d="M97.3,274.65C83,274.65,71.4,287,71.4,302v6.4c0,15.1,11.6,27.3,25.9,27.3s25.9-12.2,25.9-27.3V302C123.2,286.85,111.6,274.65,97.3,274.65Z" transform="translate(-16.6 -36.55)"/>

</g>

</g>

  

<!--<use xlink:href="#track" y="400" x="130" fill="none" stroke="black" stroke-width="5" />-->

  

<g transform="translate(130,400)">  

<ellipse class="fireflyShape" id="ff" rx="58.2" ry="57.9"></ellipse>

</g>

</svg>

edited Dec 30 '18 at 20:23

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

edited Dec 30 '18 at 20:23

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

answered Dec 30 '18 at 20:07

enxaneta

9,4402620

@enaneta - I've been playing around with the javascript version of the code you posted and I think I understand a lot better now. It's working great. Thank you so much for taking the time to answer my question. I really appreciate it! Cheers.

– Tessa Newberry
Jan 2 at 20:44

I'm glad it was useful to you. In this case would you consider to accept my answer?

– enxaneta
Jan 2 at 21:09

Oh sure, sorry. I didn't realize I could do that. I'm new to this site

– Tessa Newberry
Jan 2 at 22:12

@enxaneta Valuable answer decisive question in two options

– Alexandr_TT
Jan 5 at 14:17

add a comment |

@enaneta - I've been playing around with the javascript version of the code you posted and I think I understand a lot better now. It's working great. Thank you so much for taking the time to answer my question. I really appreciate it! Cheers.

– Tessa Newberry
Jan 2 at 20:44

I'm glad it was useful to you. In this case would you consider to accept my answer?

– enxaneta
Jan 2 at 21:09

Oh sure, sorry. I didn't realize I could do that. I'm new to this site

– Tessa Newberry
Jan 2 at 22:12

@enxaneta Valuable answer decisive question in two options

– Alexandr_TT
Jan 5 at 14:17

@enaneta - I've been playing around with the javascript version of the code you posted and I think I understand a lot better now. It's working great. Thank you so much for taking the time to answer my question. I really appreciate it! Cheers.

– Tessa Newberry
Jan 2 at 20:44

I'm glad it was useful to you. In this case would you consider to accept my answer?

– enxaneta
Jan 2 at 21:09

Oh sure, sorry. I didn't realize I could do that. I'm new to this site

– Tessa Newberry
Jan 2 at 22:12

@enxaneta Valuable answer decisive question in two options

– Alexandr_TT
Jan 5 at 14:17

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

Search This Blog

Ufyukyu