Pular para o conteúdo principal

Animações de Carregamento: Novembro

· Leitura de 12 minutos

Décima primeira das doze animações.

Animações de Carregamento (série de 13 partes)
  1. Introdução
  2. Janeiro
  3. Fevereiro
  4. Março
  5. Abril
  6. Maio
  7. Junho
  8. Julho
  9. Agosto
  10. Setembro
  11. Outubro
  12. Novembro
  13. Dezembro

Animação​

Resultado final:

Introdução​

Criei esta animação em SVG, seguindo uma estrutura semelhante às anteriores:

<!-- definições de tamanho --><svg>  <!-- plano de fundo -->  <rect></rect>  <!-- onze círculos que se movem -->  <ellipse>    <!-- animação que move o círculo -->    <animateMotion></animateMotion>    <!-- animações que esticam o círculo -->    <animate></animate>    <animate></animate>  </ellipse></svg>

Como funciona​

info

Omiti alguns elementos e atributos nos blocos a seguir para manter a explicação mais concisa.

Tamanho​

Mantive o mesmo tamanho usado nas animações anteriores.

Resultado



Código

<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>

Caminho​

A animação utiliza onze caminhos dispostos radialmente em um círculo. Os calculei da seguinte forma:

Resultado



Código

JavaScript
// dimensão do svgconst WIDTH = 200;const HEIGHT = 200;// centro do svgconst X_OFFSET = WIDTH / 2;const Y_OFFSET = HEIGHT / 2;const INNER_RADIUS = 28; // onde a linha começaconst OUTER_RADIUS = 58; // onde a linha terminaconst TAU = 2 * Math.PI; // uma rotação completa em radianosconst 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>

Círculos e suas animações​

Animações que percorrem o caminho

Cada círculo utiliza um elemento animateMotion para percorrer o caminho definido. O único atributo que varia entre os círculos é o begin, que define um atraso para cada círculo iniciar sua animação.

Os elementos ellipse compartilham os seguintes atributos:

  • fill="black": cor de preenchimento da elipse
  • rx="8": raio horizontal da elipse
  • ry="8": raio vertical da elipse

Os elementos animateMotion compartilham os seguintes atributos:

  • repeatCount="indefinite": a animação se repete indefinidamente
  • rotate="auto": faz com que o círculo siga a rotação do caminho, mantendo a orientação correta
  • calcMode="spline": usa uma curva de Bézier para a interpolação
  • keyPoints="0; 1; 0": pontos-chave da animação
  • keyTimes="0; 0.5; 1": tempos correspondentes aos pontos-chave
  • keySplines="0.42, 0, 0.58, 1; 0.42, 0, 0.58, 1": curvas de Bézier para a interpolação
  • dur="1500ms": duração total da animação
keyTimeskeyPointskeySplines
000.42, 0, 0.58, 1
0.510.42, 0, 0.58, 1
10-

Ou seja, a animação percorre o caminho do início ao fim e volta ao início.

Calculei o atraso de início (begin) de cada círculo da seguinte forma:

Resultado



Código

JavaScript
const ANIMATION_DURATION = 1_500;const CIRCLES_COUNT = 11;const FACTOR = 2; // com FACTOR > 1 os atrasos ficam mais espaçadosconst 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>

Animações que esticam

Os círculos também têm animações de deformação que fazem com que eles estiquem e encolham suavemente durante o movimento.

Os elementos animate compartilham os seguintes atributos:

  • repeatCount="indefinite": a animação se repete indefinidamente
  • dur="1500ms": duração total da animação

As animações de raio são configuradas com:

rxryDescrição
88Raio original
8.47.6Estica horizontalmente e encolhe verticalmente
88Retorna ao tamanho original
8.47.6Estica horizontalmente e encolhe verticalmente
88Retorna ao tamanho original

O atributo begin é o mesmo usado na animação de movimento para sincronizar as duas animações.

Ou seja, os círculos esticam ao se mover de um ponto a outro.

Resultado

Código

<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​

Experimente diferentes valores para o atributo factor para ver como ele afeta o espaçamento dos atrasos de início das animações.

  • Os comportamentos se repetem a cada 11 passos, que é o número de círculos. O comportamento para factor 2 é igual para 13, por exemplo.
  • Para factor igual a metade do número de círculos (11 / 2 = 5.5), não há oscilação.
  • Para factor 5.6 à 11, o comportamento é o inverso de 0 à 5.4. Factor 2 e 9, por exemplo.


Conclusão​

Assim como nas outras animações da série, minha ideia era usar elementos simples para tentar chegar em um resultado interessante. A animação de novembro segue a mesma lógica explorada nas versões anteriores: caminhos simples e pequenos ajustes de atraso e deformação para criar movimento. Como nos meses anteriores, utilizei JavaScript para calcular tanto as coordenadas desses caminhos quanto os atrasos utilizados em cada círculo.

Resultado

Código

<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>

Leitura recomendada​