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 width="927" height="185" viewBox="0 0 927 185" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="logo__p-one" d="M512.242 46.16H546.162C550.962 46.16 554.802 46.2667 557.682 46.48C560.668 46.6933 563.815 47.1733 567.122 47.92C570.535 48.6667 573.255 49.7867 575.282 51.28C577.415 52.7733 579.228 54.8 580.722 57.36C582.108 59.8133 582.802 62.9067 582.802 66.64V88.24C582.802 96.88 579.442 103.12 572.722 106.96C566.108 110.693 556.295 112.56 543.282 112.56H527.762V150H512.242V46.16ZM545.362 102.8C552.082 102.8 557.468 101.573 561.522 99.12C565.575 96.6667 567.602 92.7733 567.602 87.44V68.56C567.602 65.68 566.855 63.3333 565.362 61.52C563.868 59.6 561.735 58.2667 558.962 57.52C556.295 56.88 554.055 56.4533 552.242 56.24C550.428 56.0267 548.028 55.92 545.042 55.92H527.602V102.8H545.362Z" fill="url(#paint0_linear)"/>
<g clip-path="url(#P2)">
  <rect class="logo__p-two" x="0" y="0" width="100%" height="100%" fill="url(#paint0_linear)" ></rect>
 </g>
<path class="logo__o-one" d="M627.893 151.6C598.88 151.6 584.373 142.213 584.373 123.44V74.32C584.373 54.48 598.88 44.56 627.893 44.56C657.226 44.56 671.893 54.4267 671.893 74.16V123.44C671.893 133.467 667.84 140.667 659.733 145.04C651.626 149.413 641.013 151.6 627.893 151.6ZM628.213 141.2C647.306 141.2 656.853 135.227 656.853 123.28V73.84C656.853 61.04 647.253 54.64 628.053 54.64C618.773 54.64 611.626 56.08 606.613 58.96C601.706 61.84 599.253 66.8 599.253 73.84V123.28C599.253 135.227 608.906 141.2 628.213 141.2Z" fill="url(#paint0_linear)"/>
<path class="logo__o-two" d="M789.971 151.6C760.958 151.6 746.451 142.213 746.451 123.44V74.32C746.451 54.48 760.958 44.56 789.971 44.56C819.305 44.56 833.971 54.4267 833.971 74.16V123.44C833.971 133.467 829.918 140.667 821.811 145.04C813.705 149.413 803.091 151.6 789.971 151.6ZM790.291 141.2C809.385 141.2 818.931 135.227 818.931 123.28V73.84C818.931 61.04 809.331 54.64 790.131 54.64C780.851 54.64 773.705 56.08 768.691 58.96C763.785 61.84 761.331 66.8 761.331 73.84V123.28C761.331 135.227 770.985 141.2 790.291 141.2Z" fill="url(#paint0_linear)" />
  <g clip-path="url(#V)">
  <rect class="logo__v" x="0" y="0" width="100%" height="100%" fill="url(#paint0_linear)" ></rect>
 </g>
<path class="logo__d" d="M13.6124 46.16H54.8924C84.0124 46.16 98.5724 56.08 98.5724 75.92V121.84C98.5724 140.613 84.0657 150 55.0524 150H13.6124V46.16ZM53.9324 139.44C73.7724 139.44 83.6924 133.467 83.6924 121.52V75.76C83.6924 71.92 82.8924 68.6667 81.2924 66C79.6924 63.3333 77.4524 61.36 74.5724 60.08C71.6924 58.9067 68.7057 58.1067 65.6124 57.68C62.519 57.1467 58.8924 56.88 54.7324 56.88H29.1324V139.44H53.9324Z" fill="url(#paint0_linear)" />
<path class="logo__e" d="M101.46 46.1601H171.22V57.0401H116.98V90.9601H165.94V101.84H116.98V139.12H172.82V150H101.46V46.1601Z" fill="url(#paint0_linear)" />
 <g clip-path="url(#N)">
  <rect class="logo__n" x="0" y="0" width="100%" height="100%" fill="url(#paint0_linear)" ></rect>
</g>
  
 <g clip-path="url(#Y)">
  <rect class="logo__y" x="0" y="0" width="100%" height="100%" fill="url(#paint0_linear)"></rect>
 </g>
  
  <g clip-path="url(#S)">
  <rect class="logo__s" x="0" y="0" width="100%" height="100%" fill="url(#paint0_linear)"></rect>
 </g>
  
<defs>
  <clipPath id="P2">
    <path class="logo__p-two" d="M673.669 46.16H707.589C712.389 46.16 716.229 46.2667 719.109 46.48C722.096 46.6933 725.243 47.1733 728.549 47.92C731.963 48.6667 734.683 49.7867 736.709 51.28C738.843 52.7733 740.656 54.8 742.149 57.36C743.536 59.8133 744.229 62.9067 744.229 66.64V88.24C744.229 96.88 740.869 103.12 734.149 106.96C727.536 110.693 717.723 112.56 704.709 112.56H689.189V150H673.669V46.16ZM706.789 102.8C713.509 102.8 718.896 101.573 722.949 99.12C727.003 96.6667 729.029 92.7733 729.029 87.44V68.56C729.029 65.68 728.283 63.3333 726.789 61.52C725.296 59.6 723.163 58.2667 720.389 57.52C717.723 56.88 715.483 56.4533 713.669 56.24C711.856 56.0267 709.456 55.92 706.469 55.92H689.029V102.8H706.789Z" fill="url(#paint0_linear)"/>
  </clipPath>
  <clipPath id="N">
    <path d="M176.333 46.1601H195.053L251.533 131.92V46.1601H265.133V150H246.413L189.933 62.8001V150H176.333V46.1601Z" fill="black"/>
  </clipPath>
  <clipPath id="Y">
    <path d="M290.727 108.08L253.127 46.1601H270.887L298.567 94.9601L326.247 46.1601H344.007L306.247 107.6V150H290.727V108.08Z" fill="url(#paint0_linear)" />
  </clipPath>
  <clipPath id="S">
    <path d="M372.38 151.6C363.527 151.6 352.967 150.747 340.7 149.04V136.08C353.074 138.747 363.954 140.08 373.34 140.08C381.234 140.08 386.994 139.227 390.62 137.52C394.247 135.707 396.06 132.4 396.06 127.6V114.16C396.06 109.68 394.78 106.533 392.22 104.72C389.66 102.907 385.18 102 378.78 102H366.62C356.487 102 349.287 99.9735 345.02 95.9201C340.754 91.8668 338.62 85.5735 338.62 77.0401V68.7201C338.62 63.0668 339.847 58.4801 342.3 54.9601C344.86 51.4401 349.074 48.8268 354.94 47.1201C360.914 45.4135 369.074 44.5601 379.42 44.5601C386.354 44.5601 395.26 45.1468 406.14 46.3201V58.0001C393.98 56.1868 384.7 55.2801 378.3 55.2801C368.38 55.2801 361.82 56.2401 358.62 58.1601C355.314 60.1868 353.66 63.5468 353.66 68.2401V80.0801C353.66 83.7068 354.94 86.3735 357.5 88.0801C360.167 89.6801 364.7 90.4801 371.1 90.4801H383.58C390.727 90.4801 396.274 91.3335 400.22 93.0401C404.274 94.7468 407.1 97.3601 408.7 100.88C410.407 104.293 411.26 108.933 411.26 114.8V122.32C411.26 129.68 409.874 135.493 407.1 139.76C404.434 144.027 400.274 147.067 394.62 148.88C388.967 150.693 381.554 151.6 372.38 151.6Z" fill="url(#paint0_linear)"/>
  </clipPath>
  <clipPath id="V">
    <path d="M827.39 46.16H843.55L876.83 135.28H878.27L911.55 46.16H926.91L885.63 150H867.71L827.39 46.16Z" fill="yellow"/>
  </clipPath>
  <linearGradient id="paint0_linear" x1="545.369" y1="0" x2="545.369" y2="185" gradientUnits="userSpaceOnUse">
<stop stop-color="#767676"/>
<stop offset="1" stop-color="#071B3A"/>
</linearGradient>
</defs>
</svg>

              
            
!

CSS

              
                body{
  background: #fefefe;
}

svg{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  padding-top:20px;
}
              
            
!

JS

              
                function getPath(selector){
  return document.querySelector(selector);
}

const E = getPath('.logo__e')
const N = getPath('.logo__n')
const Y = getPath('.logo__y')
const S = getPath('.logo__s')

const P1 = getPath('.logo__p-one')
const P2 = getPath('.logo__p-two')
const O1 = getPath('.logo__o-one')
const O2 = getPath('.logo__o-two')
const V = getPath('.logo__v')

let tl = new TimelineMax()

tl
  .from(E, 2, { y:-30 })
  .from(N, 2, { rotation:-90 }, "-=1")
  .from(Y, 2, { rotation:90 }, "-=1")
  .from(S, 2, { x: 100,opacity: 0 },"-=2")
  .from(P1, 2, { y: 150 }, "-=2")
  .from(O1, 2, { y: -160}, "-=1")
  .from(P2, 4, { opacity: 0}, "-=2")
  .from(O2, 2, { x: 250}, "-=6")
  .from(V, 2, { y: 150}, "-=5")
              
            
!
999px

Console