پیش‌نمایش زنده
کد HTML
<div id="wholeThing">
  <div id="newtonsCradle">
    <svg
      id="svg1"
      version="1.1"
      viewBox="0 0 132.29166 132.29167"
      height="500"
      width="500"
    >
      <defs id="defs1">
        <linearGradient id="linearGradient20">
          <stop
            id="stop20"
            offset="0"
            style="stop-color:#444443;stop-opacity:1;"
          ></stop>
          <stop
            id="stop21"
            offset="1"
            style="stop-color:#5b5b5b;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient18">
          <stop
            id="stop18"
            offset="0"
            style="stop-color:#121212;stop-opacity:1;"
          ></stop>
          <stop
            id="stop19"
            offset="1"
            style="stop-color:#282828;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient16">
          <stop
            id="stop16"
            offset="0"
            style="stop-color:#000000;stop-opacity:1;"
          ></stop>
          <stop
            id="stop17"
            offset="1"
            style="stop-color:#1e1e1e;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <filter
          height="4.5998159"
          width="3.7954709"
          y="-1.799908"
          x="-1.3977355"
          id="filter10"
          style="color-interpolation-filters:sRGB"
        >
          <feGaussianBlur
            id="feGaussianBlur10"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix10"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
            id="feGaussianBlur11"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix16"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="blur"
            stdDeviation="0.41 0.81"
            id="feGaussianBlur16"
          ></feGaussianBlur>
        </filter>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="90.117599"
          x2="109.67596"
          y1="90.117599"
          x1="26.060976"
          id="linearGradient17"
          xlink:href="#linearGradient16"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="93.394592"
          x2="109.54661"
          y1="93.394592"
          x1="26.190332"
          id="linearGradient19"
          xlink:href="#linearGradient18"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="65.54007"
          x2="106.7439"
          y1="65.54007"
          x1="29.165503"
          id="linearGradient21"
          xlink:href="#linearGradient20"
        ></linearGradient>
      </defs>
      <g style="display:none" transform="translate(-5.3466899)" id="g4">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect4"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="path4"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-19.737668)" id="g5">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect5"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle5"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-12.542179)" id="g6">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect6"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle6"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-26.933157)" id="g7">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect7"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle7"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-41.324135)" id="g8">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect8"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle8"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:inline" transform="translate(-34.128646)" id="g9">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect9"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle9"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="51.440331"
        id="path10"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="58.684235"
        id="circle11"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="65.885017"
        id="circle12"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="73.0858"
        id="circle13"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="80.243469"
        id="circle14"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="87.444252"
        id="circle15"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <rect
        ry="11.544399"
        y="35.930824"
        x="29.721762"
        height="59.218491"
        width="76.465881"
        id="rect2"
        style="display:inline;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:url(#linearGradient21);stroke-width:1.11252;stroke-dashoffset:3.02929;stroke-opacity:1"
      ></rect>
      <g style="display:inline" id="g10">
        <rect
          ry="4.8292685"
          y="82.270035"
          x="26.560976"
          height="15.695122"
          width="82.614983"
          id="rect1"
          style="display:inline;fill:url(#linearGradient17);fill-rule:evenodd;stroke:#010101;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <rect
          ry="0"
          y="88.710266"
          x="26.576561"
          height="9.3686581"
          width="82.583817"
          id="rect3"
          style="display:inline;fill:url(#linearGradient19);fill-rule:evenodd;stroke:#010101;stroke-width:0.772457;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
      </g>
      <circle
        transform="matrix(0.79363708,-0.63832613,0.58845302,0.73162938,-28.434837,90.707112)"
        r="1.1935177"
        cy="85.014572"
        cx="105.61591"
        id="circle16"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
    </svg>
  </div>
  <div id="newtonsCradleLeft">
    <svg
      id="svg1"
      version="1.1"
      viewBox="0 0 132 132.00001"
      height="132mm"
      width="132mm"
    >
      <defs id="defs1">
        <linearGradient id="linearGradient20">
          <stop
            id="stop20"
            offset="0"
            style="stop-color:#444443;stop-opacity:1;"
          ></stop>
          <stop
            id="stop21"
            offset="1"
            style="stop-color:#5b5b5b;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient18">
          <stop
            id="stop18"
            offset="0"
            style="stop-color:#121212;stop-opacity:1;"
          ></stop>
          <stop
            id="stop19"
            offset="1"
            style="stop-color:#282828;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient16">
          <stop
            id="stop16"
            offset="0"
            style="stop-color:#000000;stop-opacity:1;"
          ></stop>
          <stop
            id="stop17"
            offset="1"
            style="stop-color:#1e1e1e;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <filter
          height="4.5998159"
          width="3.7954709"
          y="-1.799908"
          x="-1.3977355"
          id="filter10"
          style="color-interpolation-filters:sRGB"
        >
          <feGaussianBlur
            id="feGaussianBlur10"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix10"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
            id="feGaussianBlur11"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix16"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="blur"
            stdDeviation="0.41 0.81"
            id="feGaussianBlur16"
          ></feGaussianBlur>
        </filter>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="90.117599"
          x2="109.67596"
          y1="90.117599"
          x1="26.060976"
          id="linearGradient17"
          xlink:href="#linearGradient16"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="93.394592"
          x2="109.54661"
          y1="93.394592"
          x1="26.190332"
          id="linearGradient19"
          xlink:href="#linearGradient18"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="65.54007"
          x2="106.7439"
          y1="65.54007"
          x1="29.165503"
          id="linearGradient21"
          xlink:href="#linearGradient20"
        ></linearGradient>
      </defs>
      <g style="display:none" transform="translate(-5.3466899)" id="g4">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect4"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="path4"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-19.737668)" id="g5">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect5"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle5"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-12.542179)" id="g6">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect6"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle6"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-26.933157)" id="g7">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect7"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle7"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-41.324135)" id="g8">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect8"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle8"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="51.440331"
        id="path10"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="65.885017"
        id="circle12"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="73.0858"
        id="circle13"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="80.243469"
        id="circle14"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="87.444252"
        id="circle15"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <rect
        ry="11.544399"
        y="35.930824"
        x="29.721762"
        height="59.218491"
        width="76.465881"
        id="rect2"
        style="display:none;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:url(#linearGradient21);stroke-width:1.11252;stroke-dashoffset:3.02929;stroke-opacity:1"
      ></rect>
      <g style="display:none" id="g10">
        <rect
          ry="4.8292685"
          y="82.270035"
          x="26.560976"
          height="15.695122"
          width="82.614983"
          id="rect1"
          style="display:inline;fill:url(#linearGradient17);fill-rule:evenodd;stroke:#010101;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <rect
          ry="0"
          y="88.710266"
          x="26.576561"
          height="9.3686581"
          width="82.583817"
          id="rect3"
          style="display:inline;fill:url(#linearGradient19);fill-rule:evenodd;stroke:#010101;stroke-width:0.772457;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
      </g>
      <circle
        transform="matrix(0.79363708,-0.63832613,0.58845302,0.73162938,-28.434837,90.707112)"
        r="1.1935177"
        cy="85.014572"
        cx="105.61591"
        id="circle16"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <g
        style="display:inline"
        transform="translate(-25.987986,30.001531)"
        id="g9"
      >
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect9"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle9"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="91.844185"
        cx="66.824898"
        id="circle11"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
    </svg>
  </div>
  <div id="newtonsCradleRight">
    <svg
      id="svg1"
      version="1.1"
      viewBox="0 0 132 132.00001"
      height="132mm"
      width="132mm"
    >
      <defs id="defs1">
        <linearGradient id="linearGradient20">
          <stop
            id="stop20"
            offset="0"
            style="stop-color:#444443;stop-opacity:1;"
          ></stop>
          <stop
            id="stop21"
            offset="1"
            style="stop-color:#5b5b5b;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient18">
          <stop
            id="stop18"
            offset="0"
            style="stop-color:#121212;stop-opacity:1;"
          ></stop>
          <stop
            id="stop19"
            offset="1"
            style="stop-color:#282828;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <linearGradient id="linearGradient16">
          <stop
            id="stop16"
            offset="0"
            style="stop-color:#000000;stop-opacity:1;"
          ></stop>
          <stop
            id="stop17"
            offset="1"
            style="stop-color:#1e1e1e;stop-opacity:1;"
          ></stop>
        </linearGradient>
        <filter
          height="4.5998159"
          width="3.7954709"
          y="-1.799908"
          x="-1.3977355"
          id="filter10"
          style="color-interpolation-filters:sRGB"
        >
          <feGaussianBlur
            id="feGaussianBlur10"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix10"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="fbSourceGraphic"
            stdDeviation="0.41 0.41"
            id="feGaussianBlur11"
          ></feGaussianBlur>
          <feColorMatrix
            id="feColorMatrix16"
            values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
            in="fbSourceGraphic"
            result="fbSourceGraphicAlpha"
          ></feColorMatrix>
          <feGaussianBlur
            in="fbSourceGraphic"
            result="blur"
            stdDeviation="0.41 0.81"
            id="feGaussianBlur16"
          ></feGaussianBlur>
        </filter>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="90.117599"
          x2="109.67596"
          y1="90.117599"
          x1="26.060976"
          id="linearGradient17"
          xlink:href="#linearGradient16"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="93.394592"
          x2="109.54661"
          y1="93.394592"
          x1="26.190332"
          id="linearGradient19"
          xlink:href="#linearGradient18"
        ></linearGradient>
        <linearGradient
          gradientUnits="userSpaceOnUse"
          y2="65.54007"
          x2="106.7439"
          y1="65.54007"
          x1="29.165503"
          id="linearGradient21"
          xlink:href="#linearGradient20"
        ></linearGradient>
      </defs>
      <g style="display:none" transform="translate(-5.3466899)" id="g4">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect4"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="path4"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-19.737668)" id="g5">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect5"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle5"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-12.542179)" id="g6">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect6"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle6"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-26.933157)" id="g7">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect7"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle7"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <g style="display:none" transform="translate(-41.324135)" id="g8">
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect8"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle8"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="51.440331"
        id="path10"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="65.885017"
        id="circle12"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="73.0858"
        id="circle13"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="80.243469"
        id="circle14"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <circle
        r="1.1935177"
        cy="61.842655"
        cx="87.444252"
        id="circle15"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <rect
        ry="11.544399"
        y="35.930824"
        x="29.721762"
        height="59.218491"
        width="76.465881"
        id="rect2"
        style="display:none;fill:#000000;fill-opacity:0;fill-rule:evenodd;stroke:url(#linearGradient21);stroke-width:1.11252;stroke-dashoffset:3.02929;stroke-opacity:1"
      ></rect>
      <g style="display:none" id="g10">
        <rect
          ry="4.8292685"
          y="82.270035"
          x="26.560976"
          height="15.695122"
          width="82.614983"
          id="rect1"
          style="display:inline;fill:url(#linearGradient17);fill-rule:evenodd;stroke:#010101;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <rect
          ry="0"
          y="88.710266"
          x="26.576561"
          height="9.3686581"
          width="82.583817"
          id="rect3"
          style="display:inline;fill:url(#linearGradient19);fill-rule:evenodd;stroke:#010101;stroke-width:0.772457;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
      </g>
      <circle
        transform="matrix(0.79363708,-0.63832613,0.58845302,0.73162938,-28.434837,90.707112)"
        r="1.1935177"
        cy="85.014572"
        cx="105.61591"
        id="circle16"
        style="display:none;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
      <g
        style="display:inline"
        transform="translate(-25.987986,30.001531)"
        id="g9"
      >
        <rect
          y="35.86314"
          x="91.71965"
          height="24.620096"
          width="0.53350371"
          id="rect9"
          style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:0.527475;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></rect>
        <circle
          r="3.5977447"
          cy="62.930038"
          cx="92.009483"
          id="circle9"
          style="fill:#323232;fill-opacity:1;fill-rule:evenodd;stroke:#444443;stroke-width:1;stroke-dashoffset:3.02929;stroke-opacity:0"
        ></circle>
      </g>
      <circle
        r="1.1935177"
        cy="91.844185"
        cx="66.824898"
        id="circle11"
        style="display:inline;fill:#ffffff;fill-opacity:0.950125;fill-rule:evenodd;stroke:#444443;stroke-width:0.768888;stroke-dashoffset:3.02929;stroke-opacity:0;filter:url(#filter10)"
      ></circle>
    </svg>
  </div>
</div>
کد CSS
#wholeThing {
  height: 700px;
  width: 500px;
  scale: 0.8;
}

#newtonsCradle,
#newtonsCradleLeft,
#newtonsCradleRight {
  position: absolute;
}

#newtonsCradle {
  top: 90px;
  left: -115px; /*Use top and left to change the position of the newton's cradle*/
}

#newtonsCradleRight {
  animation: swingRight 2s infinite both;
  animation-delay: 1s;
  rotate: -90deg;
  grid-area: right;
  top: -24px;
  left: -37px; /*Use top and left to change the position of the right swinging ball*/
}

@keyframes swingRight {
  0% {
    rotate: -90deg;
  }

  30% {
    rotate: 0deg;
  }

  75% {
    rotate: 0deg;
  }

  100% {
    rotate: -90deg;
  }
}

#newtonsCradleLeft {
  animation: swingLeft 2s infinite both ease-out;
  rotate: 90deg;
  grid-area: left;
  top: -24px;
  left: -173px; /*Use top and left to change the position of the left swinging ball*/
}

@keyframes swingLeft {
  0% {
    rotate: 90deg;
  }

  30% {
    rotate: 0deg;
  }

  75% {
    rotate: 0deg;
  }

  100% {
    rotate: 90deg;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06