cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class="wrapper">

  <div class="inner">

    <svg width="520px" height="520px" viewBox="0 0 520 520" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
        <desc>Created with Sketch.</desc>
        <defs>
            <path d="M182.4375,0 C247.616805,0 307.842231,34.7718858 340.431883,91.21875 C358.012543,121.671779 366.42221,156.559442 364.639936,191.678661 L363.941762,191.643577 C367.229145,126.797571 335.674475,65.1231707 281.160746,29.8530901 C251.749716,10.8234555 217.4655,0.701682692 182.4375,0.701682692 L182.4375,0 Z" id="path-1"></path>
            <path d="M237.052972,356.507434 C189.356091,371.470817 137.606993,366.211706 93.8991779,341.951026 L94.239494,341.337054 C137.778905,365.503006 189.328024,370.744576 236.842468,355.837327 L237.052972,356.507434 Z" id="path-2"></path>
            <path d="M38.1715385,294.1103 C30.6214327,284.353403 24.0782416,273.85623 18.6437091,262.780168 L19.2752236,262.471428 C24.6887055,273.505388 31.2038293,283.96046 38.7258678,293.678766 L38.1715385,294.1103 Z" id="path-3"></path>
            <path d="M0.235063702,191.678661 C-3.06635337,126.583558 28.6076034,64.6705853 83.3318365,29.2636767 C91.9590252,23.6817909 101.045816,18.8366719 110.490465,14.7844543 L110.76763,15.4300024 C51.1000421,41.0344038 9.63059495,96.5269796 1.97172837,161.001094 C0.764834135,171.168476 0.413992788,181.42006 0.933237981,191.643577 L0.235063702,191.678661 Z" id="path-4"></path>
        </defs>
        <g id="Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g id="Spinner">
                <path d="M260,425 C168.873016,425 95,351.126984 95,260 C95,168.873016 168.873016,95 260,95 C351.126984,95 425,168.873016 425,260 C425,351.126984 351.126984,425 260,425 Z M260,406.699463 C341.019876,406.699463 406.699463,341.019876 406.699463,260 C406.699463,178.980124 341.019876,113.300537 260,113.300537 C178.980124,113.300537 113.300537,178.980124 113.300537,260 C113.300537,341.019876 178.980124,406.699463 260,406.699463 Z" id="pulse-inner" fill="#2C2C2C"></path>
                <g id="pulse-outer">
                    <path d="M260,0 C352.898,0 438.724,49.5460987 485.16,129.974026 C531.596,210.401953 531.596,309.49415 485.16,389.922078 C438.724,470.350005 352.898,519.896104 260,519.896104 C167.102,519.896104 81.276,470.350005 34.84,389.922078 C-11.596,309.49415 -11.596,210.401953 34.84,129.974026 C81.276,49.5460987 167.102,0 260,0 L260,10.3979221 C170.82,10.3979221 88.426,57.9684155 43.836,135.172987 C-0.754,212.377558 -0.754,307.518545 43.836,384.723117 C88.426,461.927688 170.82,509.498181 260,509.498181 C349.18,509.498181 431.574,461.927688 476.164,384.723117 C520.754,307.518545 520.754,212.377558 476.164,135.172987 C431.574,57.9684155 349.18,10.3979221 260,10.3979221 L260,0 Z" id="Base-plate" fill-opacity="0.002" fill="#1E89BB"></path>
                    <path d="M260,0 C287.976,0 315.796,4.5230961 342.342,13.3873247 L339.04,23.2393558 C313.56,14.7390545 286.858,10.3979221 260,10.3979221 L260,0 Z" id="Dash-0" fill="#808080"></path>
                    <path d="M380.822,29.7640519 C405.6,42.7614545 428.116,59.7100675 447.512,79.8820363 L440.024,87.0825973 C421.408,67.7164675 399.776,51.4697143 375.986,38.9922078 L380.822,29.7640519 Z" id="Dash-1" fill="#808080"></path>
                    <path d="M473.98,112.271564 C489.866,135.302961 501.956,160.751875 509.73,187.630504 L499.746,190.515927 C492.284,164.703086 480.688,140.293964 465.426,118.198379 L473.98,112.271564 Z" id="Dash-2" fill="#808080"></path>
                    <path d="M518.102,228.624312 C521.482,256.412758 520.338,284.513143 514.748,311.937662 L504.556,309.858078 C509.938,283.551335 511.03,256.542732 507.78,229.872062 L518.102,228.624312 Z" id="Dash-3" fill="#808080"></path>
                    <path d="M503.1,352.125631 C493.168,378.276405 479.102,402.659532 461.396,424.3392 L453.336,417.762514 C470.34,396.96667 483.86,373.54535 493.376,348.434369 L503.1,352.125631 Z" id="Dash-4" fill="#808080"></path>
                    <path d="M432.406,454.519169 C411.45,473.079459 387.66,488.130452 361.92,499.100259 L357.838,489.534171 C382.564,479.006275 405.418,464.553163 425.516,446.746722 L432.406,454.519169 Z" id="Dash-5" fill="#808080"></path>
                    <path d="M322.218,512.331615 C295.048,519.038275 266.968,521.325818 239.07,519.06427 L239.928,508.692343 C266.708,510.849911 293.644,508.666348 319.722,502.245631 L322.218,512.331615 Z" id="Dash-6" fill="#808080"></path>
                    <path d="M197.782,512.331615 C170.612,505.624956 144.69,494.603158 121.03,479.656145 L126.594,470.869901 C149.292,485.219033 174.2,495.824914 200.278,502.245631 L197.782,512.331615 Z" id="Dash-7" fill="#808080"></path>
                    <path d="M87.594,454.519169 C66.638,435.958878 48.828,414.149236 34.84,389.922078 L43.836,384.723117 C57.278,407.988467 74.386,428.94028 94.484,446.746722 L87.594,454.519169 Z" id="Dash-8" fill="#808080"></path>
                    <path d="M16.9,352.125631 C6.968,325.974857 1.326,298.394369 0.208,270.423958 L10.608,270.008041 C11.7,296.83468 17.108,323.323387 26.624,348.434369 L16.9,352.125631 Z" id="Dash-9" fill="#808080"></path>
                    <path d="M1.898,228.624312 C5.278,200.835865 13.104,173.775273 25.09,148.508322 L34.502,152.979428 C22.984,177.258577 15.47,203.201392 12.22,229.872062 L1.898,228.624312 Z" id="Dash-10" fill="#808080"></path>
                    <path d="M46.02,112.271564 C61.906,89.2401662 81.432,68.9642181 103.818,52.1455792 L110.058,60.437922 C88.582,76.5806961 69.836,96.1027947 54.574,118.198379 L46.02,112.271564 Z" id="Dash-11" fill="#808080"></path>
                    <path d="M139.178,29.7640519 C163.956,16.7666493 190.684,7.85043116 218.296,3.35332987 L219.96,13.6212779 C193.44,17.9364156 167.804,26.5147013 144.014,38.9922078 L139.178,29.7640519 Z" id="Dash-12" fill="#808080"></path>
                </g>
                <g id="pulse-chunks">
                    <path d="M259.903996,0 C352.767693,0 438.562002,49.5458581 484.980856,129.973395 C531.399709,210.400932 531.399709,309.492648 484.980856,389.920185 C438.562002,470.347721 352.767693,519.89358 259.903996,519.89358 C167.040298,519.89358 81.245989,470.347721 34.8271354,389.920185 C-11.5917182,309.492648 -11.5917182,210.400932 34.8271354,129.973395 C81.245989,49.5458581 167.040298,0 259.903996,0 L259.903996,51.989358 C185.623434,51.989358 116.982788,91.6312434 79.8425075,155.968074 C42.7022265,220.304904 42.7022265,299.588675 79.8425075,363.925506 C116.982788,428.262336 185.623434,467.904222 259.903996,467.904222 C334.184558,467.904222 402.825203,428.262336 439.965484,363.925506 C477.105765,299.588675 477.105765,220.304904 439.965484,155.968074 C402.825203,91.6312434 334.184558,51.989358 259.903996,51.989358 L259.903996,0 Z" id="Base-plate" fill-opacity="0.002" fill="#1E89BB"></path>
                    <path d="M380.681382,29.7639074 C405.450233,42.7612469 427.957919,59.7097776 447.346757,79.8816485 L409.868601,115.884279 C394.352333,99.7415832 376.340986,86.1983555 356.536301,75.8004839 L380.681382,29.7639074 Z" id="Dash-1" fill="#515151"></path>
                    <path d="M517.910692,228.623202 C521.289444,256.411513 520.145866,284.511761 514.557931,311.936148 L463.616747,301.538276 C468.087096,279.598767 469.02275,257.11337 466.319749,234.887919 L517.910692,228.623202 Z" id="Dash-3" fill="#515151"></path>
                    <path d="M432.246335,454.516962 C411.298073,473.077163 387.516857,488.128082 361.786362,499.097836 L341.409889,451.267627 C361.994285,442.481426 381.019258,430.445889 397.783065,415.602927 L432.246335,454.516962 Z" id="Dash-5" fill="#515151"></path>
                    <path d="M322.099022,512.329128 C294.939054,519.035755 266.869423,521.323287 238.981724,519.06175 L243.166178,467.22836 C265.465941,469.021993 287.947637,467.22836 309.675611,461.873456 L322.099022,512.329128 Z" id="Dash-6" fill="#515151"></path>
                    <path d="M87.5616561,454.516962 C66.6133941,435.956761 48.8099704,414.147225 34.8271354,389.920185 L79.8425075,363.925506 C91.0443697,383.317536 105.261118,400.759966 122.024926,415.602927 L87.5616561,454.516962 Z" id="Dash-8" fill="#515151"></path>
                    <path d="M46.0030072,112.271019 C61.8831414,89.2397329 81.4019314,68.9638833 103.779665,52.145326 L134.994135,93.684823 C117.11274,107.124072 101.49251,123.370746 88.7832049,141.800974 L46.0030072,112.271019 Z" id="Dash-11" fill="#515151"></path>
                    <path d="M139.126609,29.7639074 C163.89546,16.7665679 190.61359,7.85039305 218.215395,3.35331359 L226.558313,54.6928046 C204.466473,58.2800703 183.076375,65.4026123 163.27169,75.8004839 L139.126609,29.7639074 Z" id="Dash-12" fill="#515151"></path>
                </g>
                <g id="pulse-line" transform="translate(78.000000, 78.000000)">
                    <path d="M182.4375,0 C247.616805,0 307.842231,34.7718858 340.431883,91.21875 C373.021536,147.665614 373.021536,217.209386 340.431883,273.65625 C307.842231,330.103114 247.616805,364.875 182.4375,364.875 C117.258195,364.875 57.0327692,330.103114 24.4431166,273.65625 C-8.14653606,217.209386 -8.14653606,147.665614 24.4431166,91.21875 C57.0327692,34.7718858 117.258195,0 182.4375,0 L182.4375,0.701682692 C117.5108,0.701682692 57.5134219,35.3402488 25.0500721,91.5695913 C-7.41327764,147.798934 -7.41327764,217.076066 25.0500721,273.305409 C57.5134219,329.534751 117.5108,364.173317 182.4375,364.173317 C247.3642,364.173317 307.361578,329.534751 339.824928,273.305409 C372.288278,217.076066 372.288278,147.798934 339.824928,91.5695913 C307.361578,35.3402488 247.3642,0.701682692 182.4375,0.701682692 L182.4375,0 Z" id="Base-plate" fill-opacity="0.002" fill="#455A64"></path>
                    <g id="Segment-40">
                        <use fill="#FF8F00" fill-rule="evenodd" xlink:href="#path-1"></use>
                        <path stroke="#FFFFFF" stroke-width="0.25" d="M182.5625,0.125042659 C247.648843,0.169467607 307.776993,34.9088907 340.32363,91.2812501 C357.873142,121.680325 366.276045,156.497975 364.521387,191.547546 L364.072891,191.525009 C367.315763,126.679227 335.744124,65.0193517 281.228648,29.7481408 C251.834283,10.7292891 217.573423,0.600777468 182.5625,0.576725629 L182.5625,0.125042659 Z"></path>
                    </g>
                    <g id="Segment-20">
                        <use fill="#2196F3" fill-rule="evenodd" xlink:href="#path-2"></use>
                        <path stroke="#FFFFFF" stroke-width="0.25" d="M236.896229,356.425555 C189.302214,371.320884 137.685104,366.073024 94.0690903,341.902325 L94.2882092,341.507007 C137.798004,365.617457 189.286242,370.852886 236.760649,355.99396 L236.896229,356.425555 Z"></path>
                    </g>
                    <g id="Segment-5">
                        <use fill="#00BCD4" fill-rule="evenodd" xlink:href="#path-3"></use>
                        <path stroke="#FFFFFF" stroke-width="0.25" d="M38.1937092,293.934629 C30.7059257,284.244532 24.212054,273.826012 18.8111072,262.837468 L19.2180219,262.638532 C24.6076767,273.604927 31.0835273,283.995503 38.5507553,293.656676 L38.1937092,293.934629 Z"></path>
                    </g>
                    <g id="Segment--30">
                        <use fill="#CDDC39" fill-rule="evenodd" xlink:href="#path-4"></use>
                        <path stroke="#FFFFFF" stroke-width="0.25" d="M0.353617286,191.547546 C-2.89885117,126.540959 28.7494447,64.7276953 83.399739,29.3686255 C91.9881039,23.8118591 101.030173,18.9870891 110.424924,14.9486408 L110.603461,15.3644738 C50.9587214,41.007427 9.50710665,96.5068554 1.84760108,160.986349 C0.643016821,171.134271 0.292416682,181.350807 0.802098221,191.525009 L0.353617286,191.547546 Z"></path>
                    </g>
                </g>
            </g>
        </g>
    </svg>

  </div>
</div>
            
          
!
            
              $color-bg-dark: #3e3e3e;

html, body {
  height: 100%;
  width: 100%;
  background-image: linear-gradient(340deg, $color-bg-dark 0%, lighten($color-bg-dark,50%) 100%);
}

.wrapper {
  postion: relative;
  height: 100%;
}

.inner {
  position: relative;
  top: 50%;
  margin: 0 auto;
  transform: translateY(-50%);
  text-align: center;
  
  svg  {
    position: relative;
    width: 400px;
  }
}

// SVG elements
#pulse-outer {
  animation: rotate-center 30s linear infinite forwards;
  transform-origin: center center;
}

#pulse-chunks {
  animation: rotate-center 120s linear infinite forwards;
  transform-origin: center center;
}


// Animations
@keyframes rotate-center {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
            
          
!
999px
Loading ..................

Console