Starting An Object To Move From A Random Point Along An Svg Path

Here trying to get some insight into SVGs. Is there any way of moving a circle along an SVG path, where the circle starts moving from a specific point determined by the length of t

Solution 1:

There is a direct from and to in SVG, but I am not certain how to use it properly. Also, I found keytimes to be useful in some cases, but it did not produce the desired result.

It is possible to start SVG animation without using JS from any point on the path, but its position must be determined in advance in the code.

A pair of attributes is used for this.

keyPoints="0;1" - movement from start to finish
keyTimes="0;1"

keyPoints="0.5;1" - movement from the middle of the way to the end
keyTimes="0;1"

keyPoints="1;0" - movement from end to start
keyTimes="0;1"

This way you can control the position of the starting point of the animation, but it is theoretically impossible to create an animation from a randomly selected point, since there are no variables in SVG, no arrays, no instructions for storing and executing mathematical functions.

In the example below, JS is used only to handle the event of pressing the control buttons:

<divid="pathContainer4"><buttonid="btn1"onclick="forwardSVG()">forward</button />
		<buttonid="btn2"onclick="middleSVG()">Middle</button />
		<buttonid="btn3"onclick="backSVG()">Back</button />
</div><svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"height="160"width="360" ><gfill="none"stroke="black"stroke-width="1"><pathstroke-dasharray="3"id="motionpath2"d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" /></g><circleclass="circle2"r=8fill=red><animateMotionid="forward"dur="2s"begin="indefinite"repeatCount="1"keyPoints="0;1"keyTimes="0;1"calcMode="linear"	   ><mpathhref="#motionpath2" /></animateMotion><animateMotionid="middle"dur="2s"begin="indefinite"repeatCount="1"keyPoints="0.5;1"keyTimes="0;1"calcMode="linear"					><mpathhref="#motionpath2" /></animateMotion><animateMotionid="back"dur="2s"begin="indefinite"repeatCount="1"keyPoints="1;0"keyTimes="0;1"calcMode="linear"					><mpathhref="#motionpath2" /></animateMotion></circle></svg><script>var animation1 = document.getElementById("forward")
functionforwardSVG(){
     animation1.beginElement();
} 
var animation2 = document.getElementById("middle")
functionmiddleSVG(){
     animation2.beginElement();
}  

var animation3 = document.getElementById("back")
functionbackSVG(){
     animation3.beginElement();
}
</script>

Here are some examples of the illusion of chaotic letter movement without JS

<style>#text1 {

fill:#B2000C;
}
 
</style><svgwidth="50%"height="50%"viewBox="0 0 1000 1000"xmlns="http://www.w3.org/2000/svg"version="1.1"baseProfile="tiny"xmlns:xlink="http://www.w3.org/1999/xlink"preserveAspectRatio="xMinYMin meet"><title>Animation of text x and y attributes</title><defs><linearGradientid="grad"x1="0"y1="0"x2="0"y2="100%"gradientUnits="userSpaceOnUse"><stopoffset="2%"stop-color="steelblue" /><stopoffset="45%"stop-color="hsla(180, 100%, 50%, 0)" /><stopoffset="45%"stop-color="hsla(80, 100%, 50%, 0)" /><stopoffset="95%"stop-color="yellowgreen" /></linearGradient></defs><rectwidth="100%"height="100%"fill="url(#grad)" /><textx="200 "y="500"font-size="90"fill="#E4E4E4"stroke-width="4"stroke="#E4E4E4">Stackoverflow</text><textid="text1"x="200"y="500"font-size="90">Stackoverflow</text><animatexlink:href="#text1"attributeName="x"attributeType="XML"values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
  200	233 266 299 332 365 400 431 464 497 530 563 596"dur="4s"begin="0s"repeatCount="2" /><animatexlink:href="#text1"attributeName="y"attributeType="XML"values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"dur="4s"begin="0s"repeatCount="2" /></svg>

Vertical Parking Letters

<style>#text1 {

fill:#B2000C;
}
 
</style><svgwidth="70%"height="70%"viewBox="0 0 1000 1000"xmlns="http://www.w3.org/2000/svg"version="1.1"baseProfile="tiny"xmlns:xlink="http://www.w3.org/1999/xlink"preserveAspectRatio="xMinYMin meet"><title>Animation of text x and y attributes</title><defs><linearGradientid="grad"x1="0"y1="0"x2="0"y2="100%"gradientUnits="userSpaceOnUse"><stopoffset="2%"stop-color="steelblue" /><stopoffset="45%"stop-color="hsla(180, 100%, 50%, 0)" /><stopoffset="45%"stop-color="hsla(80, 100%, 50%, 0)" /><stopoffset="95%"stop-color="yellowgreen" /></linearGradient></defs><rectwidth="100%"height="100%"fill="url(#grad)" /><textx="200 "y="500"font-size="90"fill="#E4E4E4"stroke-width="4"stroke="#E4E4E4">Stackoverflow</text><textid="text1"x="200"y="500"font-size="90">Stackoverflow</text><animatexlink:href="#text1"attributeName="x"attributeType="XML"values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
    200	233 266 299 332 365 400 431 464 497 530 563 596"dur="3s"begin="0s"repeatCount="2" /><animatexlink:href="#text1"attributeName="y"attributeType="XML"values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"dur="4s"begin="0s"repeatCount="2" /></svg>

Horizontal Parking Letters

<style>#text1 {

fill:#B2000C;
}
 
</style><svgwidth="50%"height="50%"viewBox="0 0 1000 1000"xmlns="http://www.w3.org/2000/svg"version="1.1"baseProfile="tiny"xmlns:xlink="http://www.w3.org/1999/xlink"preserveAspectRatio="xMinYMin meet"><title>Animation of text x and y attributes</title><defs><linearGradientid="grad"x1="0"y1="0"x2="0"y2="100%"gradientUnits="userSpaceOnUse"><stopoffset="2%"stop-color="steelblue" /><stopoffset="45%"stop-color="hsla(180, 100%, 50%, 0)" /><stopoffset="45%"stop-color="hsla(80, 100%, 50%, 0)" /><stopoffset="95%"stop-color="yellowgreen" /></linearGradient></defs><rectwidth="100%"height="100%"fill="url(#grad)" /><textx="200 "y="500"font-size="90"fill="#E4E4E4"stroke-width="4"stroke="#E4E4E4">Stackoverflow</text><textid="text1"x="200"y="500"font-size="90">Stackoverflow</text><animatexlink:href="#text1"attributeName="x"attributeType="XML"values="200 233 266 299 332 365 400 431 464 497 530 563 596;
	100 600 200 365 700 465 465 563 530 398 431 850 900; 
	200 500 900 950 150 531 300 620 150 266 365 650 900;
	332 233 820 300 800 633 200 670 300 850 800 530 266;
	464 900 900 900 820 670 430 900 530 600 233 365 100;
	332 100 100 100 500 100 800 563 900 700 900 100 100;
    200	233 266 299 332 365 400 431 464 497 530 563 596"dur="4s"begin="0s"repeatCount="2" /><animatexlink:href="#text1"attributeName="y"attributeType="XML"values="500 500 500 500 500 500 500 500 500 500 500 500 500;
	100 200 850 100 250 175 750 100 750 720 850 500 50; 
	100 600 600 250 200 450 50 200 520 550 300 300 750;
	500 100 650 650 600 150 550 50 150 550 200 550 400; 
	800 300 100 750 150 650 75 350 550 700 755 120 800;
	800 600 300 150 750 350 700 650 200 250 500 650 100;
	500 500 500 500 500 500 500 500 500 500 500 500 500"dur="3s"begin="0s"repeatCount="2" /></svg>

Another example of the illusion of random movement of billiard balls

<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"height="100vh"viewBox="0 0 400 400"><rectwidth="100%"height="100%"rx="25"fill="green"stroke="#9D8500"stroke-width="15"/><circlecx="50%"cy="20%"r="3%"fill="url(#gradB)" ><animateattributeName="cx"dur="3"values="3%;97%;3%"repeatCount="indefinite" /><animateattributeName="cy"dur="2.8"values="3%;97%;3%"repeatCount="indefinite" /></circle><circlecx="30%"cy="70%"r="3%"fill="url(#gradR)" ><animateattributeName="cx"dur="2.7"values="97%;3%;97%"repeatCount="indefinite" /><animateattributeName="cy"dur="3.1"values="3%;97%;3%"repeatCount="indefinite" /></circle><radialGradientid="gradB"cx="20%"cy="20%"r="100%"fx="30%"fy="30%"><stopstop-color="white"offset="0"/><stopstop-color="blue"offset="25%"/><stopstop-color="rgb(0,0,192)"offset="50%"/><stopstop-color="rgb(0,0,127)"offset="70%"/><stopstop-color="rgb(0,0,64)"offset="85%"/><stopstop-color="rgb(0,0,0)"offset="100%"/></radialGradient><radialGradientid="gradR"cx="20%"cy="20%"r="100%"fx="30%"fy="30%"><stopstop-color="white"offset="0"/><stopstop-color="red"offset="25%"/><stopstop-color="rgb(192,0,0)"offset="50%"/><stopstop-color="rgb(127,0,0)"offset="70%"/><stopstop-color="rgb(64,0,0)"offset="85%"/><stopstop-color="rgb(0,0,0)"offset="100%"/></radialGradient></svg>