Responsive SVG using some SMIL magic. #CodePenFriday
A Pen by Chris Kelley on CodePen.
Created
October 5, 2015 08:59
-
-
Save mcanthony/679f5458add23e0449fa to your computer and use it in GitHub Desktop.
SVG Molecule v.2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h4>SVG Molecule v.2</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="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="http://digitalcraft.co"><svg version="1.1" id="digital-craft" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*nope*/ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| .dc-logo { | |
| position: fixed; | |
| right: 10px; | |
| bottom: 10px; | |
| } | |
| .dc-logo:hover svg{ | |
| transform-origin: 50% 50%; | |
| animation: arrow-spin 2.5s 0s cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite; | |
| } | |
| .dc-logo:hover:before { | |
| content:'\2764'; | |
| padding: 6px; | |
| font: 10px/1 Monaco, sans-serif; | |
| font-size:10px; | |
| color: #00fffe; | |
| text-transform:uppercase; | |
| position: absolute; | |
| left: -70px; | |
| top: -30px; | |
| white-space: nowrap; | |
| z-index: 20px; | |
| box-shadow: 0px 0px 4px #222; | |
| background:#111; | |
| } | |
| .dc-logo:hover:after { | |
| content:'Digital Craft'; | |
| padding: 6px; | |
| font: 10px/1 Monaco, sans-serif; | |
| font-size:10px; | |
| color: #6E6F71; | |
| text-transform:uppercase; | |
| position: absolute; | |
| right: 0; | |
| top: -30px; | |
| white-space: nowrap; | |
| z-index: 20px; | |
| box-shadow: 0px 0px 4px #222; | |
| background:#111; | |
| background-image:none; | |
| } | |
| @keyframes arrow-spin { | |
| 50% { | |
| transform: rotateY(360deg); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment