Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <?xml version="1.0" encoding="UTF-8"?>
<svg width="232px" height="232px" viewBox="0 0 232 232" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<style type="text/css">

    #atom .icon,
     #dna .icon {
       transform-box: fill-box;
       transform-origin: center center;
    }

    #atom .icon {
      animation: anicolor 2.0s linear infinite 1s;
    }

    #dna .icon {
      animation: anicolor 2.5s linear infinite 4s;
    }

    @keyframes anicolor {
      from {
        fill: #bbb;
        transform: rotate(0deg);
      }

      to {
        fill: #ddd;
        /*transform-origin: initial;*/
        transform: rotate(359deg);
      }
    }
	</style>
    <g id="background-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="background" fill="#F7F7FA" x="0" y="0" width="232" height="232"></rect>
        <g id="atom" transform="translate(181.000000, 40.000000)" fill="#bbbbbb">
            <g class="icon">
              <path d="M9.64444444,0.7876 C7.89777778,0.7876 6.02444444,4.466 6.02444444,9.944 C6.02444444,15.4198 7.89777778,19.1004 9.64444444,19.1004 C11.3933333,19.1004 13.2666667,15.4198 13.2666667,9.944 C13.2666667,4.466 11.3933333,0.7876 9.64444444,0.7876 Z M9.64444444,19.888 C7.16888889,19.888 5.22888889,15.5188 5.22888889,9.944 C5.22888889,4.367 7.16888889,-1.42108547e-14 9.64444444,-1.42108547e-14 C12.1222222,-1.42108547e-14 14.0622222,4.367 14.0622222,9.944 C14.0622222,15.5188 12.1222222,19.888 9.64444444,19.888 Z" id="Fill-460"></path>
            <path d="M4.06444444,4.5386 C2.79777778,4.5386 1.90666667,4.8796 1.56222222,5.4956 C1.12888889,6.2678 1.51333333,7.4998 2.61555556,8.8792 C3.80666667,10.373 5.68,11.8624 7.88666667,13.0768 C10.4711111,14.498 13.2155556,15.3472 15.2266667,15.3472 C16.4955556,15.3472 17.3822222,15.0062 17.7288889,14.3902 C18.1622222,13.6202 17.7777778,12.3882 16.6777778,11.0066 C15.4844444,9.515 13.6133333,8.0234 11.4044444,6.8112 C8.82222222,5.3878 6.07777778,4.5386 4.06444444,4.5386 Z M15.2266667,16.1348 C13.0533333,16.1348 10.2377778,15.2702 7.5,13.7654 C5.20444444,12.5026 3.24666667,10.9406 1.99111111,9.3676 C0.66,7.7022 0.26,6.1908 0.864444444,5.115 C1.36444444,4.2218 2.47111111,3.751 4.06444444,3.751 C6.23777778,3.751 9.05555556,4.6156 11.7911111,6.1204 C14.0888889,7.3832 16.0444444,8.9452 17.3,10.5204 C18.6311111,12.1836 19.0288889,13.6972 18.4244444,14.773 C17.9244444,15.664 16.82,16.1348 15.2266667,16.1348 Z" id="Fill-461"></path>
            <path d="M15.2177778,4.5562 C13.2111111,4.5562 10.4733333,5.3966 7.89555556,6.8024 C5.68444444,8.0102 3.80666667,9.4952 2.61111111,10.9846 C1.50444444,12.3618 1.11777778,13.5916 1.54666667,14.3616 C1.89333333,14.9842 2.79111111,15.3274 4.07111111,15.3274 C6.08,15.3274 8.81777778,14.487 11.3933333,13.0812 C13.6044444,11.8734 15.4822222,10.3884 16.68,8.899 C17.7844444,7.524 18.1733333,6.292 17.7444444,5.522 C17.3955556,4.8994 16.5,4.5562 15.2177778,4.5562 Z M4.07111111,16.115 C2.46444444,16.115 1.34888889,15.6398 0.851111111,14.7422 C0.248888889,13.6642 0.653333333,12.155 1.98888889,10.494 C3.24888889,8.9254 5.21111111,7.37 7.51111111,6.1138 C10.24,4.6222 13.0488889,3.7664 15.2177778,3.7664 C16.8266667,3.7664 17.94,4.2438 18.44,5.1414 C19.0422222,6.2194 18.6377778,7.7286 17.3022222,9.3918 C16.04,10.9582 14.08,12.5136 11.7777778,13.772 C9.04888889,15.2614 6.23777778,16.115 4.07111111,16.115 Z" id="Fill-462"></path>
            <path d="M9.64444444,9.1476 C9.20222222,9.1476 8.84444444,9.504 8.84444444,9.9418 C8.84444444,10.3796 9.20222222,10.7338 9.64444444,10.7338 C10.0866667,10.7338 10.4466667,10.3796 10.4466667,9.9418 C10.4466667,9.504 10.0866667,9.1476 9.64444444,9.1476 Z M9.64444444,11.5236 C8.76444444,11.5236 8.04666667,10.8152 8.04666667,9.9418 C8.04666667,9.0706 8.76444444,8.36 9.64444444,8.36 C10.5266667,8.36 11.2422222,9.0706 11.2422222,9.9418 C11.2422222,10.8152 10.5266667,11.5236 9.64444444,11.5236 Z" id="Fill-463"></path>
            <path d="M13.24,17.7452 C13.24,18.3898 12.7111111,18.9134 12.06,18.9134 C11.4088889,18.9134 10.88,18.3898 10.88,17.7452 C10.88,17.1006 11.4088889,16.577 12.06,16.577 C12.7111111,16.577 13.24,17.1006 13.24,17.7452" id="Fill-464"></path>
            <path d="M2.35777778,8.2522 C2.35777778,8.8968 1.83111111,9.4204 1.18,9.4204 C0.528888889,9.4204 -3.90798505e-14,8.8968 -3.90798505e-14,8.2522 C-3.90798505e-14,7.6076 0.528888889,7.084 1.18,7.084 C1.83111111,7.084 2.35777778,7.6076 2.35777778,8.2522" id="Fill-465"></path>
            <path d="M16.8222222,4.1448 C16.8222222,4.7894 16.2933333,5.313 15.6422222,5.313 C14.9911111,5.313 14.4644444,4.7894 14.4644444,4.1448 C14.4644444,3.5002 14.9911111,2.9766 15.6422222,2.9766 C16.2933333,2.9766 16.8222222,3.5002 16.8222222,4.1448" id="Fill-466"></path>
          </g>
        </g>
        <g id="dna" transform="translate(201.000000, 191.000000)" fill="#bbbbbb">
            <path d="M8.6482,9.81675 C7.8364,11.259 6.303,14.733 7.4206,16.3935 C8.1796,17.5185 10.076,17.75475 11.5324,17.75475 C12.5598,17.75475 13.4684,17.6355 13.871,17.57475 C14.6806,16.1325 16.2096,12.6585 15.092,10.998 C14.3374,9.873 12.441,9.63675 10.9824,9.63675 C9.955,9.63675 9.0486,9.75375 8.6482,9.81675 Z M11.5324,18.76275 C9.0684,18.76275 7.4118,18.1575 6.6088,16.965 C4.8378,14.33025 7.7946,9.30825 7.9222,9.0945 C7.9948,8.973 8.1136,8.8875 8.2522,8.8605 C8.3028,8.8515 9.5106,8.62875 10.9824,8.62875 C13.4442,8.62875 15.1008,9.234 15.9038,10.4265 C17.6748,13.06125 14.7202,18.08325 14.597,18.29475 C14.5244,18.4185 14.4034,18.504 14.2648,18.52875 C14.212,18.54 13.0042,18.76275 11.5324,18.76275 Z" id="Fill-403"></path>
            <path d="M12.848,25.857 C12.6918,25.857 12.5378,25.7805 12.4432,25.641 C10.6744,23.004 13.6268,17.98425 13.7544,17.7705 C13.827,17.649 13.948,17.56575 14.0844,17.53875 C14.3264,17.49375 19.9628,16.47 21.7382,19.10475 C21.8922,19.33425 21.8372,19.647 21.6106,19.8045 C21.3928,19.95975 21.0826,19.90575 20.9264,19.67625 C19.8066,18.01125 16.0908,18.2295 14.4826,18.4905 C13.6708,19.9305 12.1396,23.40675 13.255,25.0695 C13.409,25.299 13.3496,25.61175 13.1296,25.76925 C13.0416,25.82775 12.947,25.857 12.848,25.857" id="Fill-404"></path>
            <path d="M5.7266,10.0845 C3.9424,10.0845 1.7622,9.7515 0.7766,8.28675 C0.6204,8.05725 0.6798,7.7445 0.902,7.587 C1.1286,7.43175 1.4322,7.48575 1.5884,7.71525 C2.7038,9.37575 6.4284,9.1575 8.0344,8.901 C8.8462,7.45875 10.3774,3.9825 9.262,2.322 C9.108,2.0925 9.163,1.77975 9.3896,1.62225 C9.6118,1.46925 9.9198,1.521 10.0716,1.7505 C11.8426,4.38525 8.888,9.40725 8.7604,9.61875 C8.6878,9.7425 8.569,9.82575 8.4304,9.85275 C8.3226,9.873 7.1522,10.0845 5.7266,10.0845" id="Fill-405"></path>
            <path d="M1.9492,9.225 C1.8546,9.225 1.7622,9.18 1.7028,9.0945 C1.6104,8.95725 1.6456,8.76825 1.782,8.67375 L10.0892,2.83275 C10.2234,2.74275 10.4082,2.77425 10.4984,2.9115 C10.5908,3.0465 10.5578,3.23775 10.4236,3.33 L2.1142,9.17325 C2.0636,9.207 2.0042,9.225 1.9492,9.225" id="Fill-406"></path>
            <path d="M4.1184,9.7785 C4.0238,9.7785 3.9314,9.73125 3.8742,9.648 C3.7818,9.51075 3.8148,9.32175 3.949,9.22725 L9.6272,5.2335 C9.7636,5.1435 9.9462,5.175 10.0386,5.31225 C10.131,5.4495 10.098,5.6385 9.9616,5.733 L4.2856,9.7245 C4.2328,9.7605 4.1734,9.7785 4.1184,9.7785" id="Fill-407"></path>
            <path d="M8.2544,17.973 C8.1642,17.973 8.074,17.93025 8.0212,17.847 C7.931,17.7165 7.9618,17.532 8.0938,17.442 L15.8136,12.015 C15.939,11.925 16.1172,11.95875 16.2074,12.0915 C16.2954,12.222 16.2646,12.40425 16.1348,12.49425 L8.415,17.92125 C8.3666,17.95725 8.3094,17.973 8.2544,17.973" id="Fill-408"></path>
            <path d="M10.1002,18.675 C10.0056,18.675 9.9132,18.63 9.856,18.5445 C9.7636,18.40725 9.7966,18.21825 9.933,18.12375 L15.609,14.13 C15.7432,14.04 15.9258,14.0715 16.0182,14.20875 C16.1106,14.346 16.0776,14.535 15.9434,14.6295 L10.2674,18.62325 C10.2168,18.657 10.1574,18.675 10.1002,18.675" id="Fill-409"></path>
            <path d="M12.1726,24.42825 C12.0824,24.42825 11.9922,24.38325 11.9372,24.3 C11.847,24.16725 11.88,23.98275 12.012,23.8905 L19.9232,18.3285 C20.0508,18.2385 20.2312,18.27 20.3236,18.405 C20.4116,18.53775 20.3808,18.72225 20.2488,18.8145 L12.3354,24.3765 C12.287,24.4125 12.232,24.42825 12.1726,24.42825" id="Fill-410"></path>
            <path d="M12.4454,22.167 C12.3508,22.167 12.2606,22.11975 12.2034,22.0365 C12.1088,21.897 12.144,21.708 12.2782,21.6135 L17.9542,17.62425 C18.0928,17.532 18.2754,17.5635 18.3678,17.70075 C18.4602,17.838 18.425,18.027 18.2908,18.1215 L12.6126,22.113 C12.562,22.149 12.5048,22.167 12.4454,22.167" id="Fill-411"></path>
            <path d="M6.5384,15.282 C6.4504,15.282 6.3602,15.23925 6.3052,15.15825 C6.2172,15.0255 6.2502,14.84775 6.3756,14.75775 L13.9458,9.4365 C14.0734,9.342 14.2494,9.378 14.3374,9.51075 C14.4254,9.64125 14.3924,9.82125 14.2648,9.91125 L6.6968,15.2325 C6.6484,15.26625 6.5934,15.282 6.5384,15.282" id="Fill-412"></path>
            <path d="M7.029,16.785 C6.9344,16.785 6.842,16.74 6.7848,16.6545 C6.6924,16.51725 6.7276,16.32825 6.8618,16.2315 L15.2394,10.33875 C15.3758,10.2465 15.5606,10.28025 15.653,10.41525 C15.7454,10.55475 15.7124,10.74375 15.5782,10.83825 L7.1984,16.73325 C7.1456,16.76925 7.0884,16.785 7.029,16.785" id="Fill-413"></path>
            <path d="M6.71,13.068 C6.6176,13.068 6.5296,13.023 6.4702,12.93975 C6.38,12.80475 6.413,12.6225 6.5472,12.528 L11.9658,8.7165 C12.0956,8.62425 12.2782,8.658 12.3706,8.793 C12.4608,8.92575 12.4256,9.11025 12.2958,9.2025 L6.8728,13.01625 C6.8244,13.05225 6.7672,13.068 6.71,13.068" id="Fill-414"></path>
        </g>
    </g>
</svg>

              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console