SVG Molecule v.2

<h4>SVG Molecule v.2</h4>

<div class="svg-container">

<svg 

   viewBox="0 0 288 288"

   x="0px" y="0px"

   xmlns="https://www.w3.org/2000/svg"

   version="1.1"

   preserveAspectRatio="xMinYMin meet

class="svg">

  <g transform="translate(144,144)" stroke-width="2" stroke="#444444" fill="none" >

   <circle cx="0" r="110" stroke-width="2" stroke="#999999" fill="">

<animateTransform 

          attributeType="xml" 

          attributeName="transform" 

          type="scale" 

          values="1;0.2;1" 

          dur="9s" 

          repeatCount="indefinite"

        />

   </circle>

     <circle cx="0" r="64" stroke-width="4" stroke="cyan">

    <animateTransform 

          attributeType="xml" 

          attributeName="transform" 

          type="scale" 

          values="1.2;0.4;1.2" 

          dur="5s" 

          repeatCount="indefinite"

        />

    </circle>

    <circle cx="0" r="32" stroke-width="2" stroke="cyan">

    <animateTransform 

          attributeType="xml" 

          attributeName="transform" 

          type="scale" 

          values="1;2;1" 

          dur="5s" 

          repeatCount="indefinite"

        />

    </circle>

    <circle cx="0" r="16" stroke-width="2" stroke="cyan">

    <animateTransform 

          attributeType="xml" 

          attributeName="transform" 

          type="scale" 

          values="0.6;1.2;0.6" 

          dur="3s" 

          repeatCount="indefinite"

        />

    </circle>

    <g>

    <circle cx="64" r="64"/>

     <circle cx="64" r="64"  transform="rotate(120)"/>

     <circle cx="64" r="64"  transform="rotate(240)"/>

        <animateTransform 

          attributeType="xml" 

          attributeName="transform" 

          type="rotate" 

          values="0 0 0; 360 0 0" 

          dur="10s" 

          additive="sum" 

          repeatCount="indefinite"

        />

    </g>

​

​

    <g>

    <circle cx="64" r="64" transform="rotate(60)"/>

    <circle cx="64" r="64" transform="rotate(180)"/>

    <circle cx="64" r="64" transform="rotate(300)"/>

    <animateTransform 

          attributeType="xml" 

          attributeName="transform" 

          type="rotate" 

          values="0 0 0; 360 0 0" 

          dur="10s" 

          additive="sum" 

          repeatCount="indefinite"

        />

    </g>

  </g>

</svg>

</div>

<!--dc logo -->  

<a class="dc-logo" href="https://digitalcraft.co"><svg version="1.1" id="digital-craft" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px"width="43.43px" height="49.313px" viewBox="0 0 43.43 49.313" enable-background="new 0 0 43.43 49.313" xml:space="preserve"><path fill="rgba(0,0,0,0.4)" d="M42.08,11.34L23.065,0.362c-0.836-0.482-1.865-0.482-2.701,0L1.35,11.34C0.515,11.822,0,12.714,0,13.679v21.956c0,0.965,0.515,1.856,1.35,2.339l19.014,10.978c0.418,0.241,0.884,0.362,1.35,0.362c0.466,0,0.933-0.121,1.35-0.362L42.08,37.973c0.836-0.482,1.35-1.374,1.35-2.339V13.679C43.43,12.714,42.915,11.822,42.08,11.34z"/><polygon fill="#6E6F71" points="29.127,21.537 14.302,21.537 7.594,28.243 12.535,33.189 21.715,24.009 30.892,33.189 35.836,28.243"/><polygon fill="#00FFFE" points="34.529,17.905 25.492,17.905 21.715,14.126 17.937,17.905 8.9,17.905 8.9,20.078 34.529,20.078"/></svg></a>