Marble Animation

HTML

CSS

JS

<svg viewBox="0 0 100 100">
  <defs>
    <filter id="blur" x="-100%" y="-100%" width="300%" height="300%">
      <feOffset in="SourceGraphic" dx="0" dy=".2" result="upMe" />
      <feGaussianBlur in="upMe" in2="upMe" stdDeviation=".4"/>
    </filter>
    <radialGradient id="holegrad" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="rgba(50,100,150,0)" />
      <stop offset="100%" stop-color="rgba(0,0,0,1)" />
    </radialGradient>
    <radialGradient id="ballgrad" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="rgba(50,100,150,1)" />
      <stop offset="70%" stop-color="rgba(50,50,150,1)" />
      <stop offset="100%" stop-color="rebeccapurple" />
    </radialGradient>
    <radialGradient id="ballgrad2" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="rgba(30,90,140,1)" />
      <stop offset="70%" stop-color="rgba(30,90,140,1)" />
      <stop offset="100%" stop-color="steelblue" />
    </radialGradient>
    <radialGradient id="ballgrad3" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="darkorange" />
      <stop offset="70%" stop-color="darkorange" />
      <stop offset="100%" stop-color="orange" />
    </radialGradient>
    <radialGradient id="ballgrad4" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="firebrick" />
      <stop offset="70%" stop-color="firebrick" />
      <stop offset="100%" stop-color="red" />
    </radialGradient>
    <radialGradient id="ballgrad5" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="goldenrod" />
      <stop offset="70%" stop-color="goldenrod" />
      <stop offset="100%" stop-color="gold" />
    </radialGradient>
    <radialGradient id="ballgrad6" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="forrestgreen" />
      <stop offset="70%" stop-color="forrestgreen" />
      <stop offset="100%" stop-color="green" />
    </radialGradient>
    <radialGradient id="ballgrad7" cx="0.5" cy="0.8" fx="0.5" fy="0.9" fr=".9">
      <stop offset="0%" stop-color="#abc" />
      <stop offset="70%" stop-color="#abc" />
      <stop offset="100%" stop-color="#cdf" />
    </radialGradient>
    <mask id="m">
      
      <rect height="53" width="100" fill="#fff" />
      <ellipse cx="10" cy="52" rx="5" ry="3" fill="#fff" />
      <ellipse cx="90" cy="52" rx="5" ry="3" fill="#fff" />
    </mask>
  </defs>
  <g transform="translate(0 25)">
    <g transform="translate(45 0) scale(0.1)">
      <g id="ballHopGlow0">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop0">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="3s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur=".9s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad7)" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="translate(40 0) scale(0.2)">
      <g id="ballHopGlow1">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.9s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop1">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.9s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur="1.1s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad6)" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="translate(35 0) scale(0.3)">
      <g id="ballHopGlow2">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.8s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop2">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.8s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur=".8s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad5)" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="translate(27.5 0) scale(0.45)">
      <g id="ballHopGlow3">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.7s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop3">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.7s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur=".7s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad4)" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="translate(20 0) scale(0.6)">
      <g id="ballHopGlow4">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.6s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop4">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.6s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur="1.2s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad3)" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g transform="translate(10 0) scale(0.8)">
      <g id="ballHopGlow5">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop5">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.5s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur="1.1s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad2)" />
            </g>
          </g>
        </g>
      </g>
    </g>
    <g>
      <g id="ballHopGlow6">
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.4s" repeatCount="indefinite" />
            <g>
              <circle cx="10" cy="50" r="5" fill="#fff" filter="url(#blur)" />
            </g>
          </g>
        </g>
      </g>
      <g id="ballHop6">
        <ellipse cx="10" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <ellipse cx="90" cy="52" rx="5" ry="3" fill="url(#holegrad)" />
        <g mask="url(#m)">
          <g>
            <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2.4s" repeatCount="indefinite" />
            <g>
              <animateTransform attributeName="transform" type="rotate" from="0 10 50" to="360 10 50" dur="1.1s" repeatCount="indefinite" />
              <circle cx="10" cy="50" r="5" fill="url(#ballgrad)" />
            </g>
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>

Ad #1

Ad #2