SVG Molecule v.1

In this example below you will see how to do a SVG Molecule v.1 with some HTML / CSS and Javascript

Responsive SVG using some SMIL magic.

Thumbnail
This awesome code was written by digitalcraft, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright digitalcraft ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG Molecule v.1</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h4>SVG Molecule v.1</h4>
<div class="svg-container">
<svg 
   viewBox="0 0 288 288"
   x="0px" y="0px"
   xmlns="http://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="130" stroke-width="3" stroke="#000"/>-->
    <circle cx="0" r="64" stroke-width="4" stroke="cyan"/>
    <circle cx="64" r="64" stroke="#888888"/>
    <circle cx="64" r="64" transform="rotate(60)" />
    <circle cx="64" r="64" stroke="#888888" transform="rotate(120)" />
    <circle cx="0" r="32" stroke-width="2" stroke="cyan"/>
    <circle cx="64" r="64" transform="rotate(180)" />
    <circle cx="64" r="64" stroke="#888888" transform="rotate(240)" />
    <circle cx="64" r="64" transform="rotate(300)" />
    <animateTransform 
      attributeType="xml" 
      attributeName="transform" 
      type="rotate" 
      values="0 0 0; 360 0 0" 
      dur="5s" 
      additive="sum" 
      repeatCount="indefinite"
    />
  </g>
</svg>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/digitalcraft/svg-molecule-v1-qdbdJd */
/* Center the demo */
html, body { height: 100%;overflow:hidden }
body {
	display: flex;
	justify-content: center;
	align-items: center;
  background: #222428;
}
.svg-container {
  display: inline-block;
  position: relative;
  height: 0;
  width: 50%;
  padding: 0;
  padding-bottom: 50%;
  vertical-align: middle;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
}

.svg {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}

h4{
  position:absolute;
  left:10px;
  top:10px; 
  font: 14px/21px Monaco, sans-serif;
  color: #888;
  height:100%;
  min-height: 100%;
  margin:0;
}

Comments