D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
mcanthony
Full window
Github gist
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>