JSFiddle - React, Tailwind, and code Playground
by nhoizey
HTML
<?xml version="1.0"?>
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="board" viewBox="0 0 320 200" width="100%" height="100%" preserveAspectRatio="xMidYMin meet">
<symbol id="ball" width="32" height="32" xmlns="http://www.w3.org/2000/svg">
<circle stroke-width="1" cx="16" cy="16" r="15" style="fill: #f39c12; stroke: #e67e22" />
</symbol>
<symbol id="spring" width="32" height="16" xmlns="http://www.w3.org/2000/svg">
<path d="M0,0 L0,16 L8,0 L8,16 L16,0 L16,16 L24,0 L24,16 L32,0 L32,16" style="stroke-width: 2; stroke: #333; fill: none;" />
</symbol>
<path d="M0,4 L316,4 L316,196 L0,196 Z" style="stroke-width: 1; stroke: #777; fill: none;" />
<use xlink:href="#ball" x="32" y="64" >
<animate attributeName="x" dur="2s" values="32;14;32" repeatCount="indefinite"/>
</use>
<use xlink:href="#spring" x="0" y="72">
<animateTransform attributeName="transform" type="scale" attributeType="xml" begin="0" dur="2s" values="1,1;0.5,1;1,1" repeatCount="indefinite"/>
</use>
<use xlink:href="#ball" x="252" y="64" >
<animate attributeName="x" dur="2s" values="252;268;252" repeatCount="indefinite"/>
</use>
<use xlink:href="#spring" >
<animateTransform attributeName="transform" type="translate" attributeType="xml" begin="0" dur="2s" values="316,88" repeatCount="indefinite" />
<animateTransform attributeName="transform" type="scale" attributeType="xml" begin="0" dur="2s" values="-1,-1" repeatCount="indefinite" additive="sum" />
<animateTransform attributeName="transform" type="scale" attributeType="xml" begin="0" dur="2s" values="1,1;0.5,1;1,1" repeatCount="indefinite" additive="sum" />
</use>
<circle cx="316" cy="88" fill="black" r="5" />
<!-- 316 = x max || 88 = 72 (hauteur y du premier point du path du ressort de gauche) + 16 (hauteur du ressort) -->
<!-- 316,88 c'est le pendant du suivant -->
<circle cx="0" cy="72"...