Eleventh of the twelve animations.
Loading Animations (13 part series)
Animation
Result:
Introduction
I created this animation in SVG, following a structure similar to the previous ones:
<!-- size definitions --><svg> <!-- background --> <rect></rect> <!-- eleven moving circles --> <ellipse> <!-- animation that moves the circle --> <animateMotion></animateMotion> <!-- animations that stretch the circle --> <animate></animate> <animate></animate> </ellipse></svg>How it works
info
I omitted some elements and attributes in the following blocks to keep the explanation more concise.
Size
I kept the same size used in the previous animations.
Result
Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"> <rect width="199" height="199" x="0.5" y="0.5" fill="white" stroke="lightgray" strokeWidth="1" rx="6" /></svg>Paths
The animation uses eleven paths arranged radially in a circle. I calculated them as follows:
Result
Code
JavaScript
// dimension of the svgconst WIDTH = 200;const HEIGHT = 200;// center of the svgconst X_OFFSET = WIDTH / 2;const Y_OFFSET = HEIGHT / 2;const INNER_RADIUS = 28; // where the line startsconst OUTER_RADIUS = 58; // where the line endsconst TAU = 2 * Math.PI; // full rotation in radiansconst CIRCLES_COUNT = 11;const ANGLE_STEP = TAU / CIRCLES_COUNT;const paths = [];for (let i = 0; i < CIRCLES_COUNT; i++) { const angle = i * ANGLE_STEP; const x1 = OUTER_RADIUS * Math.sin(angle) + X_OFFSET; const y1 = OUTER_RADIUS * Math.cos(angle) + Y_OFFSET; const x2 = INNER_RADIUS * Math.sin(angle) + X_OFFSET; const y2 = INNER_RADIUS * Math.cos(angle) + Y_OFFSET; const d = `M${x1},${y1} L${x2},${y2}`; paths.push(d);}/*[ "M100,158 L100,128", "M131.35716741242464,148.7927049042085 L115.13794288875673,123.55509891927308", "M152.75865573056205,124.09407075410941 L125.46969586992651,111.63162036405282", "M157.4096436290941,91.74573938014947 L127.71500037266611,96.01518452834802", "M143.83347531254697,62.018077431173474 L121.16098808191923,81.66389944953202", "M116.34048829680292,44.34940753035915 L107.88851159156003,73.13419673879407", "M83.6595117031971,44.349407530359144 L92.11148840843998,73.13419673879407", "M56.16652468745303,62.01807743117346 L78.83901191808077,81.66389944953201", "M42.5903563709059,91.74573938014946 L72.28499962733389,96.01518452834802", "M47.241344269437924,124.0940707541094 L74.53030413007349,111.63162036405281", "M68.64283258757536,148.7927049042085 L84.86205711124327,123.55509891927308"]*/SVG
<svg> <rect></rect> <path fill="none" stroke="lightgray" stroke-width="1" d="M100,158 L100,128" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M131.35716741242464,148.7927049042085 L115.13794288875673,123.55509891927308" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M152.75865573056205,124.09407075410941 L125.46969586992651,111.63162036405282" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M157.4096436290941,91.74573938014947 L127.71500037266611,96.01518452834802" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M143.83347531254697,62.018077431173474 L121.16098808191923,81.66389944953202" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M116.34048829680292,44.34940753035915 L107.88851159156003,73.13419673879407" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M83.6595117031971,44.349407530359144 L92.11148840843998,73.13419673879407" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M56.16652468745303,62.01807743117346 L78.83901191808077,81.66389944953201" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M42.5903563709059,91.74573938014946 L72.28499962733389,96.01518452834802" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M47.241344269437924,124.0940707541094 L74.53030413007349,111.63162036405281" ></path> <path fill="none" stroke="lightgray" stroke-width="1" d="M68.64283258757536,148.7927049042085 L84.86205711124327,123.55509891927308" ></path></svg>Circles and their animations
Animations that follow the path
Each circle uses an animateMotion element to follow the defined path. The only attribute that varies between circles is begin, which defines a delay for each circle to begin its animation.
The ellipse elements share the following attributes:
fill="black": fill color of the ellipserx="8": horizontal radius of the ellipsery="8": vertical radius of the ellipse
The animateMotion elements share the following attributes:
repeatCount="indefinite": the animation repeats indefinitelyrotate="auto": causes the circle to follow the path rotation, maintaining the correct orientationcalcMode="spline": uses a Bézier curve for interpolationkeyPoints="0; 1; 0": key points of the animationkeyTimes="0; 0.5; 1": times corresponding to the key pointskeySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1": Bézier curves for interpolationdur="1500ms": total duration of the animation
keyTimes | keyPoints | keySplines |
|---|---|---|
| 0 | 0 | 0.42, 0, 0.58, 1 |
| 0.5 | 1 | 0.42, 0, 0.58, 1 |
| 1 | 0 | - |
In other words, the animation follows the path from beginning to end and returns to the beginning.
I calculated the start delay (begin) of each circle as follows:
Result
Code
JavaScript
const ANIMATION_DURATION = 1_500;const CIRCLES_COUNT = 11;const FACTOR = 2; // with FACTOR > 1 the delays become more spaced outconst TIME_STEP = (ANIMATION_DURATION / CIRCLES_COUNT) * FACTOR;const begins = [];for (let i = 0; i < CIRCLES_COUNT; i++) { const delay = i * TIME_STEP; begins.push(`-${delay}ms`);}/*[ "-0ms", "-272.72727272727275ms", "-545.4545454545455ms", "-818.1818181818182ms", "-1090.909090909091ms", "-1363.6363636363637ms", "-1636.3636363636365ms", "-1909.0909090909092ms", "-2181.818181818182ms", "-2454.545454545455ms", "-2727.2727272727275ms"]*/SVG
<svg> <rect></rect> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M100,158 L100,128" begin="-0ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M131.35716741242464,148.7927049042085 L115.13794288875673,123.55509891927308" begin="-272.72727272727275ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M152.75865573056205,124.09407075410941 L125.46969586992651,111.63162036405282" begin="-545.4545454545455ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M157.4096436290941,91.74573938014947 L127.71500037266611,96.01518452834802" begin="-818.1818181818182ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M143.83347531254697,62.018077431173474 L121.16098808191923,81.66389944953202" begin="-1090.909090909091ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M116.34048829680292,44.34940753035915 L107.88851159156003,73.13419673879407" begin="-1363.6363636363637ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M83.6595117031971,44.349407530359144 L92.11148840843998,73.13419673879407" begin="-1636.3636363636365ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M56.16652468745303,62.01807743117346 L78.83901191808077,81.66389944953201" begin="-1909.0909090909092ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M42.5903563709059,91.74573938014946 L72.28499962733389,96.01518452834802" begin="-2181.818181818182ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M47.241344269437924,124.0940707541094 L74.53030413007349,111.63162036405281" begin="-2454.545454545455ms" dur="1500ms" ></animateMotion> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M68.64283258757536,148.7927049042085 L84.86205711124327,123.55509891927308" begin="-2727.2727272727275ms" dur="1500ms" ></animateMotion> </ellipse></svg>Stretching animations
Circles also have animations that cause them to stretch and shrink smoothly during movement.
The animate elements share the following attributes:
repeatCount="indefinite": the animation repeats indefinitelydur="1500ms": total duration of the animation
Ray animations are configured with:
rx | ry | Description |
|---|---|---|
| 8 | 8 | Raio original |
| 8.4 | 7.6 | Estica horizontalmente e encolhe verticalmente |
| 8 | 8 | Retorna ao tamanho original |
| 8.4 | 7.6 | Estica horizontalmente e encolhe verticalmente |
| 8 | 8 | Retorna ao tamanho original |
The begin attribute is the same one used in motion animation to synchronize the two animations.
In other words, the circles stretch as they move from one point to another.
Result
Code
<svg> <rect></rect> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <path></path> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-0ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-0ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-272.72727272727275ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-272.72727272727275ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-545.4545454545455ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-545.4545454545455ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-818.1818181818182ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-818.1818181818182ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1090.909090909091ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1090.909090909091ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1363.6363636363637ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1363.6363636363637ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1636.3636363636365ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1636.3636363636365ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1909.0909090909092ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1909.0909090909092ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-2181.818181818182ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-2181.818181818182ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-2454.545454545455ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-2454.545454545455ms" dur="1500ms" ></animate> </ellipse> <ellipse> <animateMotion></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-2727.2727272727275ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-2727.2727272727275ms" dur="1500ms" ></animate> </ellipse></svg>Playground
Experiment with different values for the factor attribute to see how it affects the spacing of animation start delays.
- The behavior repeats every 11 steps, which is the number of circles. The behavior for factor 2 is the same for 13, for example.
- For factor equal to half the number of circles (11 / 2 = 5.5), there is no oscillation.
- For factor 5.6 to 11, the behavior is the inverse of 0 to 5.4. Factor 2 and 9, for example.
Conclusion
As with the other animations in the series, my idea was to use simple elements to try and achieve an interesting result. The November animation follows the same logic explored in previous versions: simple paths and small adjustments to delay and deformation to create movement. As in previous months, I used JavaScript to calculate both the coordinates of these paths and the delays used in each circle.
Result
Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"> <rect width="199" height="199" rx="6" x="0.5" y="0.5" fill="white" stroke-width="1" stroke="lightgray" ></rect> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M100,158 L100,128" begin="-0ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-0ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-0ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M131.35716741242464,148.7927049042085 L115.13794288875673,123.55509891927308" begin="-272.72727272727275ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-272.72727272727275ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-272.72727272727275ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M152.75865573056205,124.09407075410941 L125.46969586992651,111.63162036405282" begin="-545.4545454545455ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-545.4545454545455ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-545.4545454545455ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M157.4096436290941,91.74573938014947 L127.71500037266611,96.01518452834802" begin="-818.1818181818181ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-818.1818181818181ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-818.1818181818181ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M143.83347531254697,62.018077431173474 L121.16098808191923,81.66389944953202" begin="-1090.909090909091ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1090.909090909091ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1090.909090909091ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M116.34048829680295,44.34940753035916 L107.88851159156005,73.13419673879407" begin="-1363.6363636363635ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1363.6363636363635ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1363.6363636363635ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M83.6595117031971,44.349407530359144 L92.11148840843998,73.13419673879407" begin="-1636.3636363636363ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1636.3636363636363ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1636.3636363636363ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M56.16652468745303,62.01807743117346 L78.83901191808077,81.66389944953201" begin="-1909.090909090909ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-1909.090909090909ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-1909.090909090909ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M42.5903563709059,91.74573938014946 L72.28499962733389,96.01518452834802" begin="-2181.818181818182ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-2181.818181818182ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-2181.818181818182ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M47.241344269437946,124.09407075410944 L74.53030413007349,111.63162036405284" begin="-2454.5454545454545ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-2454.5454545454545ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-2454.5454545454545ms" dur="1500ms" ></animate> </ellipse> <ellipse rx="8" ry="8"> <animateMotion repeatCount="indefinite" rotate="auto" calcMode="spline" keyTimes="0; 0.5; 1" keyPoints="0; 1; 0" keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1" path="M68.6428325875753,148.79270490420848 L84.86205711124325,123.55509891927306" begin="-2727.272727272727ms" dur="1500ms" ></animateMotion> <animate attributeName="rx" repeatCount="indefinite" values="8; 8.4; 8; 8.4; 8" begin="-2727.272727272727ms" dur="1500ms" ></animate> <animate attributeName="ry" repeatCount="indefinite" values="8; 7.6; 8; 7.6; 8" begin="-2727.272727272727ms" dur="1500ms" ></animate> </ellipse></svg>