<audio id="farm-sounds"  preload="auto" loop="true" autoplay src="https://www.dropbox.com/s/l99pb5chnpvlzmd/tick2.wav?raw=1"></audio>      

<svg class="clock-container" viewBox="0 140 600 600">
      
            <defs> 
<filter id="turb">
<feTurbulence id="turbwave"
        type="fractalNoise"
        baseFrequency="0.00002"
        numOctaves="1"
        result="turbulence_2" 
    />
    <feDisplacementMap
        xChannelSelector="R"
        yChannelSelector="G"
        in="SourceGraphic"
        in2="turbulence_1"
        scale="75" 
    />
</filter>
        </defs>
        <svg id="clock"
viewBox="280 -50 700 720" 
             preserveAspectRatio="none" filter="url(#turb)" preserveAspectRatio="midXMidY meet">
            <filter id="a">
             

              <feGaussianBlur stdDeviation="6"/>
            </filter>
                      <path fill="#3F4D43" d="M0 0h1280v756H0z"/>

            <g filter="url(#a)">
              <radialGradient id="b" cx="546.5122" cy="722.1436" r="819.3126" gradientUnits="userSpaceOnUse">
                <stop offset="0" stop-color="#c2ad6b"/>
                <stop offset=".4994" stop-color="#edd990"/>
                <stop offset=".5263" stop-color="#eedb95"/>
                <stop offset="1" stop-color="#fcfdf0"/>
              </radialGradient>
              <ellipse cx="640.1" cy="375.6" fill="url(#b)" rx="212.3" ry="211.5"/>
              <ellipse cx="640.1" cy="375.6" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="10.4839" rx="212.3" ry="211.5"/>
            </g>
            <path fill="#544F29" d="M798.6 321.5s-1.7-1.1-2.3-1.4c-.8-.4-8.3-3.4-9.5-3.9l-148.3 62-.8-1.9-.8-1.9-.8-1.9 148.8-62.2c1.1-2 2-4.5 2.9-6.9.5-1.5 1-3.1 1.4-4.8 0-.1.1-.2.1-.3h.2c8.3 1.7 16.8 2.3 25.1 1.6 2.8-.2 5.5-.6 8.3-1.1-1.4.7-2.8 1.5-4.1 2.3-.4.3-.9.6-1.3.8-.9.6-1.7 1.2-2.5 1.8-.8.6-1.6 1.3-2.4 2-3.1 2.7-5.9 5.8-8.5 9-.9 1.1-1.8 2.2-2.7 3.4-.8 1-1.6 2.1-2.5 3.2-.1.1-.3.2-.3.2z"/>
            <path fill="#544F29" d="M586.2 298.7c2.5.5 5 1.1 7 2l40.9 77.4 5.7-2.7-40.8-77.2c.4-1.2 2.9-8.6 3.2-9.4.3-.7 1.3-2.4 1.3-2.4l-.1-.2c-1.1-.7-2.2-1.3-3.3-2-1.2-.7-2.4-1.5-3.5-2.2-3.4-2.1-6.6-4.4-9.5-7.1l-2.1-2.1c-.7-.7-1.3-1.4-2-2.2-.3-.4-.6-.7-.9-1.1-.9-1.2-1.8-2.3-2.6-3.6.7 2.5 1.2 5.1 1.6 7.7 1.2 7.8 1.1 15.9 0 23.9v.2h.3c1.6.4 3.2.7 4.8 1z"/>
            <radialGradient id="c" cx="659.3574" cy="918.1113" r="34.5967" gradientTransform="matrix(.649 0 0 .606 212.0938 -180.9027)" gradientUnits="userSpaceOnUse">
              <stop offset="0" stop-color="#46411a"/>
              <stop offset=".1558" stop-color="#554923"/>
              <stop offset=".4074" stop-color="#66532e"/>
              <stop offset=".6783" stop-color="#715835"/>
              <stop offset="1" stop-color="#745a37"/>
            </radialGradient>
            <ellipse cx="640" cy="375.5" fill="url(#c)" rx="22.5" ry="21"/>
            <g fill="none" stroke-miterlimit="10">
              <ellipse cx="640" cy="375.5" stroke="#000" stroke-width="21" rx="224.5" ry="224.5"/>
              <ellipse cx="639.8" cy="375.3" stroke="#C1272D" stroke-width="4" filter="url(#a)" rx="224.5" ry="224.5"/>
            </g>
            <path fill="#544F29" stroke="#745A37" stroke-miterlimit="10" stroke-width="1.0019" d="M660.7 180.4l-1.2 11.1m21.6-7.9l-2.4 11m22.3-5.7l-3.5 10.7m22.7-3.3l-4.6 10.3m40.3 10.2l-6.6 9.1m22.6 3.9l-7.5 8.3m22.1 6.2l-8.4 7.5m21.3 8.5l-9.1 6.6m29.7 28.9l-10.3 4.6m17.7 14.6l-10.7 3.5m16 16.3l-11 2.4m14.2 17.9l-11.2 1.2m11.2 39.8l-11.2-1.1m8 21.4l-11.1-2.3m5.7 22.2l-10.7-3.5m3.3 22.6l-10.3-4.5m-10.3 40l-9.1-6.6m-3.9 22.6l-8.4-7.5m-6.2 22l-7.5-8.3m-8.5 21.2l-6.6-9.1M720 554.8l-4.6-10.2m-14.6 17.6l-3.5-10.7m-16.5 16l-2.3-11m-18 14.2l-1.2-11.2m-40 11.1l1.1-11.1m-21.5 7.9l2.3-11m-22.2 5.7l3.5-10.7m-22.8 3.3l4.6-10.3m-40.2-10.2l6.6-9.1m-22.6-3.9l7.5-8.3m-22.1-6.2l8.4-7.5m-21.4-8.5l9.2-6.6M460 455.2l10.3-4.6M452.6 436l10.7-3.5m-16-16.3l11-2.4m-14.2-17.9l11.2-1.2m-11.2-39.9l11.2 1.2m-8-21.4l11.1 2.3m-5.7-22.2l10.7 3.5m-3.3-22.7l10.3 4.6m10.3-40.1l9.2 6.6m3.8-22.5l8.4 7.5m6.2-22l7.6 8.3m8.4-21.2l6.7 9m29-29.5l4.6 10.2m14.7-16.6l3.5 10.7m16.4-17l2.4 11m18-14.2l1.2 11.2"/>
            <path fill="none" stroke="#3F4D43" stroke-miterlimit="10" stroke-width="3.2118" d="M640.1 179.3v29m99.3-2.8l-14.6 25.2m86.5 46.5L786 291.8m51.5 84.4h-29.1m1.7 97.8l-25.2-14.5M639.8 571.7v-29m98.3 2.9l-14.6-25.1m-182 24.9l14.6-25.1m-86.4-46.6l25.2-14.6m-52.4-83.3l29.1-.1m-2.7-98.8l25.3 14.5m47.8-86.1l14.6 25.2"/>
<text transform="matrix(1.18 0 0 1 555.5 444.9336)">
    <tspan x="10" y="0" size="18"></tspan><tspan x="125" y="0" font-family="'Monaco'" font-size="5">©</tspan>
  </text>          </svg>
    </svg>
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    background: #3F4D43;
    color: lemonchiffon;
  position: relative;
  font-family: "Trebuchet MS", sans-serif;
  font-weight: lighter;
}

svg.clock-container {
  position: absolute;
  top: 10vh;
  left: 50vw;
  width: 100vw;
  height: 50vw;
  margin-left: -50vw;
}
    TweenMax.to("#turbwave", 120 ,{
        delay: 3,
        attr:{"baseFrequency":0.02},
        repeat:-1,
        yoyo:true
      });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js