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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                <svg class="header" viewBox="0 0 146 13" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g id="dept">
    <path id="T_2" fill-rule="evenodd" clip-rule="evenodd" d="M25.6562 1.8125H31.8723V3.2525H29.5323V10.2845H27.9483V3.2525H25.6562V1.8125ZM32.5818 8.6845H34.1818V10.2845H32.5818V8.6845Z" fill="white" />
    <path id="P" d="M17.95 10.2845H19.546V7.4165H20.782C21.298 7.4165 21.742 7.4165 22.21 7.3085C23.722 6.9725 24.25 5.7605 24.25 4.6325C24.25 2.9165 23.086 2.1725 22.258 1.9445C21.766 1.8125 21.274 1.8125 20.806 1.8125H17.95V10.2845ZM20.746 3.1685C21.262 3.1685 21.814 3.1805 22.21 3.5165C22.354 3.6485 22.63 3.9725 22.63 4.5965C22.63 4.8965 22.57 5.7965 21.586 6.0365C21.31 6.1085 21.022 6.1085 20.686 6.1085H19.546V3.1685H20.746Z" fill="white" />
    <path id="E_2" d="M15.4928 3.2285V1.8125H9.46875V10.2845H15.7928V8.8565H11.0288V6.5885H15.1088V5.2205H11.0288V3.2285H15.4928Z" fill="white" />
    <path id="D" d="M0.300003 10.2845H3.012C4.008 10.2725 4.896 10.2605 5.736 9.7685C6.984 9.0485 7.476 7.5725 7.476 6.1205C7.476 5.1725 7.26 3.4685 5.844 2.4725C4.956 1.8365 4.068 1.8245 3.336 1.8125H0.300003V10.2845ZM2.724 3.2525C3.792 3.2645 4.044 3.2765 4.5 3.4805C5.676 4.0445 5.796 5.3405 5.796 6.1325C5.796 7.8965 5.148 8.4245 4.536 8.6645C4.176 8.7965 3.756 8.8565 2.556 8.8565H1.884V3.2525H2.724Z" fill="white" />
  </g>
  <g id="of">
    <path id="F" d="M51.6033 3.2285H55.6353V1.8125H50.0312V10.2845H51.6033V6.6965H55.1433V5.3405H51.6033V3.2285Z" fill="white" />
    <path id="O" d="M47.8696 6.06412C47.8816 3.17212 45.9136 1.61212 43.8136 1.61212C41.4976 1.61212 39.7456 3.48412 39.7456 6.07612C39.7456 7.14412 40.0336 8.24812 40.8736 9.22012C41.7376 10.2161 42.7216 10.5161 43.7896 10.5161C46.3936 10.5161 47.8576 8.48812 47.8696 6.06412ZM46.2856 6.24412C46.2496 8.28412 44.8936 9.05212 43.8376 9.05212C42.4336 9.05212 41.3776 7.91212 41.3776 6.00412C41.3776 4.24012 42.3496 3.06412 43.8016 3.06412C45.4696 3.06412 46.3216 4.58812 46.2856 6.24412Z" fill="white" />
  </g>
  <g id="enthusiasm">
    <path id="E" d="M68.274 3.2285V1.8125H62.25V10.2845H68.574V8.8565H63.81V6.5885H67.89V5.2205H63.81V3.2285H68.274Z" fill="white" />
    <path id="N" d="M76.189 7.8005L72.445 1.8125H71.017V10.2845H72.565L72.469 4.3445L76.177 10.2845H77.557V1.8125H75.997L76.189 7.8005Z" fill="white" />
    <path id="T" d="M85.7629 1.8125H79.5469V3.2525H81.8389V10.2845H83.4229V3.2525H85.7629V1.8125Z" fill="white" />
    <path id="H" d="M92.9792 1.8125V5.0165H89.3432V1.8125H87.7592V10.2845H89.3432V6.4325H92.9792V10.2845H94.5752V1.8125H92.9792Z" fill="white" />
    <path id="U" d="M102.241 1.8125V6.9365C102.241 7.6445 102.241 8.1245 101.773 8.5445C101.305 8.9525 100.669 8.9645 100.417 8.9645C99.9133 8.9645 99.0253 8.8685 98.7013 8.0525C98.5813 7.7285 98.5933 7.3805 98.5933 7.0205V1.8125H97.0093V6.8645C97.0213 7.9205 97.0213 8.1845 97.1293 8.5565C97.3213 9.1925 97.8613 9.9245 98.8693 10.2725C99.3493 10.4405 99.8533 10.5005 100.369 10.5005C100.945 10.5005 102.061 10.4285 102.925 9.6725C103.825 8.9045 103.825 8.1125 103.837 7.1525V1.8125H102.241Z" fill="white" />
    <path id="S_2" d="M105.827 8.652C106.463 9.684 107.459 10.092 108.023 10.26C108.539 10.404 109.067 10.452 109.535 10.452C111.335 10.452 113.135 9.672 113.135 7.728C113.135 5.916 111.527 5.448 110.387 5.208L109.511 5.016C108.743 4.872 107.951 4.728 107.951 4.008C107.951 3.36 108.695 2.976 109.547 2.976C110.903 2.976 111.455 3.816 111.743 4.236L113.039 3.264C112.439 2.448 111.455 1.548 109.631 1.548C107.639 1.548 106.283 2.58 106.283 4.188C106.283 5.592 107.327 6.108 107.711 6.264C107.975 6.372 108.239 6.432 108.779 6.564L109.799 6.78C110.567 6.96 110.591 6.972 110.783 7.044C111.047 7.152 111.419 7.344 111.419 7.884C111.419 8.172 111.311 8.604 110.699 8.856C110.399 8.976 110.087 9 109.787 9C107.999 9 107.363 8.028 107.159 7.716L105.827 8.652Z" fill="white" />
    <path id="I" d="M115.611 1.8125V10.2845H117.171V1.8125H115.611Z" fill="white" />
    <path id="A" d="M125.111 10.2845H126.803L123.911 1.8125H122.111L119.255 10.2845H120.947L121.439 8.6285H124.619L125.111 10.2845ZM121.859 7.2485L123.035 3.3485L124.199 7.2485H121.859Z" fill="white" />
    <path id="S" d="M128.171 8.652C128.807 9.684 129.803 10.092 130.367 10.26C130.883 10.404 131.411 10.452 131.879 10.452C133.679 10.452 135.479 9.672 135.479 7.728C135.479 5.916 133.871 5.448 132.731 5.208L131.855 5.016C131.087 4.872 130.295 4.728 130.295 4.008C130.295 3.36 131.039 2.976 131.891 2.976C133.247 2.976 133.799 3.816 134.087 4.236L135.383 3.264C134.783 2.448 133.799 1.548 131.975 1.548C129.983 1.548 128.627 2.58 128.627 4.188C128.627 5.592 129.671 6.108 130.055 6.264C130.319 6.372 130.583 6.432 131.123 6.564L132.143 6.78C132.911 6.96 132.935 6.972 133.127 7.044C133.391 7.152 133.763 7.344 133.763 7.884C133.763 8.172 133.655 8.604 133.043 8.856C132.743 8.976 132.431 9 132.131 9C130.343 9 129.707 8.028 129.503 7.716L128.171 8.652Z" fill="white" />
    <path id="M" d="M143.143 1.8125L141.523 8.1005L139.867 1.8125H137.563V10.2845H139.111L138.955 3.3245L140.791 10.2845H142.219L144.043 3.3245L143.899 10.2845H145.447V1.8125H143.143Z" fill="white" />
  </g>
  </>
              
            
!

CSS

              
                body {
  background-color: black;
}

.header {
  width: 90%;
  max-width: 400px;
}

g path {
  transform: translateY(2px);
}

g:nth-child(3) path {
  animation-name: wiggleWiggle;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
}

@keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 2px);
  }

  0% {
    transform: translate(0, 0px);
  }
  10% {
    transform: translate(0, 2px);
  }
}

#E {
  animation-delay: 0s;
}

#N {
  animation-delay: 0.1s;
}

#T {
  animation-delay: 0.15s;
}

#H {
  animation-delay: 0.2s;
}

#U {
  animation-delay: 0.25s;
}

#S_2 {
  animation-delay: 0.3s;
}

#I {
  animation-delay: 0.35s;
}

#A {
  animation-delay: 0.4s;
}

#S {
  animation-delay: 0.45s;
}

#M {
  animation-delay: 0.5s;
}

              
            
!

JS

              
                
              
            
!
999px

Console