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="container">
  <svg class="bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
    <linearGradient id="bgGradient" gradientUnits="userSpaceOnUse" x1="300.4853" y1="726.0513" x2="299.6588" y2="0.4558">
      <stop offset="0" style="stop-color:#FBB03B" />
      <stop offset="8.563894e-002" style="stop-color:#FAAC37" />
      <stop offset="0.6223" style="stop-color:#F89A25" />
      <stop offset="1" style="stop-color:#F7931E" />
    </linearGradient>

    <rect fill="url(#bgGradient)" width="100%" height="100%" />

  </svg>

  <svg class="svgImmersion" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 600">
    <defs>

      <clipPath id="podcastMask">
        <rect class="podcastMask" x="90" y="260" width="30" height="110" fill="#FFFFFF" />
      </clipPath>
      <clipPath id="guestMask">
        <rect class="guestMask" x="90" y="460" width="430" height="110" fill="#FFFFFF" />
      </clipPath>
      <clipPath id="featuringMask">
        <rect class="featuringMask" x="90" y="460" width="430" height="110" fill="#FFFFFF" />
      </clipPath>
    </defs>

    <path class="canL" d="M149,289.7v122.2c0,16.8-13.7,30.5-30.5,30.5S88,428.6,88,411.8v-8c-7-3.3-12-10.5-12-18.9v-68.4
	c0-8.4,5-15.6,12-18.9v-8c0-9.3,3.7-18.2,10.6-23.1c6.9-4.9,15.5-7.8,30.6-5.3C140.3,263.2,149,276.7,149,289.7z" />
    <path class="canR" d="M453,289.7v122.2c0,16.8,13.2,30.5,30,30.5s30-13.7,30-30.5v-8c7-3.3,13-10.5,13-18.9v-68.4c0-8.4-6-15.6-13-18.9
	v-8c0-9.3-3.9-18.2-10.8-23.1s-14.9-7.8-30-5.3C461.1,263.2,453,276.7,453,289.7z" />
    <g class="brainGroup" opacity="1">
      <path d="M265.3,248.3c-2.1,0-4.3-1.2-6.5-3.5l-0.4-0.4l0.5,0.2c0,0,1.4,0.5,3.2,0.7c1.7,0.2,4.1,0.1,6-1.4c2.2-1.6,3.5-4.5,3.8-8.6
		l0-0.1l0.1,0c0,0,1.1-0.7,2.1-0.2c1,0.6,1.6,2.1,1.8,4.7l-0.1,0l0.1,0.1c-0.5,0.5-1,1.2-1.6,2c-2.1,2.7-4.9,6.3-8.6,6.5
		C265.5,248.3,265.4,248.3,265.3,248.3z M259.3,244.9c2.1,2.1,4.2,3.2,6.3,3.1c3.6-0.2,6.4-3.8,8.4-6.4c0.6-0.8,1.2-1.5,1.6-1.9
		c-0.2-2.4-0.8-3.9-1.7-4.4c-0.8-0.4-1.6,0-1.8,0.1c-0.3,4.2-1.6,7.1-3.9,8.7C265.1,246.4,260.8,245.4,259.3,244.9z" />
      <path d="M274,253.3c-3.8,0-5.9-1.7-6.4-5.5c-0.4,0.1-1.3,0.3-2.5,0.3c-1.6,0-3.8-0.4-5.4-2.3c-1.6-1.9-2.3-4.9-2-9
		c0.4-5.7,1.6-6.8,3.3-6.8c0.8,0,1.7,0.3,2.8,0.6c0.6,0.2,1.2,0.3,1.8,0.5c0.2,0.1,0.4,0.1,0.6,0.1c1,0,1.3-0.9,1.5-1.9
		c0.3-1.2,0.7-2.6,2.5-2.6c1.4,0,3.6,0.9,6.7,2.7c0,0,0.1,0,0.1,0c0.7,0,4.3,0.1,6.2,3.1c1.6,2.4,1.7,6,0.4,10.7
		c0.2,0.5,1.6,4.4,0.3,6.9c-0.6,1.1-1.6,1.9-3,2.1c-0.3,0.1-0.6,0.1-1,0.2C278,252.9,275.9,253.3,274,253.3
		C274,253.3,274,253.3,274,253.3z M267.8,247.5l0,0.2c0.5,3.7,2.5,5.4,6.2,5.4c0,0,0,0,0,0c1.9,0,4-0.4,6.1-0.9
		c0.3-0.1,0.7-0.1,1-0.2c1.3-0.3,2.2-0.9,2.8-2c1.3-2.6-0.3-6.7-0.3-6.7l0-0.1l0-0.1c1.3-4.6,1.2-8.1-0.3-10.4
		c-1.9-2.8-5.3-2.9-6-2.9c-0.1,0-0.2,0-0.2,0l0,0l0,0c-3-1.8-5.2-2.6-6.6-2.6c-1.6,0-1.9,1.1-2.3,2.3c-0.3,1-0.6,2.1-1.8,2.1
		c-0.2,0-0.4,0-0.7-0.1c-0.6-0.2-1.2-0.3-1.8-0.5c-1.1-0.3-2-0.6-2.7-0.6c-1.5,0-2.7,1.1-3,6.5c-0.3,4,0.4,6.9,1.9,8.8
		c1.5,1.8,3.7,2.2,5.2,2.2c1.4,0,2.6-0.3,2.6-0.3L267.8,247.5z" />
      <path d="M263.2,237.9c-0.1,0-0.2,0-0.3-0.1c-0.4-0.4-0.4-1.7-0.3-4.1c0-3.4,0.1-8.1-1.5-10c-0.5-0.5-1-0.8-1.7-0.8
		c-1.5,0-3.7,0.3-6.2,0.6c-3.4,0.5-7.3,1-11,1c-5.3,0-9-1.1-11.2-3.4c-0.7-0.7-1.4-1.4-2.1-2.1c-6.1-6-13.7-13.4-7.1-25.7
		c7.3-13.7,18-20.4,37.2-23.3c1.7-0.3,3.9-0.4,6.3-0.4c12.1,0,30.8,3.2,47.8,8.1c11.6,3.4,32.3,10.5,41.1,20.5
		c8.4,9.5,6.2,18.7,4.8,22.2c-2.2,5.7-6.8,9.6-11.3,9.6c-2.5,0-4.7-1.2-6.5-3.4c-1.7-2.1-2.1-8.2,0-12.6c1-2,1.1-4,0.5-5.8
		c-1.1-3.1-4.7-5.7-10.7-7.9l-0.1,0c-4.4-1.7-43.9-16.2-68.6-16.2c-8.4,0-14.1,1.7-17.1,5.1c-1.7,1.9-2.5,4.4-2.4,7.4
		c0.5,15.5,9.9,20.4,10.6,20.8c0.4-0.1,3.7-1.1,7.2-1.1c3.6,0,6.1,1,7.6,2.9c1.3,1.6,1.7,4,1.3,7l0,0.1l-1.5,1.5
		c-0.1,0.5-0.7,4.5-3.7,9.2C263.8,237.6,263.5,237.9,263.2,237.9C263.2,237.9,263.2,237.9,263.2,237.9z M259.4,222.7
		c0.8,0,1.4,0.3,1.9,0.9c1.7,1.9,1.7,6.7,1.6,10.2c0,1.8,0,3.5,0.2,3.9c0,0,0,0,0.1,0h0c0.1,0,0.3-0.1,0.7-0.8
		c3.2-5,3.7-9.1,3.7-9.2l0-0.1l1.5-1.5c0.4-2.9,0-5.1-1.2-6.7c-1.4-1.8-3.9-2.7-7.4-2.7c-3.7,0-7.1,1.1-7.2,1.1l0,0l0,0
		c0,0-2.6-1.2-5.2-4.4c-2.4-2.9-5.3-8.2-5.6-16.7c-0.1-3.1,0.7-5.6,2.5-7.6c3-3.4,8.8-5.2,17.3-5.2c24.8,0,64.3,14.6,68.7,16.2
		l0.1,0c6,2.2,9.7,4.9,10.9,8.1c0.7,1.9,0.5,3.9-0.5,6c-1.5,3.1-2.1,9.6,0,12.2c1.7,2.2,3.9,3.3,6.3,3.3c4.4,0,8.9-3.9,11.1-9.4
		c1.3-3.4,3.5-12.5-4.8-21.9c-6.5-7.3-21-14.6-40.9-20.4c-16.9-4.9-35.6-8.1-47.7-8.1c-2.4,0-4.5,0.1-6.3,0.4
		c-19.1,2.9-29.8,9.6-37,23.1c-6.4,12.1,1.1,19.4,7.1,25.3c0.7,0.7,1.4,1.4,2.1,2.1c2.1,2.2,5.7,3.3,11,3.3c3.7,0,7.6-0.5,11-1
		C255.6,223,257.8,222.7,259.4,222.7z" />
      <path d="M350.3,170l-0.1-0.3c-1.1,0.7-1.8,1.4-2.7,2.5l0.2,0.2C348.5,171.4,349.2,170.8,350.3,170z" />
      <path d="M355,200.4l0.2,0.2c2.1-3.3,4.3-5.3,6.6-7.4c0.9-0.8,1.7-1.6,2.6-2.5c2.7-0.6,4.4-0.9,7.3-0.4l0-0.3
		c-2.8-0.5-4.5-0.2-7,0.3c1-1,2-2.2,3-3.5l-0.2-0.2c-1.1,1.5-2.2,2.7-3.3,3.9c0,0-0.1,0-0.1,0l-0.1,0l0,0.1
		c-0.8,0.8-1.7,1.6-2.5,2.4C359.4,195.1,357.2,197.1,355,200.4z" />
      <path d="M382.6,219.5c3.2,0,5.7,0.5,8.2,1c2.5,0.5,5,1,8.2,1c4.3,0,7.6-1.4,10.8-2.7c3.2-1.3,6.5-2.7,10.7-2.7
		c3.2,0,8.6,1.2,8.6,5.8c0,3.2-1.1,5.7-2.2,8.1c-1.1,2.4-2.3,4.9-2.3,8.2c0,2.9,1.3,5,2.5,7c1.1,1.7,2.1,3.5,2.4,5.8
		c0.1,0,0.2,0,0.3,0c-0.3-2.4-1.4-4.2-2.4-6c-1.2-2-2.4-4-2.4-6.8c0-3.2,1.1-5.7,2.2-8.1c1.1-2.4,2.3-4.9,2.3-8.2
		c0-4.2-4.5-6.1-8.9-6.1c-4.3,0-7.6,1.4-10.8,2.7c-3.2,1.3-6.5,2.7-10.7,2.7c-3.2,0-5.7-0.5-8.2-1c-2.5-0.5-5-1-8.2-1
		c-4.9,0-7.9,1.7-12.2,4.5l0.1,0.3C374.8,221.1,377.7,219.5,382.6,219.5z" />
      <path d="M411.1,201.1c-1.1,0.7-2.3,1.5-3.4,2.3c-3.1,2.1-4.4,4.8-5.9,7.6c-1.1,2.3-2.3,4.6-4.5,6.8l0.2,0.2
		c2.2-2.2,3.4-4.5,4.5-6.8c1.4-2.8,2.8-5.5,5.8-7.5c1.1-0.8,2.3-1.5,3.4-2.3c6.8-4.4,13.3-8.6,13.3-17.7V173c0-6.5-3.5-11-10.5-13.5
		c-6.3-2.3-14.2-2.6-20.3-2.6c-2.4,0-4.2-0.1-6-0.2c-1-0.1-2-0.1-3.1-0.2c3.7-0.9,7.1-3.8,7.1-8.3c0-1.8-0.4-3.2-0.7-4.6
		c-0.4-1.3-0.7-2.7-0.7-4.5c0-2.2,0-3.6,0.1-5.8l-0.3,0c-0.1,2.2-0.1,3.6-0.1,5.8c0,1.8,0.4,3.2,0.7,4.5c0.4,1.3,0.7,2.7,0.7,4.5
		c0,4.9-4.3,7.9-8.4,8.2l0,0.3c1.8,0.1,3.2,0.2,4.6,0.2c1.9,0.1,3.7,0.2,6.1,0.2c6.1,0,14,0.3,20.2,2.5c6.8,2.5,10.3,6.9,10.3,13.2
		v10.6C424.3,192.5,417.9,196.7,411.1,201.1z" />
      <path d="M302.4,159.5v3.6l0.1,0c0.6,0.2,1.1,0.5,1.9,0.5v-0.3c-0.6,0-1.1-0.2-1.7-0.4v-3.4H302.4z" />
      <path d="M339.5,252.6c0.7-3.7,1.8-6.3,4.5-7.5c0.9-0.4,3.7-1.2,4.4-1l0.1,0l0-0.1c1.8-5.9,6.5-9.3,12.9-9.3c0.4,0,0.6,0.3,0.9,0.7
		c0.2,0.3,0.5,0.7,0.9,0.8l0.1,0l0-0.1c0.4-1.1,0.6-2.2,0.9-3.3c0.6-2.8,1.1-5,3.9-5c7.8,0,17,1,18.3,8.8l0,0.1l0.1,0
		c7.9,1.2,14.4,4.3,19.8,9.5c1.4,1.4,2.7,2.9,4,4.5c0.1,0,0.2,0,0.4,0c-1.4-1.8-2.8-3.4-4.2-4.8c-5.4-5.3-11.9-8.4-19.8-9.6
		c-1.4-7.9-10.7-8.9-18.6-8.9c-3.1,0-3.6,2.4-4.2,5.2c-0.2,1-0.5,2.1-0.8,3.1c-0.2-0.1-0.4-0.4-0.6-0.6c-0.3-0.4-0.6-0.8-1.1-0.8
		c-6.5,0-11.3,3.4-13.1,9.4c-1-0.2-3.7,0.7-4.5,1c-2.7,1.2-3.9,4-4.6,7.8C339.3,252.6,339.4,252.6,339.5,252.6z" />
      <path d="M261.5,149.2v6.3l0.2-0.3c1.1-1.4,1.9-2.2,3.1-3.4l-0.2-0.2c-1.1,1.1-1.9,2-2.9,3.2v-5.5H261.5z" />
      <path d="M328.3,160H328c0,4.6-1.8,7.6-3.6,10.7c-1.3,2.2-2.6,4.5-3.6,7.5l0,0.1l2.7,4l0.2-0.2l-2.7-3.9c0.9-2.9,2.2-5.2,3.5-7.4
		C326.5,167.7,328.3,164.7,328.3,160z" />
      <path d="M375.3,210.3l0.2,0.2c3.8-3.1,6.4-6.3,6.4-11.2c0-2.8-0.6-5-1.1-7.1c-0.6-2.1-1.1-4.2-1.1-7c0-1.2,0.3-2.1,0.7-3
		c0.3-0.9,0.6-1.8,0.7-2.9l-0.3,0c-0.1,1.1-0.4,2-0.7,2.8c-0.3,0.9-0.7,1.9-0.7,3.1c0,2.8,0.6,5,1.1,7.1c0.5,2.1,1.1,4.2,1.1,7
		C381.5,204.2,379,207.2,375.3,210.3z" />
      <path d="M219.4,245.8c-0.3,0.2-0.5,0.5-0.9,0.5c-2,0-3.3-1.1-4.7-2.2c-1.4-1.1-2.8-2.3-4.9-2.3h-8.8c-9.4,0-14.8-1.8-22.4-7.3
		c1.4-3.1,3.5-4,6.4-5.2l0.2-0.1l-0.1-0.3l-0.2,0.1c-3,1.2-5.2,2.1-6.7,5.4l-0.1,0.1l0.1,0.1c7.7,5.6,13.2,7.4,22.7,7.4h8.8
		c2,0,3.3,1.1,4.7,2.2c1.4,1.1,2.8,2.3,4.9,2.3c0.5,0,0.8-0.3,1.1-0.5c0.2-0.2,0.4-0.4,0.7-0.4l0-0.3
		C219.9,245.4,219.6,245.6,219.4,245.8z" />
      <path d="M170.3,209.3l0.1,0.3c1.5-0.5,2.5-0.7,4-1l0-0.3C172.8,208.5,171.7,208.8,170.3,209.3z" />
      <path d="M218,194c-2,0-3.5-1.2-4.8-3.9l-0.2,0.2c0.9,1.7,2.4,4,5.1,4c1.9,0,3.1-0.9,4.5-2l0,0l-0.2-0.3l0,0
		C221,193.1,219.8,194,218,194z" />
      <path d="M227.9,237.4c-3.6-1.5-7.4-3-12.3-3h-8.8c-4.1,0-6.3-2.9-8.6-6c-1.8-2.5-3.7-5-6.8-6.4c-0.4-0.2-0.9-0.4-1.3-0.6
		c-7.7-3.4-15.7-6.9-15.7-16.2V203h-0.3v2.3c0,9.5,8.1,13,15.9,16.5c0.4,0.2,0.9,0.4,1.3,0.6c3,1.3,4.9,3.9,6.7,6.3
		c2.3,3.1,4.5,6.1,8.8,6.1h8.8c4.9,0,8.6,1.5,12.2,3c3.6,1.5,7.4,3,12.3,3h4.4v-0.3h-4.4C235.3,240.4,231.5,238.9,227.9,237.4z" />
      <path d="M440.9,204c0.8,0.7,1.5,1.3,2.3,2.1l0.2-0.2c-0.8-0.8-1.6-1.4-2.3-2.1c-2.7-2.4-5.1-4.4-5.7-8.7l-0.3,0
		C435.7,199.5,438.1,201.6,440.9,204z" />
      <path d="M448.5,241.5c0,1.6-0.5,2.7-1.1,3.9c-0.6,1.2-1.1,2.4-1.1,4c0,0.8,0.1,1.5,0.2,2.2c0.1,0,0.2,0,0.3,0
		c-0.1-0.7-0.2-1.4-0.2-2.2c0-1.6,0.5-2.7,1.1-3.9c0.6-1.2,1.1-2.4,1.1-4c0-4.3-1.1-7.2-2.4-10.5c-0.6-1.5-1.1-3-1.7-4.8l-0.3,0.1
		c0.6,1.8,1.1,3.4,1.7,4.8C447.5,234.4,448.5,237.3,448.5,241.5z" />
      <path d="M216.1,227.3c3.5,2,5.1,2.2,9.1,2.5l0-0.3c-3.9-0.3-5.5-0.5-8.9-2.5c-7.2-4.1-17-9.6-17-22.6c0-3.2,0.7-5.3,1.3-7.4
		c0.7-2.1,1.4-4.2,1.4-7.5c0-1-0.2-1.8-0.5-2.5c-0.2-0.7-0.4-1.5-0.4-2.4c0-9.2,5.3-16.8,16.4-23.2c9.4-5.5,21-8.9,30.3-11.7
		c2.4-0.7,3.4-2.6,4.4-4.7c0.6-1.3,1.3-2.6,2.4-3.8c2.5-2.8,4.8-2.1,7.7-1.3c1.5,0.4,3.3,0.9,5.2,0.9c6.2,0,8.9,1.5,11.6,2.9
		c2.7,1.5,5.5,3,11.8,3c3.5,0,4.9-1.8,6.1-3.5c1-1.3,1.9-2.5,3.8-2.9c6.5-1.3,11.7,0.6,15.5,5.8c-0.1,1.7-0.4,2.9-0.7,4.5
		c-0.1,0.3-0.1,0.5-0.2,0.8l0.3,0.1c0.1-0.3,0.1-0.6,0.2-0.8c0.3-1.6,0.6-2.8,0.7-4.5c0.7-0.7,1.3-1.5,1.8-2.3
		c1.6-2.2,3-4.1,5.7-4.1c1.4,0,2.6-0.1,3.9-0.2c3.7-0.3,6.8-0.5,10,2.1c4.4,3.8,5.6,9.1,6.7,14.2c1.2,5.3,2.3,10.8,7.3,14.5
		c4.2,3.1,8.2,2.9,12.5,2.6c3.5-0.2,7.1-0.4,10.9,1.3c1.8,0.8,3,2.1,4.2,3.3c1.6,1.6,3.1,3.2,5.7,3.6l0,0l11-2.5
		c3.5,0.4,5.2,2.7,7.3,5.8l0.4,0.6l0.2-0.2l-0.4-0.6c-2.2-3.1-3.9-5.5-7.6-5.9l0,0l-11,2.5c-2.5-0.4-4-1.9-5.5-3.5
		c-1.2-1.3-2.5-2.6-4.3-3.4c-3.9-1.8-7.5-1.6-11-1.3c-4.2,0.2-8.2,0.5-12.3-2.6c-4.8-3.6-6-8.8-7.1-14.3c-1.1-5.2-2.3-10.5-6.8-14.3
		c-3.3-2.7-6.5-2.5-10.2-2.2c-1.2,0.1-2.5,0.2-3.9,0.2c-2.8,0-4.3,2-5.9,4.2c-0.5,0.7-1,1.4-1.6,2c0,0,0-0.1,0-0.1l-0.3,0
		c0,0,0,0,0,0.1c-3.8-5.1-9.1-7-15.6-5.6c-2,0.4-3,1.7-3.9,3c-1.2,1.7-2.5,3.4-5.9,3.4c-6.2,0-8.9-1.5-11.6-2.9
		c-2.7-1.5-5.5-3-11.8-3c-1.9,0-3.7-0.5-5.2-0.9c-2.9-0.8-5.4-1.5-8,1.4c-1.1,1.2-1.8,2.5-2.4,3.8c-1.1,2.1-2,3.9-4.3,4.5
		c-9.3,2.8-20.9,6.3-30.4,11.8c-11.1,6.5-16.5,14.1-16.5,23.5c0,1,0.2,1.8,0.5,2.5c0.2,0.7,0.4,1.5,0.4,2.4c0,3.2-0.7,5.3-1.3,7.4
		c-0.7,2.1-1.4,4.2-1.4,7.5c0,5.8,1.9,10.6,5.8,14.7C208.2,222.9,212.8,225.5,216.1,227.3z" />
      <path d="M427.5,165.6c16.6,7.3,17.2,25.2,17.8,44.2c0.1,4,0.3,8.2,0.6,12.3c-4.4,0-9,2.2-9,6.9v6.5h0.3v-6.5c0-4.6,4.6-6.6,8.9-6.6
		h0.2l0-0.2c-0.3-4.1-0.4-8.4-0.6-12.4c-0.6-19.1-1.2-37.1-18-44.5L427.5,165.6z" />
      <path d="M362.5,146.4c-0.7,1.6-1.1,3.3-1.2,5.2l0.3,0c0.1-2,0.6-3.8,1.3-5.4c0.3-0.1,0.5-0.2,0.8-0.4l-0.1-0.3
		c-0.2,0.1-0.4,0.2-0.5,0.2c1.7-3.7,4.7-6.4,7.6-9.2c4.4-4.1,8.9-8.3,8.9-15.6c0-2.1-0.3-3.7-0.7-5.4c-0.3-1.3-0.6-2.7-0.7-4.4h3.8
		c8.5,0,12.3,6.8,15.6,14.9c-0.1,0-0.2,0.1-0.3,0.1l0.1,0.3c0.1,0,0.2-0.1,0.3-0.1c0.5,1.2,1,2.5,1.5,3.8c3.6,9.3,7.4,19,17,21
		l0.1-0.3c-9.4-2-13.2-11.6-16.8-20.9c-0.5-1.3-1-2.5-1.5-3.8c0.3-0.1,0.5-0.2,0.7-0.3c1.2-0.5,2.1-0.9,3.6-0.9c4.7,0,6.3,4,8.1,8.7
		c1.1,2.6,2.1,5.4,3.9,7.6c1.7,2.2,3.5,3.9,5.3,5.6c4.1,4,7.7,7.4,7.7,14c0,2.9-0.4,5-2.2,7.3l0.2,0.2c1.9-2.4,2.3-4.5,2.3-7.5
		c0-6.7-3.6-10.2-7.8-14.3c-1.8-1.7-3.6-3.5-5.3-5.6c-1.7-2.2-2.8-4.9-3.9-7.5c-1.8-4.5-3.6-8.8-8.4-8.8c-1.5,0-2.5,0.4-3.7,1
		c-0.2,0.1-0.5,0.2-0.7,0.3c-3.4-8.2-7.3-15.1-15.9-15.1h-4.1l0,0.2c0.1,1.8,0.4,3.2,0.7,4.6c0.3,1.7,0.7,3.2,0.7,5.3
		c0,7.2-4.3,11.2-8.8,15.4c-3,2.8-6,5.7-7.8,9.6c-2.1,0.9-3.7,1.4-6.2,2l0.1,0.3C359,147.7,360.5,147.2,362.5,146.4z" />
      <path d="M323.7,110.3l-0.1-0.3c-3,1.6-4.3,3.3-6.1,5.6c-0.2,0.3-0.4,0.5-0.7,0.8l-0.1,0.1l0.1,0.1c1.3,1.9,2.3,3.5,3.1,5.9l0.3-0.1
		c-0.8-2.4-1.8-4-3.1-5.9c0.2-0.3,0.4-0.5,0.6-0.7C319.6,113.4,320.8,111.8,323.7,110.3z" />
      <path d="M393.7,249.6c-0.3,0.5-0.5,1.1-0.7,1.7c0.1,0,0.2,0,0.3,0c0.5-1.4,1.2-2.6,2-3.8c1.2-2,2.4-4,2.8-6.9l-0.3,0
		c-0.4,2.8-1.6,4.8-2.7,6.7c-0.4,0.7-0.8,1.3-1.2,2c-1.8-0.2-3-1.1-3.9-2.9l-0.2,0.2C390.6,248.4,391.9,249.4,393.7,249.6z" />
      <path d="M274.8,95.8h-0.3c0,3.8,0,6.8-0.1,9.7c0,2.9-0.1,5.9-0.1,9.7c0,4.7,1.8,7.6,3.9,10.9c1,1.6,2.1,3.3,3,5.3l0.3-0.1
		c-0.9-2-2-3.7-3-5.4c-2.1-3.3-3.8-6.2-3.8-10.7c0-3.8,0-6.8,0.1-9.7C274.8,102.6,274.8,99.6,274.8,95.8z" />
      <path d="M302.2,92.5l-0.2-0.2c-0.4,0.5-0.8,1-1.3,1.4c-1,1-1.9,1.9-1.9,3.6c0,1,0.4,1.8,0.7,2.6c0.2,0.4,0.4,0.9,0.6,1.4l0.3-0.1
		c-0.2-0.6-0.4-1-0.6-1.5c-0.4-0.7-0.7-1.4-0.7-2.4c0-1.5,0.9-2.4,1.8-3.4C301.4,93.5,301.8,93,302.2,92.5z" />
      <path d="M290.1,109.1l-0.3,0.1c0.6,2.5,1.6,4.6,3.1,6.4c-0.2,0.4-0.3,0.8-0.5,1.1c-0.4,0.9-0.8,1.8-0.8,3.1c0,1.3,0.6,2.1,1.2,3
		c0.2,0.3,0.4,0.5,0.6,0.8l0.2-0.2c-0.2-0.3-0.4-0.6-0.6-0.9c-0.6-0.9-1.2-1.6-1.2-2.8c0-1.2,0.4-2,0.8-2.9c0.2-0.3,0.3-0.7,0.5-1
		c2.6,2.8,6.3,4.4,10.7,4.4c5.3,0,8.5-1.4,12.7-4l-0.1-0.3c-4.2,2.6-7.3,3.9-12.5,3.9C296.9,119.9,291.6,115.8,290.1,109.1z" />
      <path d="M382.2,244.7c0.4,0,0.8-0.1,1.1-0.3c0.2-0.1,0.4-0.2,0.7-0.2c-0.1,0.7-0.1,1.5-0.1,2.3c0,2-1.3,3.1-2.6,4.3
		c-0.3,0.3-0.7,0.6-1,0.9c0.2,0,0.3,0,0.5,0c0.2-0.2,0.5-0.4,0.7-0.6c1.4-1.2,2.8-2.4,2.8-4.6c0-4.1,0.7-6.9,2.7-9.8l-0.2-0.2
		c-1.5,2.3-2.3,4.5-2.6,7.4l0,0c-0.3,0.1-0.5,0.2-0.8,0.2c-0.3,0.1-0.6,0.2-1,0.2c-1.1,0-1.9-0.1-2.7-0.2c-0.8-0.1-1.6-0.2-2.7-0.2
		v0.3c1.1,0,1.9,0.1,2.7,0.2C380.3,244.6,381.1,244.7,382.2,244.7z" />
      <path d="M163.7,225.1l-3-2.2l0.6,2.4l0.1,0c1.5,0.9,2.6,2.1,3.8,3.1c2,1.9,3.9,3.8,7.2,3.8h7.1V232h-7.1c-3.2,0-4.9-1.7-7-3.7
		c-1.1-1.1-2.3-2.2-3.8-3.1l-0.3-1.5l2.4,1.8L163.7,225.1z" />
      <path d="M215.4,143c0.2,0.3,0.5,0.6,0.8,0.9l0.2-0.2c-0.3-0.3-0.5-0.6-0.8-0.9c-0.7-0.8-1.4-1.7-2.5-1.7c-0.5,0-0.8,0.1-1.2,0.3
		c-0.3,0.1-0.7,0.2-1.1,0.2v0.3c0.5,0,0.8-0.1,1.2-0.3c0.3-0.1,0.7-0.2,1.1-0.2C214.1,141.5,214.7,142.2,215.4,143z" />
      <path d="M257.1,253.3c-6.4,1.7-10.8,1.7-16.4,1.5c-1.5,0-3.1-0.1-4.9-0.1c-2.3,0-4.2-0.7-5.9-1.5c-1.8-0.7-3.6-1.5-6-1.5
		c-1.5,0-2.7,0.6-3.9,1.3c-1.2,0.6-2.3,1.2-3.8,1.2c-2.7,0-4.7-1.1-6.7-2.2c-2-1.1-4-2.2-6.8-2.2c-2.9,0-5.2,0.6-7.3,1.2
		c-2.2,0.6-4.4,1.2-7.3,1.2c-17.5,0-35.2-7.6-35.2-24.7v-11.1c0-4.4,3-6.8,6.1-9.3l0.2-0.2l-0.2-0.6c-0.7-2.1-1.2-3.5-1.2-5.9
		c0-8,2.4-13.1,5.3-19c1.4-2.9,2.8-5.9,4.1-9.5l1.6-0.4l0.9,1.4c1,5.1,4.5,7.6,8,10c3.3,2.3,6.7,4.6,8.1,9.3l0.3-0.1
		c-1.4-4.8-4.9-7.2-8.2-9.5c-3.4-2.3-6.6-4.6-7.7-9.1l0.1,0.1l0.1-0.2c0.1-0.3,0.4-0.5,0.6-0.8c0.4-0.5,0.8-1,0.8-1.8
		c0-2.2-0.3-3.9-0.7-5.6c-0.3-1.7-0.7-3.4-0.7-5.5c0-9.6,4.2-16.4,13.4-21.3l3.7,1l0-0.2c1.2-9.4,7.2-13.5,14.1-18.2
		c1.4-0.9,2.8-1.9,4.3-3c2.4-1.8,4.3-3.8,6.1-5.7c3.6-3.8,6.6-7.1,12.2-7.1c2.6,0,4.3,0.7,6.6,1.7l0.2,0.1c-0.1,0.1-0.2,0.3-0.2,0.4
		c-0.7,1.3-1.3,2.3-1.3,4.1c0,2.9,1.4,4.9,2.7,6.8c1.4,1.9,2.7,3.8,2.7,6.6c0,1.9-0.9,3.2-1.8,4.6c-0.9,1.4-1.8,2.8-1.8,4.8
		c0,5.8,4.5,7.5,9.2,9.2c3.3,1.2,6.8,2.5,9.3,5.2l0.2-0.2c-2.5-2.8-6-4.1-9.4-5.3c-4.8-1.8-9-3.3-9-8.9c0-1.9,0.9-3.2,1.8-4.6
		c0.9-1.4,1.8-2.8,1.8-4.8c0-2.9-1.4-4.9-2.7-6.8c-1.4-1.9-2.7-3.8-2.7-6.6c0-1.6,0.6-2.7,1.3-3.9c0.1-0.1,0.2-0.3,0.3-0.5l0.2,0.1
		l0.1-0.1c2.9-6.4,7.2-10.7,13.1-13.1c5.8-2.3,12.7-2.7,18.7-2.7c0.4,0,0.7,0,1.1,0c4,0,7.4-0.1,9.6,3.4l0.1,0.2l0.1-0.1
		c2.8-3,4.6-4.9,8.2-4.9c2.1,0,3.7,0.4,5.3,0.7c1.6,0.4,3.3,0.7,5.4,0.7h9.7c2.3,0,4.1-0.5,5.8-1c1.7-0.5,3.5-1,5.8-1
		c6.3,0,10,2,15.6,5l0.8,0.4l9-1.5c4.4,0.7,6.7,3.9,8.4,7.3c0.5,4.2,0.5,7,0.5,10.5c0,1,0,2,0,3.1c0,3.1-1.5,5-3,7
		c-1,1.3-2,2.6-2.8,4.4c-0.9,2-1.4,4-1.8,5.8c-0.7,2.8-1.3,5.5-3.5,8l0.2,0.2c2.3-2.5,2.9-5.2,3.6-8.1c0.4-1.9,0.9-3.8,1.8-5.8
		c0.8-1.7,1.8-3.1,2.8-4.3c1.6-2.1,3.1-4,3.1-7.2c0-1.1,0-2.1,0-3.1c0-3.6,0.1-6.4-0.5-10.5c0.3-0.2,0.5-0.3,0.8-0.5
		c1.2-0.8,2.1-1.4,3.6-1.4c3.7,0,6.4,2.2,8.2,5.5l-0.2,0.1l0.1,0.3l0.2-0.1c1.9,3.6,2.8,8.5,2.8,13.3c0,3.2-0.6,5.1-1.8,7.8l0.3,0.1
		c1.2-2.8,1.8-4.8,1.8-8c0-4.9-0.9-9.8-2.8-13.4l0,0c1.4-0.7,2.4-1.2,4-1.2c4,0,6.4,2.2,9.2,4.8c0.9,0.8,1.8,1.7,2.9,2.6l0.2-0.3
		c-1-0.8-2-1.7-2.9-2.6c-2.8-2.6-5.2-4.9-9.3-4.9c-1.7,0-2.7,0.5-4.1,1.3l0,0c-1.9-3.4-4.7-5.7-8.5-5.7c-1.6,0-2.6,0.7-3.7,1.4
		c-0.2,0.2-0.5,0.3-0.7,0.5c-1.7-3.3-4.1-6.7-8.6-7.4l0,0l-9,1.5l-0.7-0.4c-5.6-3-9.4-5.1-15.7-5.1c-2.3,0-4.1,0.5-5.8,1
		c-1.7,0.5-3.5,1-5.8,1h-9.7c-2.1,0-3.7-0.4-5.3-0.7c-1.6-0.4-3.3-0.7-5.4-0.7c-3.6,0-5.6,1.8-8.3,4.9c-2.3-3.4-5.8-3.4-9.7-3.4
		c-0.4,0-0.7,0-1.1,0c-6,0-12.9,0.3-18.8,2.7c-5.9,2.4-10.2,6.6-13.1,12.8l-0.1-0.1c0,0.1-0.1,0.2-0.1,0.3l-0.2-0.1
		c-2.4-1-4.1-1.8-6.7-1.8c-5.7,0-8.8,3.3-12.4,7.2c-1.8,1.9-3.7,3.9-6.1,5.7c-1.4,1-2.9,2-4.3,3c-6.9,4.7-12.9,8.8-14.2,18.2l-3.5-1
		l0,0c-9.3,5-13.6,11.9-13.6,21.6c0,2.2,0.3,3.9,0.7,5.6c0.3,1.7,0.7,3.4,0.7,5.5c0,0.7-0.4,1.1-0.7,1.6c-0.2,0.2-0.3,0.4-0.5,0.6
		l-0.2-0.3c0-0.1,0-0.3-0.1-0.4l-0.2,0l-0.8-1.2l-2,0.5l0,0.1c-1.3,3.7-2.8,6.7-4.1,9.6c-2.8,6-5.3,11.1-5.3,19.1c0,2.5,0.5,4,1.2,6
		l0.1,0.3l-0.1,0c-3.2,2.5-6.2,4.9-6.2,9.5v11.1c0,17.3,17.8,25,35.4,25c2.9,0,5.2-0.6,7.3-1.2c2.2-0.6,4.4-1.2,7.3-1.2
		c2.7,0,4.7,1.1,6.7,2.2c2,1.1,4,2.2,6.8,2.2c1.6,0,2.7-0.6,3.9-1.3c1.2-0.6,2.3-1.2,3.8-1.2c2.3,0,4.2,0.7,5.9,1.5
		c1.8,0.7,3.6,1.5,6,1.5c1.8,0,3.3,0,4.9,0.1c1.4,0,2.6,0.1,3.9,0.1c4,0,7.8-0.3,12.6-1.6L257.1,253.3z" />
      <path d="M213.4,165.1l0.3-0.1c-2.3-6.1-8.1-8-13.7-9.8c-6.1-1.9-11.8-3.8-12.4-10.9l-0.3,0c0.5,7.3,6.4,9.2,12.6,11.2
		C205.4,157.3,211.2,159.1,213.4,165.1z" />
      <path d="M183.9,169.3v0.3c3.6,0,6.1,1.5,8.6,3.1c2.2,1.3,4.4,2.7,7.5,3.3l0-0.3c-3.1-0.6-5.3-1.9-7.4-3.3
		C190,170.9,187.6,169.3,183.9,169.3z" />
      <path d="M312.6,252.8C312.6,252.8,312.6,252.8,312.6,252.8c-0.2-0.2-0.3-0.4-0.4-0.6c0.4,0.2,0.8,0.4,1.2,0.6c0.2,0,0.5,0,0.7,0
		c-0.7-0.3-1.3-0.6-2-1l-0.2-0.1v0.2c0,0.3,0.2,0.6,0.4,0.9C312.3,252.8,312.4,252.8,312.6,252.8z" />
      <path d="M313.7,243.2c2.4,0.9,3.4,0.3,4.3-0.3c1.1-0.7,2.3-1.4,6.5,0.8c4.2,2.2,4.1,3.7,3.9,5.8c-0.1,0.9-0.2,1.9,0.1,3.2
		c0.1,0,0.2,0,0.3,0c-0.2-1.2-0.2-2.2-0.1-3.1c0.2-2.2,0.4-3.9-4.1-6.2c-4.4-2.3-5.6-1.5-6.7-0.7c-0.9,0.6-1.7,1.1-4.1,0.2
		c-2.4-0.9-3.4-2.2-3.6-3.1c-0.1-0.4,0.1-0.7,0.3-1c0.7-0.6,2-0.4,3.6,0.4c2.6,1.3,4,0.7,4.8,0c1.3-1.2,1.6-3.9,0.8-7.1
		c-0.3-1.1-0.3-1.8,0-2.1c0.4-0.5,1.5-0.3,3-0.1c1.9,0.3,4.5,0.8,7.3-0.1c1.3-0.4,1.9,0.5,2.4,1.5c0.4,0.7,0.9,1.5,1.6,1.7
		c0.6,0.1,1.3-0.1,2.3-0.8c1.7-1.2,2.5-3.1,2.3-5.5c-0.2-1.7-0.8-3.1-0.8-3.1l-0.2,0.1c0,0,0.7,1.4,0.8,3c0.2,2.2-0.5,4-2.1,5.2
		c-0.8,0.6-1.5,0.9-2,0.7c-0.7-0.2-1-0.8-1.5-1.5c-0.6-1-1.2-2.1-2.8-1.7c-2.7,0.8-5.3,0.4-7.2,0.1c-1.6-0.3-2.7-0.5-3.2,0.2
		c-0.4,0.4-0.4,1.2-0.1,2.4c0.8,3.1,0.5,5.6-0.7,6.8c-1,0.9-2.5,0.9-4.5-0.1c-1.7-0.8-3.1-1-3.9-0.4c-0.4,0.3-0.5,0.8-0.4,1.3
		C310.2,240.9,311.2,242.3,313.7,243.2z" />
      <path d="M304.7,253c0.1,0,0.2,0,0.3,0c-4-5.8-7.1-9.7-10.3-11.6c-2.6-1.6-5.5-2.2-12.4-1l0,0.3C292.7,238.8,296,240.4,304.7,253z" />
      <path d="M339.5,252.6c0.7-3.7,1.8-6.3,4.5-7.5c0.9-0.4,3.7-1.2,4.4-1l0.1,0l0-0.1c1.8-5.9,6.5-9.3,12.9-9.3c0.4,0,0.6,0.3,0.9,0.7
		c0.2,0.3,0.5,0.7,0.9,0.8l0.1,0l0-0.1c0.4-1.1,0.6-2.2,0.9-3.3c0.6-2.8,1.1-5,3.9-5c7.8,0,17,1,18.3,8.8l0,0.1l0.1,0
		c7.9,1.2,14.4,4.3,19.8,9.5c1.4,1.3,2.7,2.8,4,4.5c0.1,0,0.2,0,0.4,0c-1.4-1.8-2.7-3.3-4.2-4.7c-5.4-5.3-11.9-8.4-19.8-9.6
		c-1.4-7.9-10.7-8.9-18.6-8.9c-3.1,0-3.6,2.4-4.2,5.2c-0.2,1-0.5,2.1-0.8,3.1c-0.2-0.1-0.4-0.4-0.6-0.6c-0.3-0.4-0.6-0.8-1.1-0.8
		c-6.5,0-11.3,3.4-13.1,9.4c-1-0.2-3.7,0.7-4.5,1c-2.7,1.2-3.9,4-4.6,7.8C339.3,252.6,339.4,252.6,339.5,252.6z" />
      <path d="M312.9,252.8c0.1,0,0.2,0,0.3,0c-1.4-3.3-2.6-5.9-3.3-6.9c-1.9-2.7-5.5-11.2-3.5-15.9c0.8-1.9,2.6-3,5.2-3.1
		c4.6-0.2,7.2,0.3,8.9,0.6c2.1,0.4,3.1,0.6,5.1-1.1c0.4-0.4,0.8-0.7,1.2-1c1.1-0.9,1.6-1.4,2.1-1.3c0.5,0.1,1.1,0.9,2.2,2.5l0.2,0.2
		c0.7,1.1,1.5,1.1,1.9,1c1.2-0.3,2.1-2.4,2.3-4.1c0.2-1.9-0.3-3.4-1.3-4.1L334,220c1,0.6,1.4,2,1.2,3.8c-0.2,1.9-1.1,3.5-2.1,3.8
		c-0.6,0.2-1.1-0.1-1.6-0.9l-0.2-0.2c-1.2-1.8-1.8-2.6-2.4-2.7c-0.6-0.1-1.2,0.4-2.3,1.4c-0.3,0.3-0.7,0.6-1.2,1
		c-1.9,1.6-2.8,1.4-4.9,1c-1.7-0.3-4.3-0.8-9-0.6c-2.7,0.1-4.5,1.2-5.4,3.3c-2.1,4.8,1.6,13.4,3.5,16.2
		C310.3,247.1,311.5,249.6,312.9,252.8z" />
      <path d="M288.5,244.9c0.9,0.3,1.5,1.2,1.8,2.6c0.3,1.5,0.3,3.5,0.3,5.8c0.1,0,0.2,0,0.3,0c0.1-2.3,0.1-4.3-0.3-5.8
		c-0.3-1.5-1-2.5-2-2.9c-2.2-0.9-5.3,1.7-5.4,1.8l0.2,0.2C283.4,246.6,286.4,244.1,288.5,244.9z" />
      <g>
        <path fill="none" d="M461.4,260.2c0.9-5.9,0.3-34.4,0.3-40.5c0-77.1-71.3-139.7-159.2-139.7s-159.2,62.5-159.2,139.7
			c0,6.1-1.5,34-0.6,39.9L461.4,260.2z" />
      </g>
    </g>

    <g class="podcastTextGroup" clip-path="url(#podcastMask)">
      <text class="podcastText" transform="matrix(1.2872 0 0 1 140.5976 521.4844)" fill="#FFFFFF" font-family="'GothamHTF-Medium'" font-size="50.3906" letter-spacing="-0.8">PODCAST</text>

      <text class="withRobText" transform="matrix(1.2872 0 0 1 190 551.0752)" fill="#FFFFFF" font-family="'GothamHTF-Medium'" font-size="24.6094" letter-spacing="-0.8">with Rob Levin</text>

      <line class="titleLineL" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" x1="147" y1="546" x2="183" y2="546" />
      <line class="titleLineR" fill="none" stroke="#FFFFFF" stroke-width="4" stroke-miterlimit="10" x1="423" y1="546" x2="459" y2="546" />
    </g>
    <path class="headband" fill="none" stroke="#FFFFFF" stroke-width="30" stroke-linecap="round" stroke-miterlimit="10" d="M486,277v-29.7
	c0-104.8-83.3-189.8-186.1-189.8s-186,85-186,189.8l0,29.5" />


    <rect class="topLeftBox" opacity="1" x="75.4" y="450.4" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="20" height="23" />
    <rect class="botLeftBox" opacity="1" x="75.4" y="556.3" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="20" height="23" />
    <rect class="topRightBox" opacity="1" x="505" y="450.6" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="20" height="23" />
    <rect class="botRightBox" opacity="1" x="505" y="556.4" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="20" height="23" />

    <line class="topLine" opacity="1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="95" y1="466" x2="505" y2="466" />
    <line class="botLine" opacity="1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="95" y1="569" x2="504" y2="569" />
    <line class="leftLine" opacity="1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="83" y1="556" x2="83" y2="474" />
    <line class="rightLine" opacity="1" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" x1="513" y1="556" x2="513" y2="474" />


    <g class="svgImmersionGroup">

      <text class="theText" x="183" y="308" fill="#FFFFFF" font-family="'GothamHTF-Black'" font-size="21.0938" letter-spacing="-0.8">THE</text>
      <g>

        <text class="SVGText" x="173" y="398" fill="#FFFFFF" font-family="'GothamHTF-Black'" font-size="112.5" letter-spacing="5">SVG</text>

        <text class="immersionText" transform="matrix(1.2781 0 0 1 0 0)" x="135" y="435" fill="#FFFFFF" font-family="'GothamHTF-Medium'" font-size="35.1563" letter-spacing="-1.6">IMMERSION</text>
      </g>
    </g>
    <g clip-path="url(#featuringMask)" class="featuringText">
      <text class="podcastText" x="50%" y="87.5%" text-anchor="middle" fill="#FFFFFF" font-family="'GothamHTF-Medium'" font-size="24" letter-spacing="2">FEATURING</text>
    </g>

    <g clip-path="url(#guestMask)" class="guestText">

      <text x="50%" y="88%" text-anchor="middle" fill="#FFFFFF" font-family="'GothamHTF-Black'" font-size="34" letter-spacing="1">CHRIS GANNON</text>
    </g>
    <a xlink:href="http://svgimmersion.com/">
      <description>The Anything and Everything SVG Podcast</description>
      <title>The SVG Immersion Podcast with Rob Levin</title>
      <rect class="bg" fill="rgba(0,0,0,0)" width="100%" />
    </a>
  </svg>
</div>
            
          
!
            
              @font-face {
    font-family: 'GothamHTF-Black';
    src: url('GothamHTF-Black.eot');
    src: url('GothamHTF-Black.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Black.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Black.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Black.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Black.svg#gotham_htf_blackregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'GothamHTF-Medium';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Medium.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Medium.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Medium.woff2') format('woff2'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Medium.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Medium.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/35984/GothamHTF-Medium.svg#gotham_htfmedium') format('svg');
    font-weight: normal;
    font-style: normal;

}
body{
  background-color:#F89520;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container{
  max-width:100%;
  max-height:100%;
}

.bg{
  width:100%;
  height:100%
}
.svgImmersion{
  width:100%;
  height:100%;
}

            
          
!
            
              var select = function(s) {
      return document.querySelector(s);
    }, container = select('.container'), canL = select('.canL'), canR = select('.canR'), canL = select('.canL'), headband = select('.headband'), brainGroup = select('.brainGroup'), theText = select('.theText'), immersionText = select('.immersionText'), SVGText = select('.SVGText'), svgImmersionGroup = select('.svgImmersionGroup'), topLeftBox = select('.topLeftBox'), topRightBox = select('.topRightBox'), botLeftBox = select('.botLeftBox'), botRightBox = select('.botRightBox'), topLine = select('.topLine'), botLine = select('.botLine'), leftLine = select('.leftLine'), rightLine = select('.rightLine'), podcastText = select('.podcastText'), withRobText = select('.withRobText'), podcastMask = select('.podcastMask'), titleLineL = select('.titleLineL'), titleLineR = select('.titleLineR'), podcastTextGroup = select('.podcastTextGroup'),guestMask = select('.guestMask'),guestText = select('.guestText'),featuringMask = select('.featuringMask'),featuringText = select('.featuringText')

TweenMax.set('svg', {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
})

TweenMax.set(headband, {
  drawSVG:'50% 50%',
  alpha:0
})

TweenMax.set([canL,canR], {
  transformOrigin:'50% 0%',
  scale:0
})

TweenMax.set(svgImmersionGroup, {
  transformOrigin:'50% 50%'//,
  //scale:0
})

TweenMax.set([topLeftBox, botLeftBox, topRightBox, botRightBox],{
  transformOrigin:'50% 50%'
})
var mainTimeline = new TimelineMax({repeat:-1, onUpdate:updateBoxes, repeatDelay:1});
mainTimeline.timeScale(1)
mainTimeline.from(brainGroup,2, {
  alpha:0,
  scale:0.5,
  ease:Power4.easeInOut,
  transformOrigin:'50% 50%'
})
.to(headband, 2, {
  alpha:1,
  drawSVG:'0% 100%',
  stroke:'#000000',
  delay:1,
  ease:Power3.easeOut
},'-=2')
.to(canL, 2, {
  scaleX:1,
  ease:Elastic.easeOut.config(1, 0.8)
},'-=0.8')
.to(canL, 2, {
  scaleY:1,
  ease:Elastic.easeOut.config(1, 0.5)
},'-=2')
.to(canR, 2, {
  scaleX:1,
  ease:Elastic.easeOut.config(1, 0.8)
},'-=1.95')
.to(canR, 2, {
  scaleY:1,
  ease:Elastic.easeOut.config(1, 0.5)
},'-=1.9')

.staggerFrom([theText, SVGText, immersionText], 1, {
  alpha:0,
  attr:{
    y:'+=20'
  },
  ease:Expo.easeOut
}, 0.2, '-=1.6')

.staggerFrom([topLeftBox, topRightBox], 2,{
  //scale:-30,
  alpha:0,
  transformOrigin:'50% 50%',
  attr:{
    x:505,
    y:556
  },
  ease:Elastic.easeOut.config(1, 0.4)
  
}, 0.2, '-=1')

.staggerFrom([botLeftBox, botRightBox], 2,{
  //scale:-30,
  alpha:0,
  transformOrigin:'50% 50%',
  attr:{
    x:75.5,
    y:450
  },
  ease:Elastic.easeOut.config(1, 0.4)
  
}, 0.2, '-=2')

.from([topLine, rightLine, botLine, leftLine],1,{
  alpha:0,
  ease:Power4.easeOut
},'-=2.3')
/**/
.to(podcastMask, 2, {
  attr:{
    y:460,
    width:430
  },
  //ease:Elastic.easeOut.config(1, 0.4)
  ease:Power3.easeOut
},'-=2.51')


.from(titleLineL, 2, {
  drawSVG:'0% 0%',
  attr:{
    x1:'+=150',
    x2:'+=150'
  },
  delay:0.23,
  ease:Power4.easeInOut
},'-=2')
.from(titleLineR, 2, {
  drawSVG:'0% 0%',
  attr:{
    x1:'-=150',
    x2:'-=150'
  },
  ease:Power4.easeInOut
}, '-=2')
.from(withRobText, 2, {
  alpha:0
}, '-=1')

.to(podcastMask, 1, {
  scaleX:0,
  transformOrigin:'100% 50%',
  ease:Power3.easeOut,
  delay:2
})
.from(featuringMask, 1, {
  scaleX:0,
  transformOrigin:'0% 50%',
  ease:Power3.easeOut
},'-=1')
.from(featuringText, 1, {
    x:'-=50',
  ease:Power3.easeOut
}, '-=1')
.to(podcastTextGroup, 1, {
    x:'+=50',
  ease:Power3.easeOut
}, '-=1')

.to(featuringMask, 1, {
  scaleX:0,
  transformOrigin:'100% 50%',
  ease:Power3.easeOut,
  delay:1
})
.to(featuringText, 1, {
    x:'+=50',
  ease:Power3.easeOut
}, '-=1')
.from(guestMask, 1, {
  scaleX:0,
  transformOrigin:'0% 50%',
  ease:Power3.easeOut
},'-=1')
.from(guestText, 1, {
    x:'-=50',
  ease:Power3.easeOut
}, '-=1')

.to('.svgImmersion', 1, {
  alpha:0,
  delay:3
})


function updateBoxes(){
  
  TweenMax.set(topLine, {
    attr:{
      x1:Number(topLeftBox.getAttribute('x')) + 20,
      x2:Number(topRightBox.getAttribute('x')),
      y1:Number(topLeftBox.getAttribute('y')) + (23/2),
      y2:Number(topRightBox.getAttribute('y')) + (23/2),
    }
  })
  TweenMax.set(rightLine, {
    attr:{
      x1:Number(botRightBox.getAttribute('x')) + (20/2),
      x2:Number(topRightBox.getAttribute('x')) + (20/2),
      y1:Number(botRightBox.getAttribute('y')),
      y2:Number(topRightBox.getAttribute('y')) + 23
    }
  })  
  
  TweenMax.set(botLine, {
    attr:{
       x1:Number(botLeftBox.getAttribute('x')) + 20,
       x2:Number(botRightBox.getAttribute('x')),
       y1:Number(botLeftBox.getAttribute('y')) + (23/2),
       y2:Number(botRightBox.getAttribute('y')) + (23/2)
    }
  })   
  TweenMax.set(leftLine, {
    attr:{
       x1:Number(botLeftBox.getAttribute('x')) + (20/2),
       x2:Number(topLeftBox.getAttribute('x')) + (20/2),
       y1:Number(botLeftBox.getAttribute('y')),
       y2:Number(topLeftBox.getAttribute('y')) + 23
    }
  })   
}

updateBoxes()
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console