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

              
                <svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="823" height="484" viewBox="0 0 823 484">
  <defs>
    <rect id="franko-solar-a" width="305" height="172" x=".934" y=".394" />
  </defs>
  <g fill="none" fill-rule="evenodd">
    <path class="solar" d="M47.0166193,109.986676 C70.4865794,109.986676 88.8943912,95.7973206 88.8943912,76.5458174 C88.8943912,33.8243542 23.8534561,51.8486699 23.8534561,31.1398816 C23.8534561,23.8534561 31.2165809,20.8621867 40.3437876,20.8621867 C49.6243927,20.8621867 60.745779,24.0068546 67.7254076,29.145702 L80.7642743,13.1922651 C68.569099,4.52525374 53.7661503,0.153398432 40.2670883,0.153398432 C19.0981048,0.153398432 1.15048824,10.9679879 1.15048824,32.8272644 C1.15048824,72.480759 66.1914233,56.9875174 66.1914233,76.6225167 C66.1914233,84.0623406 57.6011111,89.1244889 46.3263264,89.0477896 C36.2787291,89.0477896 24.160253,85.0594304 14.0359565,75.2419308 L0,90.8885708 C15.4932416,104.387633 32.2903699,109.986676 47.0166193,109.986676 Z M157.46349,110.063375 C188.219876,110.063375 213.530617,87.5905045 213.530617,55.070037 C213.530617,25.234042 190.904348,0.0766992159 157.46349,0.0766992159 C126.093511,0.0766992159 101.396363,23.8534561 101.396363,55.070037 C101.396363,85.1361296 124.176031,110.063375 157.46349,110.063375 Z M157.46349,89.2778873 C137.90519,89.2778873 125.24982,73.7079465 125.24982,55.070037 C125.24982,36.585526 137.138198,20.8621867 157.46349,20.8621867 C175.717904,20.8621867 189.600462,34.7447448 189.600462,55.070037 C189.600462,73.554548 177.942181,89.2778873 157.46349,89.2778873 Z M307.640555,110.063375 L307.640555,88.817692 L253.260811,88.817692 L253.260811,-3.41060513e-13 L230.251046,-3.41060513e-13 L230.251046,110.063375 L307.640555,110.063375 Z M337.47655,110.063375 L344.072682,93.4196449 L395.384458,93.4196449 L402.05729,110.063375 L424.683558,110.063375 L381.118404,0.0766992159 L358.415436,0.0766992159 L314.773582,110.063375 L337.47655,110.063375 Z M387.177642,72.6341574 L352.279499,72.6341574 L369.76692,26.8447256 L387.177642,72.6341574 Z M461.805979,110.063375 L461.805979,65.5011304 L482.20797,65.5011304 L508.285704,110.063375 L534.05664,110.063375 L506.751719,63.3535523 C521.171172,58.0613064 528.150801,47.4001154 528.150801,33.057362 C528.150801,12.9621675 513.347852,0.153398432 494.786642,0.153398432 L438.872913,0.153398432 L438.872913,110.063375 L461.805979,110.063375 Z M491.948771,44.7923421 L461.805979,44.7923421 L461.805979,21.322382 L491.872071,21.322382 C498.928399,21.322382 505.67793,25.6942373 505.67793,33.057362 C505.67793,40.7272836 498.544903,44.7923421 491.948771,44.7923421 Z" transform="translate(220.632 372.892)" />
    <path class="text" d="M13.7291596,109.986676 L13.7291596,61.3593727 L42.1845687,61.3593727 L70.5632786,109.986676 L86.0565202,109.986676 L56.9875174,60.1321852 C71.40697,56.2205252 79.9972822,44.8690413 79.9972822,30.8330848 C79.9972822,12.7320698 65.8846264,0.0766992159 49.0107989,0.0766992159 L0,0.0766992159 L0,109.986676 L13.7291596,109.986676 Z M47.5535138,48.7807013 L13.7291596,48.7807013 L13.7291596,12.8854683 L47.5535138,12.8854683 C57.9846072,12.8854683 66.4982202,20.9388859 66.4982202,30.8330848 C66.4982202,41.570975 57.0642166,48.7807013 47.5535138,48.7807013 Z M109.52648,109.986676 L117.809996,89.2778873 L175.334407,89.2778873 L183.617923,109.986676 L197.347082,109.986676 L153.475131,-1.20792265e-13 L139.669272,-1.20792265e-13 L95.7973206,109.986676 L109.52648,109.986676 Z M170.348958,76.6225167 L122.795445,76.6225167 L146.572202,16.336933 L170.348958,76.6225167 Z M224.345206,109.986676 L224.345206,24.2369522 L294.218192,109.986676 L302.27161,109.986676 L302.27161,0.0766992159 L288.465751,0.0766992159 L288.465751,85.9031218 L218.669464,0.0766992159 L210.692746,0.0766992159 L210.692746,109.986676 L224.345206,109.986676 Z M335.252273,109.986676 L335.252273,63.8137476 L354.04358,44.2554476 L392.316489,109.986676 L407.349536,109.986676 L363.400885,34.5146471 L396.458247,-1.20792265e-13 L379.661119,-1.20792265e-13 L335.252273,46.0962287 L335.252273,-1.20792265e-13 L321.523113,-1.20792265e-13 L321.523113,109.986676 L335.252273,109.986676 Z M463.953557,109.986676 C493.329357,109.986676 519.713887,87.5905045 519.713887,54.9933378 C519.713887,25.924335 496.93422,-1.20792265e-13 463.953557,-1.20792265e-13 C434.27096,-1.20792265e-13 408.193227,23.0097648 408.193227,54.9933378 C408.193227,84.8293328 432.046683,109.986676 463.953557,109.986676 Z M463.953557,97.4080042 C439.946702,97.4080042 422.382582,77.8497041 422.382582,54.9933378 C422.382582,31.4466785 440.253499,12.6553706 463.953557,12.6553706 C487.346818,12.6553706 505.447833,31.2165809 505.447833,54.9933378 C505.447833,78.5399971 487.730314,97.4080042 463.953557,97.4080042 Z" transform="translate(302.24 231.596)" />
    <g fill="#FFF" transform="translate(158.45 192.538)">
      <polygon class="c" points="0 12.809 45.099 12.809 45.099 0 0 0" transform="translate(81.51 82.578)" />
      <polygon class="a" points="13.729 102.649 13.729 0 0 0 0 102.649" transform="translate(67.78 46.426)" />
      <polygon class="b" points="-7 40 155.056 40 155.056 52.853 -7 52.853" transform="rotate(-30 74.028 46.426)" />
    </g>
    <g transform="rotate(-30 286.965 75.464)">
      <mask id="franko-solar-b" fill="#fff">
        <use xlink:href="#franko-solar-a" />
      </mask>
      <use fill="#D8D8D8" fill-opacity="0" xlink:href="#franko-solar-a" />
      <g mask="url(#franko-solar-b)">
        <g transform="translate(84 93)">
          <g class="sun">
            <path class="body" d="M39.8433394,79.6866787 C17.8384707,79.6866787 0,61.8482081 0,39.8433394 C0,17.8384707 17.8384707,4.47641924e-13 39.8433394,4.47641924e-13 C61.8482081,4.47641924e-13 79.6866787,17.8384707 79.6866787,39.8433394 C79.6866787,61.8482081 61.8482081,79.6866787 39.8433394,79.6866787 L39.8433394,79.6866787 Z" transform="translate(34.057 34.057)" />
            <path class="rays" d="M79.6866787,126.170575 L79.6866787,146.092244 L66.4055656,146.092244 L66.4055656,126.170575 L79.6866787,126.170575 Z M115.306624,105.916877 L129.391245,120.001498 L120.001498,129.391245 L105.916877,115.306624 L115.306624,105.916877 Z M30.7856202,105.916877 L40.1753672,115.306624 L26.0907467,129.391245 L16.7009998,120.001498 L30.7856202,105.916877 Z M146.092244,66.4055656 L146.092244,79.6866787 L126.170575,79.6866787 L126.170575,66.4055656 L146.092244,66.4055656 Z M19.9216697,66.4055656 L19.9216697,79.6866787 L-1.77635684e-15,79.6866787 L-1.77635684e-15,66.4055656 L19.9216697,66.4055656 Z M26.0907467,16.7009998 L40.1753672,30.7856202 L30.7856202,40.1753672 L16.7009998,26.0973873 L16.7009998,26.0907467 L26.0907467,16.7009998 Z M120.001498,16.6943592 L129.391245,26.0907467 L115.306624,40.1753672 L105.916877,30.7856202 L120.001498,16.7009998 L120.001498,16.6943592 Z M79.6866787,2.25597319e-13 L79.6866787,19.9216697 L66.4055656,19.9216697 L66.4055656,2.25597319e-13 L79.6866787,2.25597319e-13 Z" transform="translate(.854 .854)" />
          </g>
        </g>
      </g>
    </g>
  </g>
</svg>
              
            
!

CSS

              
                body {
  background: #111111;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

.logo {
  transform: translate(-75px, -75px);
}

.sun {
  animation: sunrise 10s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.f {
  fill: #fff;
}

.body {
  fill: #ff6425;
}

.rays {
  fill: #ff6425;
  transform-origin: 74px 74px;
  animation: rot 1s linear infinite;
}

.c {
  fill: rgba(255, 255, 255, 0.6);
  animation: opacity 10s linear infinite;
}

.text {
  /* fill: #fff; */
  fill: rgba(255, 255, 255, 0.6);
  animation: opacity 10s linear infinite;
}

.solar {
  /* fill: #fff; */
  fill: rgba(255, 255, 255, 0.6);
  animation: solar 10s linear infinite;
}

@keyframes sunrise {
  0% {
    transform: translateY(350px);
  }

  10% {
    transform: translateY(350px);
  }

  20% {
    transform: translateY(0px);
  }

  80% {
    transform: translateY(0px);
  }

  90% {
    transform: translateY(350px);
  }

  100% {
    transform: translateY(350px);
  }
}

@keyframes opacity {
  0% {
    fill: rgba(255, 255, 255, 0.6);
  }

  10% {
    fill: rgba(255, 255, 255, 0.6);
  }

  20% {
    fill: rgba(255, 255, 255, 1);
  }

  80% {
    fill: rgba(255, 255, 255, 1);
  }

  /* 90% {
    fill: rgba(255, 255, 255, 0.6);
  } */

  100% {
    fill: rgba(255, 255, 255, 0.6);
  }
}

@keyframes solar {
  0% {
    fill: rgba(255, 255, 255, 0.6);
  }

  20% {
    fill: rgba(255, 255, 255, 0.6);
  }

  21% {
    fill: #ff6425;
  }

  22% {
    fill: #ffffff;
  }

  23% {
    fill: #ff6425;
  }

  24% {
    fill: #ffffff;
  }

  25% {
    fill: #ff6425;
  }

  26% {
    fill: #ffffff;
  }

  27% {
    fill: #ff6425;
  }

  28% {
    fill: #ffffff;
  }

  29% {
    fill: #ff6425;
  }

  90% {
    fill: #ff6425;
  }

  91% {
    fill: #ffffff;
  }

  92% {
    fill: #ff6425;
  }

  93% {
    fill: #ffffff;
  }

  94% {
    fill: #ff6425;
  }

  95% {
    fill: #ffffff;
  }

  96% {
    fill: #ff6425;
  }

  97% {
    fill: #ffffff;
  }

  98% {
    fill: #ff6425;
  }

  99% {
    fill: #ffffff;
  }

  100% {
    fill: #ffffff;
  }
}

@keyframes rot {
  to {
    transform: rotate(0.25turn);
  }
}

              
            
!

JS

              
                // https://dribbble.com/shots/10955902-Franko-Solar-Solar-Station

              
            
!
999px

Console