Колыбель Ньютона, анимация демонстрирующая этот эффект

Question

Широко известен физический опыт, названный "Колыбелью Ньютона" см. Wikipedia^ref

При отклонении и последующем возврате к изначальному положению первого шарика данной системы его энергия и импульс передадутся без изменения через три средних шарика последнему, который приобретёт ту же скорость и поднимется на ту же высоту. Он, в свою очередь, передаст импульс и энергию по цепочке снова первому шарику.

Необходимо создать анимацию демонстрирующий данный физический опыт

Сценарий анимации:

Правый шарик отводится вправо на угол 45 градусов
падение шарика обратно до соударения с другими шариками
крайний левый шарик отлетает на угол 45 град.
возвращается и ударяет соседние шары
крайний правый шарик отлетает на 45 град
анимация зацикливается

Желательно реализовать анимацию средствами SMIL SVG

Answer 1

Самый простой вариант на CSS:

.newton_cradle {
  position: absolute; bottom: 20px; left: calc(50% - 150px);
  width: 275px; height: 160px; padding: 0 0 0 25px;
  border-top: 10px solid silver; border-left: 10px solid silver; border-right: 10px solid silver; border-radius: 20px 20px 0 0;
  box-shadow: 0px 3px 10px -3px rgb(0 0 0 / 100%);
}

.newton_cradle::before {
  content: "@Sevastopol'"; display: block;
  position: absolute; top: -10px; left: 20px;
  width: 260px; height: 10px; background: silver;
  text-align: center; font-size: 6px; font-family: Verdana; color: white; letter-spacing: 1px; line-height: 11px; text-shadow: 0.5px 0.5px rgb(0 0 0 / 50%);
}

.newton_cradle::after {
  content: 'Колыбель Ньютона'; display: block;
  position: absolute; bottom: -20px; left: -50px;
  width: 400px; height: 20px; border-radius: 25px 25px 0 0;
  background: silver; background: radial-gradient(silver, lightgray, silver); border: 2px solid silver; box-shadow: 1px 5px 10px 3px rgb(0 0 0 / 10%);
  text-align: center; font-size: 10px; font-family: Verdana; color: dimgray; letter-spacing: 1px; line-height: 20px;
}

.ball {
  z-index: -1; float: left; position: relative;
  margin-top: 100px; width: 50px; height: 50px;
  background: repeating-linear-gradient( 45deg, black, transparent 100px);
  background: radial-gradient(circle at 65% 15%, white 1px, lightgray 3%, gray 60%, lightgray 100%); box-shadow: 1px 5px 10px 3px rgb(0 0 0 / 10%);
  border-radius: 100%; transform-origin: 50% -100px;
}

.ball::before {
  content: ''; display: block; position: absolute; top: 10px; left: 10px;
  width: 20px; height: 20px; border-radius: 100%;
  background-color: white; filter: blur(5px);
}

.ball::after {
  content: ''; display: block; position: absolute;
  top: -100px; left: 24px; height: 100px; width: 1px; background: gray;
}

.ball:nth-child(1) {animation: ball1 0.5s infinite alternate 0.5s ease-out;}
.ball:nth-child(5) {animation: ball5 0.5s infinite alternate ease-out;}

@keyframes ball1 {0%,50% {transform: rotate(0);} 100% {transform: rotate(30deg);}}
@keyframes ball5 {0%,50% {transform: rotate(0);} 100% {transform: rotate(-30deg);}}

<div class="newton_cradle">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

Answer 2

Один на Один

<svg width="280px" viewBox="0 40 220 100" xmlns="http://www.w3.org/2000/svg"> <path d="m172.08 48.232 11.254 41.997m21.267 12.748a18.398 18.398 74.999 0 1-13.009 22.533 18.398 18.398 74.999 0 1-22.533-13.009 18.398 18.398 74.999 0 1 13.009-22.533 18.398 18.398 74.999 0 1 22.533 13.009zm-73.05-54.755v43.479m17.243 17.818a18.398 18.398 0 0 1-18.398 18.398 18.398 18.398 0 0 1-18.398-18.398 18.398 18.398 0 0 1 18.398-18.398 18.398 18.398 0 0 1 18.398 18.398zm-57.989-61.296v43.479m17.243 17.818a18.398 18.398 0 0 1-18.398 18.398 18.398 18.398 0 0 1-18.398-18.398 18.398 18.398 0 0 1 18.398-18.398 18.398 18.398 0 0 1 18.398 18.398zm-57.982-61.295-0.29942 43.478m17.12 17.936a18.398 18.398 0.39458 0 1-18.524 18.271 18.398 18.398 0.39458 0 1-18.271-18.524 18.398 18.398 0.39458 0 1 18.524-18.271 18.398 18.398 0.39458 0 1 18.271 18.524zm122.84-62.205-161.27 0.39526" stroke="#000" stroke-width="1" fill="none"><animate attributeName="d"begin="0s" dur="0.60s" values=" m 172.59932,47.577852 c 7.44235,14.656064 16.07487,25.51765 21.85796,37.584743 m 23.86303,6.733863 c 5.10815,8.783482 2.12869,20.044872 -6.65482,25.153002 -8.78343,5.10823 -20.04487,2.12879 -25.15304,-6.65468 -5.10816,-8.78349 -2.1287,-20.044896 6.65483,-25.153011 8.78345,-5.108211 20.04488,-2.1288 25.15303,6.654689 z M 131.54946,48.221645 V 91.70018 m 17.24294,17.8177 a 18.397776,18.397774 0 0 1 -18.39788,18.39777 18.397776,18.397774 0 0 1 -18.39788,-18.39777 18.397776,18.397774 0 0 1 18.39788,-18.39778 18.397776,18.397774 0 0 1 18.39788,18.39778 z M 90.803429,48.221645 V 91.70018 m 17.242881,17.8177 A 18.397776,18.397774 0 0 1 89.648487,127.91565 18.397776,18.397774 0 0 1 71.250711,109.51788 18.397776,18.397774 0 0 1 89.648487,91.1201 18.397776,18.397774 0 0 1 108.04631,109.51788 Z M 50.064622,48.222817 49.765201,91.700322 M 66.884919,109.63634 A 18.397776,18.397774 0.39457915 0 1 48.360882,127.90698 18.397776,18.397774 0.39457915 0 1 30.090242,109.38294 18.397776,18.397774 0.39457915 0 1 48.61428,91.112302 18.397776,18.397774 0.39457915 0 1 66.884919,109.63634 Z M 189.72452,47.431128 28.458677,47.826386;m 172.30447,48.219276 c -1.00368,16.406748 0.94034,30.144115 -0.18318,43.478152 m 17.1677,17.890192 c -0.0428,10.16076 -8.31446,18.36295 -18.47523,18.3201 -10.16075,-0.0427 -18.363,-8.31438 -18.3202,-18.47513 0.0428,-10.16077 8.31447,-18.362978 18.47524,-18.320102 10.16076,0.04275 18.36302,8.314374 18.32019,18.475132 z M 131.54946,48.221645 V 91.70018 m 17.24294,17.8177 a 18.397776,18.397774 0 0 1 -18.39788,18.39777 18.397776,18.397774 0 0 1 -18.39788,-18.39777 18.397776,18.397774 0 0 1 18.39788,-18.39778 18.397776,18.397774 0 0 1 18.39788,18.39778 z M 90.803429,48.221645 V 91.70018 m 17.242881,17.8177 A 18.397776,18.397774 0 0 1 89.648487,127.91565 18.397776,18.397774 0 0 1 71.250711,109.51788 18.397776,18.397774 0 0 1 89.648487,91.1201 18.397776,18.397774 0 0 1 108.04631,109.51788 Z M 50.064622,48.222817 49.765201,91.700322 M 66.884919,109.63634 A 18.397776,18.397774 0.39457915 0 1 48.360882,127.90698 18.397776,18.397774 0.39457915 0 1 30.090242,109.38294 18.397776,18.397774 0.39457915 0 1 48.61428,91.112302 18.397776,18.397774 0.39457915 0 1 66.884919,109.63634 Z M 189.72452,47.431128 28.458677,47.826386;m 172.30447,48.219276 c -1.00368,16.406748 0.94034,30.144115 -0.18318,43.478152 m 17.1677,17.890192 c -0.0428,10.16076 -8.31446,18.36295 -18.47523,18.3201 -10.16075,-0.0427 -18.363,-8.31438 -18.3202,-18.47513 0.0428,-10.16077 8.31447,-18.362978 18.47524,-18.320102 10.16076,0.04275 18.36302,8.314374 18.32019,18.475132 z M 131.54946,48.221645 V 91.70018 m 17.24294,17.8177 a 18.397776,18.397774 0 0 1 -18.39788,18.39777 18.397776,18.397774 0 0 1 -18.39788,-18.39777 18.397776,18.397774 0 0 1 18.39788,-18.39778 18.397776,18.397774 0 0 1 18.39788,18.39778 z M 90.803429,48.221645 V 91.70018 m 17.242881,17.8177 A 18.397776,18.397774 0 0 1 89.648487,127.91565 18.397776,18.397774 0 0 1 71.250711,109.51788 18.397776,18.397774 0 0 1 89.648487,91.1201 18.397776,18.397774 0 0 1 108.04631,109.51788 Z M 50.360541,48.00596 32.428616,87.614408 m 8.359439,23.343202 A 18.397776,18.397774 24.357681 0 1 16.440068,120.12995 18.397776,18.397774 24.357681 0 1 7.2677322,95.781962 18.397776,18.397774 24.357681 0 1 31.615719,86.609627 18.397776,18.397774 24.357681 0 1 40.788055,110.95761 Z M 189.72452,47.431128 28.458677,47.826386;m 171.38924,48.311677 c 7.78362,14.477712 16.66819,25.134112 22.73235,37.06243 m 24.01421,6.173053 c 5.31251,8.66141 2.59764,19.98951 -6.06381,25.30198 -8.66135,5.3126 -19.98951,2.59774 -25.30202,-6.06367 -5.31251,-8.66142 -2.59764,-19.989535 6.06382,-25.301988 8.66139,-5.312556 19.98952,-2.597749 25.30201,6.063678 z M 131.54946,48.221645 V 91.70018 m 17.24294,17.8177 a 18.397776,18.397774 0 0 1 -18.39788,18.39777 18.397776,18.397774 0 0 1 -18.39788,-18.39777 18.397776,18.397774 0 0 1 18.39788,-18.39778 18.397776,18.397774 0 0 1 18.39788,18.39778 z M 90.803429,48.221645 V 91.70018 m 17.242881,17.8177 A 18.397776,18.397774 0 0 1 89.648487,127.91565 18.397776,18.397774 0 0 1 71.250711,109.51788 18.397776,18.397774 0 0 1 89.648487,91.1201 18.397776,18.397774 0 0 1 108.04631,109.51788 Z M 50.396643,48.201668 50.644036,91.6795 m 17.343933,17.71929 A 18.397774,18.397776 89.673985 0 1 49.695177,127.90096 18.397774,18.397776 89.673985 0 1 31.193017,109.60816 18.397774,18.397776 89.673985 0 1 49.485811,91.106002 18.397774,18.397776 89.673985 0 1 67.987969,109.39879 Z M 189.72452,47.431128 28.458677,47.826386"repeatCount="indefinite"/> </path> </svg>

Два на Два

<svg width="280px" viewBox="0 0 327.06 154.36" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(11.333 -39.026)"> <path d="m313.41 149.77a24.492 24.492 0 0 1-13.465 31.912 24.492 24.492 0 0 1-31.912-13.465 24.492 24.492 0 0 1 13.466-31.912 24.492 24.492 0 0 1 31.912 13.465zm-68.801-100.03 39.57 93.142m-30.746 12.76a24.492 24.492 0 0 1-16.291 30.566 24.492 24.492 0 0 1-30.566-16.291 24.492 24.492 0 0 1 16.291-30.566 24.492 24.492 0 0 1 30.566 16.291zm-59.49-105.83 31 96.334m-53.874 22.224a24.492 24.492 0 0 1-24.492 24.492 24.492 24.492 0 0 1-24.492-24.492 24.492 24.492 0 0 1 24.492-24.492 24.492 24.492 0 0 1 24.492 24.492zm-26.067-118.57 1.581 101.19m-27.494 17.75a24.492 24.492 0 0 1-24.842 24.137 24.492 24.492 0 0 1-24.137-24.842 24.492 24.492 0 0 1 24.842-24.137 24.492 24.492 0 0 1 24.137 24.842zm-24.358-118.93 0.12526 101.2m-66.396-111.48h237.16v10.277h-237.16zm39.781 129.21a24.492 24.492 0 0 1-24.844 24.134 24.492 24.492 0 0 1-24.134-24.844 24.492 24.492 0 0 1 24.844-24.134 24.492 24.492 0 0 1 24.134 24.844zm-24.346-118.94 0.11467 101.2" stroke="#000" stroke-width="1"> <animate attributeName="d" dur="1s" begin="0s" values="m 311.27628,151.19116 a 24.491825,24.491825 0 0 1 -14.12706,31.62487 24.491825,24.491825 0 0 1 -31.62495,-14.12688 24.491825,24.491825 0 0 1 14.12708,-31.62488 24.491825,24.491825 0 0 1 31.62493,14.12689 z m -66.7031,-101.436889 37.62243,93.945419 m -46.1296,19.92965 a 24.491825,24.491825 0 0 1 -20.85828,27.65208 24.491825,24.491825 0 0 1 -27.65221,-20.85812 24.491825,24.491825 0 0 1 20.85829,-27.65209 24.491825,24.491825 0 0 1 27.6522,20.85813 z m -42.2606,-113.810315 15.60008,99.989125 m -38.33728,18.56629 a 24.491825,24.491825 0 0 1 -24.49196,24.49182 24.491825,24.491825 0 0 1 -24.49197,-24.49182 24.491825,24.491825 0 0 1 24.49197,-24.49183 24.491825,24.491825 0 0 1 24.49196,24.49183 z M 145.00129,49.802682 146.58234,150.98909 m -27.49395,17.74953 A 24.491825,24.491825 0 0 1 94.246658,192.87558 24.491825,24.491825 0 0 1 70.109693,168.03397 24.491825,24.491825 0 0 1 94.951309,143.897 24.491825,24.491825 0 0 1 119.08839,168.73862 Z M 94.729905,49.804147 94.855169,151.00282 M 28.458675,39.525936 H 265.6143 V 49.802681 H 28.458675 Z m 39.7807,129.210924 A 24.491825,24.491825 0 0 1 43.395233,192.87122 24.491825,24.491825 0 0 1 19.260867,168.02708 24.491825,24.491825 0 0 1 44.105009,143.89271 24.491825,24.491825 0 0 1 68.239375,168.73686 Z M 43.893452,49.799844 44.008126,150.99854; m 287.10437,163.38067 a 24.491825,24.491825 0 0 1 -20.70197,27.76932 24.491825,24.491825 0 0 1 -27.76943,-20.70182 24.491825,24.491825 0 0 1 20.70199,-27.76931 24.491825,24.491825 0 0 1 27.76941,20.70181 z M 244.20245,49.810558 260.36633,149.7101 m -36.19415,17.61974 a 24.491825,24.491825 0 0 1 -23.56487,25.38508 24.491825,24.491825 0 0 1 -25.38522,-23.56473 24.491825,24.491825 0 0 1 23.56488,-25.38509 24.491825,24.491825 0 0 1 25.38521,23.56474 z M 193.71687,49.808687 199.05714,150.86644 m -27.98893,17.508 a 24.491825,24.491825 0 0 1 -24.49196,24.49182 24.491825,24.491825 0 0 1 -24.49197,-24.49182 24.491825,24.491825 0 0 1 24.49197,-24.49183 24.491825,24.491825 0 0 1 24.49196,24.49183 z M 145.00129,49.802682 146.58234,150.98909 m -27.49395,17.74953 A 24.491825,24.491825 0 0 1 94.246658,192.87558 24.491825,24.491825 0 0 1 70.109693,168.03397 24.491825,24.491825 0 0 1 94.951309,143.897 24.491825,24.491825 0 0 1 119.08839,168.73862 Z M 94.729905,49.804147 94.855169,151.00282 M 28.458675,39.525936 H 265.6143 V 49.802681 H 28.458675 Z m 39.7807,129.210924 A 24.491825,24.491825 0 0 1 43.395233,192.87122 24.491825,24.491825 0 0 1 19.260867,168.02708 24.491825,24.491825 0 0 1 44.105009,143.89271 24.491825,24.491825 0 0 1 68.239375,168.73686 Z M 43.893452,49.799844 44.008126,150.99854; m 271.72839,167.99463 a 24.491825,24.491825 0 0 1 -24.14167,24.8372 24.491825,24.491825 0 0 1 -24.83733,-24.14153 24.491825,24.491825 0 0 1 24.14168,-24.83719 24.491825,24.491825 0 0 1 24.83732,24.14152 z M 243.98016,49.805029 246.9981,150.95878 m -25.59937,17.04673 a 24.491825,24.491825 0 0 1 -24.15138,24.82773 24.491825,24.491825 0 0 1 -24.82787,-24.15124 24.491825,24.491825 0 0 1 24.15139,-24.82774 24.491825,24.491825 0 0 1 24.82786,24.15125 z M 193.69677,49.805052 196.6751,150.95997 m -25.60689,17.41447 a 24.491825,24.491825 0 0 1 -24.49196,24.49182 24.491825,24.491825 0 0 1 -24.49197,-24.49182 24.491825,24.491825 0 0 1 24.49197,-24.49183 24.491825,24.491825 0 0 1 24.49196,24.49183 z M 145.00129,49.802682 146.58234,150.98909 m -27.49395,17.74953 A 24.491825,24.491825 0 0 1 94.246658,192.87558 24.491825,24.491825 0 0 1 70.109693,168.03397 24.491825,24.491825 0 0 1 94.951309,143.897 24.491825,24.491825 0 0 1 119.08839,168.73862 Z M 94.729905,49.804147 94.855169,151.00282 M 28.458675,39.525936 H 265.6143 V 49.802681 H 28.458675 Z m 39.7807,129.210924 A 24.491825,24.491825 0 0 1 43.395233,192.87122 24.491825,24.491825 0 0 1 19.260867,168.02708 24.491825,24.491825 0 0 1 44.105009,143.89271 24.491825,24.491825 0 0 1 68.239375,168.73686 Z M 43.893452,49.799844 44.008126,150.99854; m 271.72839,167.99463 a 24.491825,24.491825 0 0 1 -24.14167,24.8372 24.491825,24.491825 0 0 1 -24.83733,-24.14153 24.491825,24.491825 0 0 1 24.14168,-24.83719 24.491825,24.491825 0 0 1 24.83732,24.14152 z M 243.98016,49.805029 246.9981,150.95878 m -25.59937,17.04673 a 24.491825,24.491825 0 0 1 -24.15138,24.82773 24.491825,24.491825 0 0 1 -24.82787,-24.15124 24.491825,24.491825 0 0 1 24.15139,-24.82774 24.491825,24.491825 0 0 1 24.82786,24.15125 z M 193.69677,49.805052 196.6751,150.95997 m -25.60689,17.41447 a 24.491825,24.491825 0 0 1 -24.49196,24.49182 24.491825,24.491825 0 0 1 -24.49197,-24.49182 24.491825,24.491825 0 0 1 24.49197,-24.49183 24.491825,24.491825 0 0 1 24.49196,24.49183 z M 145.00129,49.802682 146.58234,150.98909 m -34.16553,18.92846 a 24.491825,24.491825 0 0 1 -26.149087,22.71409 24.491825,24.491825 0 0 1 -22.7141,-26.14897 24.491825,24.491825 0 0 1 26.148971,-22.7141 24.491825,24.491825 0 0 1 22.714216,26.14898 z M 94.728672,49.809787 89.210344,150.85797 M 28.458675,39.525936 H 265.6143 V 49.802681 H 28.458675 Z M 57.710521,170.36143 A 24.491825,24.491825 0 0 1 30.88407,192.27124 24.491825,24.491825 0 0 1 8.9742437,165.44479 24.491825,24.491825 0 0 1 35.800696,143.53496 24.491825,24.491825 0 0 1 57.710521,170.36143 Z M 43.67677,49.772073 35.093458,150.60617; m 271.72839,167.99463 a 24.491825,24.491825 0 0 1 -24.14167,24.8372 24.491825,24.491825 0 0 1 -24.83733,-24.14153 24.491825,24.491825 0 0 1 24.14168,-24.83719 24.491825,24.491825 0 0 1 24.83732,24.14152 z M 243.98016,49.805029 246.9981,150.95878 m -25.59937,17.04673 a 24.491825,24.491825 0 0 1 -24.15138,24.82773 24.491825,24.491825 0 0 1 -24.82787,-24.15124 24.491825,24.491825 0 0 1 24.15139,-24.82774 24.491825,24.491825 0 0 1 24.82786,24.15125 z M 193.69677,49.805052 196.6751,150.95997 m -25.60689,17.41447 a 24.491825,24.491825 0 0 1 -24.49196,24.49182 24.491825,24.491825 0 0 1 -24.49197,-24.49182 24.491825,24.491825 0 0 1 24.49197,-24.49183 24.491825,24.491825 0 0 1 24.49196,24.49183 z M 145.00129,49.802682 146.58234,150.98909 m -52.840644,20.2351 A 24.491825,24.491825 0 0 1 64.412267,189.64942 24.491825,24.491825 0 0 1 45.987006,160.32011 24.491825,24.491825 0 0 1 75.316322,141.89485 24.491825,24.491825 0 0 1 93.741696,171.22419 Z M 94.72365,49.824928 73.740317,148.82436 M 28.458675,39.525936 H 265.6143 V 49.802681 H 28.458675 Z M 40.621006,171.06169 A 24.491825,24.491825 0 0 1 11.031644,189.06635 24.491825,24.491825 0 0 1 -6.973036,159.47699 24.491825,24.491825 0 0 1 22.61633,141.4723 24.491825,24.491825 0 0 1 40.621006,171.06169 Z m 2.71506,-121.37285 -22.39451,98.68979; m 311.27628,151.19116 a 24.491825,24.491825 0 0 1 -14.12706,31.62487 24.491825,24.491825 0 0 1 -31.62495,-14.12688 24.491825,24.491825 0 0 1 14.12708,-31.62488 24.491825,24.491825 0 0 1 31.62493,14.12689 z m -66.7031,-101.436889 37.62243,93.945419 m -46.1296,19.92965 a 24.491825,24.491825 0 0 1 -20.85828,27.65208 24.491825,24.491825 0 0 1 -27.65221,-20.85812 24.491825,24.491825 0 0 1 20.85829,-27.65209 24.491825,24.491825 0 0 1 27.6522,20.85813 z m -42.2606,-113.810315 15.60008,99.989125 m -38.33728,18.56629 a 24.491825,24.491825 0 0 1 -24.49196,24.49182 24.491825,24.491825 0 0 1 -24.49197,-24.49182 24.491825,24.491825 0 0 1 24.49197,-24.49183 24.491825,24.491825 0 0 1 24.49196,24.49183 z M 145.00129,49.802682 146.58234,150.98909 m -27.49395,17.74953 A 24.491825,24.491825 0 0 1 94.246658,192.87558 24.491825,24.491825 0 0 1 70.109693,168.03397 24.491825,24.491825 0 0 1 94.951309,143.897 24.491825,24.491825 0 0 1 119.08839,168.73862 Z M 94.729905,49.804147 94.855169,151.00282 M 28.458675,39.525936 H 265.6143 V 49.802681 H 28.458675 Z m 39.7807,129.210924 A 24.491825,24.491825 0 0 1 43.395233,192.87122 24.491825,24.491825 0 0 1 19.260867,168.02708 24.491825,24.491825 0 0 1 44.105009,143.89271 24.491825,24.491825 0 0 1 68.239375,168.73686 Z M 43.893452,49.799844 44.008126,150.99854; "repeatCount="indefinite"> </path> </g> </svg>

Два шарика но реалистичнее "из претензии"

<svg  width="320" viewBox="0 0 195.26 99.785" xmlns="http://www.w3.org/2000/svg">
 <g stroke="#000" stroke-width="1">
  <path d="m206.78 10.467h-195.26" />

   <path d="m 57.944139,88.840592 c -0.343383,4.661295 -4.954274,8.197237 -10.298712,7.897741 -5.344436,-0.299488 -9.398592,-4.320998 -9.055209,-8.982287 0.343409,-4.661276 4.954291,-8.19719 10.298711,-7.897698 5.344416,0.299491 9.398563,4.320973 9.05521,8.982244 z m -8.3994,-78.080689 0.0053,70.68937">
     <animate id="an2"
              attributeName="d"
              dur="0.6s"
              begin="an1.end"
              values="m 30.696993,87.04674 c -1.912144,4.26489 -7.452364,6.016793 -12.374424,3.91298 -4.922061,-2.103806 -7.362084,-7.266656 -5.449943,-11.531541 1.912162,-4.264863 7.452363,-6.016744 12.374408,-3.91294 4.922042,2.103802 7.362066,7.266622 5.449959,11.531501 z M 49.423677,10.781051 25.326078,77.236246;  m 57.944139,88.840592 c -0.343383,4.661295 -4.954274,8.197237 -10.298712,7.897741 -5.344436,-0.299488 -9.398592,-4.320998 -9.055209,-8.982287 0.343409,-4.661276 4.954291,-8.19719 10.298711,-7.897698 5.344416,0.299491 9.398563,4.320973 9.05521,8.982244 z m -8.3994,-78.080689 0.0053,70.68937"  />
   </path>
   
   <path d="m77.843 88.841c-0.23835 4.6761-4.7687 8.2979-10.119 8.0896-5.3502-0.20832-9.4941-4.1679-9.2557-8.844 0.23838-4.6761 4.7687-8.2979 10.119-8.0896 5.3501 0.20832 9.4941 4.1679 9.2557 8.844zm-8.2575-78.615-0.30141 71.354"/>
   
   <path d="m98.038 88.841c-0.19175 4.6764-4.6859 8.3315-10.038 8.164-5.352-0.16754-9.5352-4.0943-9.3435-8.7707 0.19177-4.6763 4.6859-8.3314 10.038-8.1639 5.352 0.16754 9.5352 4.0943 9.3435 8.7706zm-8.0924-77.975-0.53854 70.782" />
   
   <path d="m117.76 88.841c0.13348 4.7068-4.0984 8.6176-9.4522 8.7349-5.3538 0.11738-9.8022-3.6031-9.9356-8.3099-0.13346-4.7068 4.0984-8.6175 9.4522-8.7349 5.3538-0.11739 9.8022 3.6031 9.9357 8.3099zm-9.1681-77.978 0.0532 71.214" />
   
   <path d="m 137.16653,88.097885 c 0.17801,4.716062 -4.01682,8.659487 -9.36931,8.80761 -5.35243,0.148341 -9.83576,-3.554499 -10.01403,-8.270723 -0.17801,-4.716062 4.01682,-8.659486 9.36931,-8.80761 5.35243,-0.148341 9.83576,3.554499 10.01403,8.270723 z m -9.5156,-78.063978 0.33708,71.337542">
     <animate id="an1"
              attributeName="d"
              begin="0s;an2.end"
              dur="0.6s"
              values="m 161.58978,80.65174 c 1.69735,4.403627 -0.99243,9.494034 -6.00779,11.369449 -5.01525,1.875605 -10.45689,-0.173723 -12.15455,-4.577417 -1.69735,-4.403625 0.99243,-9.494031 6.00779,-11.369449 5.01524,-1.875605 10.45689,0.173725 12.15455,4.577417 z M 127.27954,9.8891888 150.72628,77.264324;  m 137.16653,88.097885 c 0.17801,4.716062 -4.01682,8.659487 -9.36931,8.80761 -5.35243,0.148341 -9.83576,-3.554499 -10.01403,-8.270723 -0.17801,-4.716062 4.01682,-8.659486 9.36931,-8.80761 5.35243,-0.148341 9.83576,3.554499 10.01403,8.270723 z m -9.5156,-78.063978 0.33708,71.337542"/>
   </path>

 </g>
</svg>

Answer 3

SMIL SVG. Анимация по клику на крайний правый шарик

<svg id="svg" viewBox="-60 45 220 45" height="280px" width="500px">

  <g id="bals">

  <!--шарик 1-->
    <g id="bal1">
      <circle id="b1" r="10.583333" cy="63.5" cx="31.75" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path id="b1_p" transform="scale(0.26458333)" d="M 120 40 L 120 200 L 120 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 2-->
    <g id="bal2">
      <circle r="10.583333" cy="63.5" cx="52.85" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path transform="scale(0.26458333)" d="M 200 40 L 200 200 L 200 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 3-->
    <g id="bal3">
      <circle r="10.583333" cy="63.5" cx="74" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path transform="scale(0.26458333)" d="M 280 40 L 280 200 L 280 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 4-->
    <g id="bal4">
      <circle r="10.583333" cy="63.5" cx="95" fill="url(#gr)" stroke="none" stroke-width="4.99999" />
      <path transform="scale(0.26458333)" d="M 360 40 L 360 200 L 360 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
    </g>
    <!--шарик 5-->
    <g id="bal5">
      <circle id="b5" r="10.583333" cy="63.5" cx="116" fill="url(#gr)" stroke="none" stroke-width="4.99999" cursor="pointer" />
      <path id="b5_p" transform="scale(0.26458333)" d="M 440 40 L 440 200 L 440 40 z" fill="none" stroke="dimgray" stroke-width="1px" />
      </g>
      
      <!--анимация шарика 5-->
      <animateTransform xlink:href="#b5" id="anb5" attributeName="transform" type="translate" begin="bal5.click;anb5.end+0.5s" values="0,0; 25,-7; 0,0" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />
      <animate xlink:href="#b5_p" id="anb5_p" attributeName="d" begin="bal5.click;anb5_p.end+0.5s" values="M 440 40 L 440 200 L 440 40 z; M 440 40 L 516 178 L 440 40 z; M 440 40 L 440 200 L 440 40 z" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />
      
      <!--анимация шарика 1-->
      <animateTransform xlink:href="#b1" id="anb1" attributeName="transform" type="translate" begin="bal5.click+0.5s;anb1.end+0.5s" values="0,0; -25,-7; 0,0" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />
      <animate xlink:href="#b1_p" id="anb1_p" attributeName="d" begin="bal5.click+0.5s;anb1_p.end+0.5s" values="M 120 40 L 120 200 L 120 40 z; M 120 40 L 44 178 L 120 40 z; M 120 40 L 120 200 L 120 40 z" dur="0.5s" repeatCount="1" fill="freeze" restart="whenNotActive" />

    </g>
    
    <!--рамка-->
    <g><rect id="body" fill="none" stroke="darkgray" stroke-width="3.84717" width="127.00001" height="68.791664" x="10.583333" y="10.583333" /><path fill="darkgray" stroke="lightgray" stroke-width="0.5px" d="m 9.2604168,80.879407 -7.9375002,6.433092 145.5208334,10e-7 -7.93749,-6.433092 z" /></g>
    
      <!--градиент для шариков-->
      <radialGradient id="gr" r="100%" fx="30%" fy="30%">
        <stop stop-color="white" offset="10%"></stop>
        <stop stop-color="darkgray" offset="45%"></stop>
        <stop stop-color="gray" offset="100%" stop-opacity="0"/>
    </radialGradient>

<!--текст-->
<text transform="scale(1,0.855)" y="100" x="55" fill="dimgray" stroke="none" stroke-width="0.1" font-size="4px" font-family="sans-serif">Колыбель Ньютона</text>
<text transform="scale(1,0.880)" y="13" x="68" fill="white" stroke="none" stroke-width="0.1" font-size="2px" font-family="sans-serif">@Sevastopol'</text>

</svg>

Answer 4

Рамка нарисована в векторном редакторе и она занимает значительную часть кода.

LIVE DEMO

Собственно сама анимация шариков занимает несколько строк.

 <use xlink:href="#ball" x="180" y="20" >
          <animateTransform id="an5" attributeName="transform" type="rotate"
 begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65"
    keyTimes="0;0.25;0.78;1" repeatCount="1" />
 </use>

Как видно из кода выше, это анимация трансформации вращения шарика type="rotate"

Вместо двух крайних положений в атрибуте values добавил промежуточные положения, чтобы сделать неравномерность анимации на разных участках траектории с помощью keyTimes

keyTimes="0;0.25;0.78;1"
Для правильной анимации вращения нужно точно указать центр вращения. В данном случае его определить легко это начало нити, прикрепляющей шарик <polyline stroke="black" points="160, 65 160,220" /> Для первого шара координаты центра вращения - x="160" y="65"
Для остальных шаров координаты будут со смещением, так как нарисовано в изометрии и применено клонирование <use> со смещением.
Логические цепочки реализующие последовательность выполнения анимаций:

Запуск второй анимации (отскок правого шара id="an5") после завершения первой анимации - удар левого шара id="an1" будет: begin="an1.end"
Зацикливание анимаций

После окончания второй анимации начинается первая анимация

begin="0s;an5.end"

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 500 400" version="1.1">
<defs>
 <g id="ball" fill="url(#Rg)">
  <polyline stroke="black" points="160, 65 160,220" />
  <circle cx="160" cy="220" r="20"  /> 
   
 </g> 
  <radialGradient id="Rg" r="90%" fx="50%" fy="30%">
        <stop stop-color="#F3F3F3" offset="5%"></stop>
        <stop stop-color="#3E3D44" offset="45%"></stop>    
        <stop stop-color="black" offset="100%" stop-opacity="0.72"/>
    </radialGradient>
</defs> 
    <!-- Графика рамки и основания -->
 <path id="base" fill="url(#Rg)" stroke="black" stroke-width="2" d="m134.4 165.9c2.6-1.3 5.6-2.3 8.5-2 91.1 8 238.2 19.6 337.1 30.5 4.8 0.5 11.5 0.4 13.6 4.8 2.6 5.4-3.3 12-6.1 16.9-27.4 47.2-64.8 112-81.7 142.3-2.3 4.1-4.9 9.7-9.1 11.2-3.2 1.1-6.8 1.2-10.2 0.9-2.7-0.2-5.5-0.4-8.4-0.6-58.4-4.4-165.2-14.1-263.3-22.8-26.6-2.4-52.5-4.7-76.7-6.8-6.9-0.6-19.9-0.2-22.4-3.9-2.8-4.1 6.7-13.4 8.5-16.1 35-51.3 76-109.6 102.1-147.7 2-2.9 5-5.1 8.2-6.7z" />
  <path id="edge" fill="url(#Rg)" d="m14.7 342.5c0.8 3.9 5.1 7.2 9 7.9 4.3 0.8 8.9 1.2 11.5 1.4 51.8 4.5 252.3 22.1 351.2 30.7 4.2 0.4 8.7-0.3 12.5-2.2 3.4-1.8 6.3-4.9 8.2-8.2 30.1-52.1 86.9-153.2 86.9-153.2 0-3.9 0-6.6 0-14.6l-57.3 99.3-28.5 49.3c0 0-5 8.6-7.3 12.7-1.7 3-5.3 5.3-9 4.9-7.2-0.6-23-1.5-23-1.5L322.6 365.1 37.3 340.1c-1.7-0.1-20.4 0.3-21.8-4.3-0.8-2.8-1.4 3.9-0.8 6.7z" />
 <ellipse fill="grey" stroke="black" cx="113.1" cy="256" rx="15" ry="9" />
   <ellipse fill="#151515" cx="113.1" cy="256" rx="9" ry="4" />
  <ellipse fill="grey" stroke="black" cx="405.8" cy="281.6" rx="15" ry="9" /> 
    <ellipse fill="#151515" cx="405.8" cy="281.6" rx="9" ry="4" />

 <use xlink:href="#ball" x="20" y="4" > 
   <!-- Анимация левого шара -->
   <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an5.end" dur="0.5s" values="0 160 65;15 160 65;30 160 65;0 160 65" keyTimes="0;0.25;0.78;1" repeatCount="1" />
 </use> 
   <use xlink:href="#ball" x="60" y="8" />
    <use xlink:href="#ball" x="100" y="12" /> 
     <use xlink:href="#ball" x="140" y="16" /> 
       <use xlink:href="#ball" x="180" y="20" > 
      <!-- Анимация правого шара -->
          <animateTransform id="an5" attributeName="transform" type="rotate" begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65"   keyTimes="0;0.25;0.78;1" repeatCount="1" />
 </use>  
 
  <path id="arc" fill="url(#Rg)" d="m109.1 255.6c-0.3-52.5-0.9-112.1-0.5-168.4 0-6.6 2.8-13.7 7.5-18.3 3.9-3.8 9.9-6.3 15.3-5.8L372.6 86c11.2 1.1 25.1 0.4 32.8 8.7 6.8 7.4 5.1 19.6 5.1 29.7v157.6c0 1.7-3.3 1.4-5 1.3-1.7-0.2-4.6-0.4-4.6-2.1V117.8c0-6.1-1.5-12.6-5.7-16.7-2.8-2.6-7.2-2.8-11.1-3.2L132.2 74.1c-3.7-0.3-7.6 1.3-10.3 3.8-2.5 2.3-4.2 5.9-4.2 9.2 0 0-0.6 115.2-0.2 169.2 0 1.7-2.9 2.3-4.6 2.1-1.6-0.2-3.8-1.3-3.8-2.9z" />  
</svg>

Answer 5

Анимация двух шариков поочередно

LIVE DEMO

Добавляется блок анимаций.
Для каждого шара свои координаты центров вращения, а остальное, как и в первом ответе

 <use xlink:href="#ball" x="140" y="10" >  
              <!-- Анимация 4  шарика -->
        <animateTransform id="an4" attributeName="transform" type="rotate"
          begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65" 
           keyTimes="0;0.25;0.75;1" repeatCount="1" />
 </use>
      <use xlink:href="#ball" x="180" y="14" > 
                  <!-- Анимация 5 правого шарика -->
        <animateTransform id="an5" attributeName="transform" type="rotate" 
          begin="an1.end" dur="0.5s" values="0 360 68;-15 360 68;-30 360 68;0 360 68"
          keyTimes="0;0.25;0.75;1" repeatCount="1" />
  </use>

Ниже полный код:

<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="50%" height="50%" viewBox="0 0 500 400" version="1.1">
<defs>
 <g id="ball" fill="url(#Rg)">
  <polyline stroke="black" points="160, 67 160,220" />
  <circle cx="160" cy="220" r="20"  /> 
   
 </g> 
  <radialGradient id="Rg" r="90%" fx="50%" fy="30%">
        <stop stop-color="#F3F3F3" offset="5%"></stop>
        <stop stop-color="#3E3D44" offset="45%"></stop>    
        <stop stop-color="black" offset="100%" stop-opacity="1"/>
    </radialGradient>
</defs>    
        

 <path id="base" fill="url(#Rg)" stroke="black" stroke-width="2" d="m134.4 165.9c2.6-1.3 5.6-2.3 8.5-2 91.1 8 238.2 19.6 337.1 30.5 4.8 0.5 11.5 0.4 13.6 4.8 2.6 5.4-3.3 12-6.1 16.9-27.4 47.2-64.8 112-81.7 142.3-2.3 4.1-4.9 9.7-9.1 11.2-3.2 1.1-6.8 1.2-10.2 0.9-2.7-0.2-5.5-0.4-8.4-0.6-58.4-4.4-165.2-14.1-263.3-22.8-26.6-2.4-52.5-4.7-76.7-6.8-6.9-0.6-19.9-0.2-22.4-3.9-2.8-4.1 6.7-13.4 8.5-16.1 35-51.3 76-109.6 102.1-147.7 2-2.9 5-5.1 8.2-6.7z" />
  <path id="edge" fill="url(#Rg)" d="m14.7 342.5c0.8 3.9 5.1 7.2 9 7.9 4.3 0.8 8.9 1.2 11.5 1.4 51.8 4.5 252.3 22.1 351.2 30.7 4.2 0.4 8.7-0.3 12.5-2.2 3.4-1.8 6.3-4.9 8.2-8.2 30.1-52.1 86.9-153.2 86.9-153.2 0-3.9 0-6.6 0-14.6l-57.3 99.3-28.5 49.3c0 0-5 8.6-7.3 12.7-1.7 3-5.3 5.3-9 4.9-7.2-0.6-23-1.5-23-1.5L322.6 365.1 37.3 340.1c-1.7-0.1-20.4 0.3-21.8-4.3-0.8-2.8-1.4 3.9-0.8 6.7z" />
 <ellipse fill="grey" stroke="black" cx="113.1" cy="256" rx="15" ry="9" />
   <ellipse fill="#151515" cx="113.1" cy="256" rx="9" ry="4" />
  <ellipse fill="grey" stroke="black" cx="405.8" cy="281.6" rx="15" ry="9" /> 
    <ellipse fill="#151515" cx="405.8" cy="281.6" rx="9" ry="4" />
    
 
 
 <use xlink:href="#ball" x="20" y="0" >  
          <!-- Анимация первого левого шарика -->
   <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an5.end" dur="0.5s" values="0 160 65;15 160 65;30 160 65;0 160 65" keyTimes="0;0.25;0.75;1" repeatCount="1" />
 </use> 
   <use xlink:href="#ball" x="60" y="3" >
          <!-- Анимация второго левого шарика -->
     <animateTransform id="an1" attributeName="transform" type="rotate" begin="0s;an5.end" dur="0.5s" values="0 190 65;15 190 65;30 190 65;0 190 65" keyTimes="0;0.25;0.75;1" repeatCount="1" />   
   </use>
    <use xlink:href="#ball" x="100" y="7" /> 
     <use xlink:href="#ball" x="140" y="10" >  
              <!-- Анимация 4  шарика -->
        <animateTransform id="an4" attributeName="transform" type="rotate" begin="an1.end" dur="0.5s" values="0 340 65;-15 340 65;-30 340 65;0 340 65"   keyTimes="0;0.25;0.75;1" repeatCount="1" />
      </use>
          <use xlink:href="#ball" x="180" y="14" > 
                  <!-- Анимация 5 правого шарика -->
              <animateTransform id="an5" attributeName="transform" type="rotate" begin="an1.end" dur="0.5s" values="0 360 68;-15 360 68;-30 360 68;0 360 68"   keyTimes="0;0.25;0.75;1" repeatCount="1" />
           </use>  
     
  <path id="arc" fill="url(#Rg)" d="m109.1 255.6c-0.3-52.5-0.9-112.1-0.5-168.4 0-6.6 2.8-13.7 7.5-18.3 3.9-3.8 9.9-6.3 15.3-5.8L372.6 86c11.2 1.1 25.1 0.4 32.8 8.7 6.8 7.4 5.1 19.6 5.1 29.7v157.6c0 1.7-3.3 1.4-5 1.3-1.7-0.2-4.6-0.4-4.6-2.1V117.8c0-6.1-1.5-12.6-5.7-16.7-2.8-2.6-7.2-2.8-11.1-3.2L132.2 74.1c-3.7-0.3-7.6 1.3-10.3 3.8-2.5 2.3-4.2 5.9-4.2 9.2 0 0-0.6 115.2-0.2 169.2 0 1.7-2.9 2.3-4.6 2.1-1.6-0.2-3.8-1.3-3.8-2.9z" />  
</svg>

БЛОГ НА HUSL

Колыбель Ньютона, анимация демонстрирующая этот эффект

Ответы (5 шт):

LIVE DEMO

Анимация двух шариков поочередно

LIVE DEMO