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 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.

Quick-add: + add another resource

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.

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">
  <svg id="steps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401 401">
    <defs>
      <linearGradient id="gradient" x1="79.21" y1="-45.73" x2="342.7" y2="410.64" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#9F9689"/>
        <stop offset="0.8" stop-color="#5F5A51"/>
        <stop offset="1" stop-color="#000"/>
      </linearGradient>
    </defs>
    <title>icons</title>
    <path id="step-one" style="stroke-miterlimit:10" d="M48.5,185.3H35.17v13.6H48.5ZM228.23,4.77h-13.6v13.6h13.6ZM382.1,279.7H368.5v13.6h13.6ZM277.57,245.83H264v13.6h13.6Zm-49.34,66.94h-13.6v13.6h13.6ZM350.37,92.23v-16l-64.54,80,64.54,19.47V154.63H400.5v50.14H354.1L336.77,350.63H358.9V400.5H308.77V377.3L92.23,337v21.6H42.1V308.5h24L104.5,217H84V166.9h17.86L25.3,50.63H.5V.5H50.63V30.1L196.5,63.7V42.1h50.13V64.5h104V42.1H400.5V92.23ZM358.9,84h33.33V50.63H358.9ZM204.77,84H238.1V50.63H204.77ZM50.63,35.43V46.1L156.77,108h48V131.7l37.06,11.2L220.5,92.5h-24V69ZM350.37,182.37l-84.54,4.53L332.5,344.77,350.63,193.3V182.37Zm-104,45.06V253.3l79.2,88.27L260.5,187.43l-32.53,40ZM134.1,166.9v3.47l15.2,18.13,2.93-.27,21.34-30.13H154.63V112.5L48.5,50.63H32.23L130.9,166.9Zm45.6-8.8L158.63,188,209,185.3l-5.86-27.2Zm16.53-41.87H162.9v33.34h33.33ZM134.1,178.1v11.2l9.07-.53Zm0,16v19.73L148,194.1l-.8-.53ZM73.3,308.77H92.23V327.7l104-75.2v-1.07l-45.06-53.06Zm144.53-81.34-8-37.33L154.9,193l-.8,1.07,42.13,49.6V227.43Zm4.8-1.33,31.2-38.4-38.66,2.13Zm-17.86,43.2H238.1V236H204.77Zm39.46-120.53-39.46-12v3.73l9.33,44.27,44-2.4.27-.27Zm17.6,29.06L277.3,158.9l-26.67-8ZM8.77,42.1H42.1V8.77H8.77ZM107.7,166.9h16.8L50.1,79.17ZM92.23,208.77h33.34v-33.6H92.23Zm17.6,8.26L78.1,293l53.6-76ZM84,317H50.63v33.34H84Zm224.8,55.2v-21.6h17.86L246.37,261v16.54H196.23V258.63L94.37,332.23Zm41.6-13.33H317v33.33h33.34Zm8.53-162.67h33.33V162.9H358.9ZM282.37,160.5l-17.6,21.6,75.46-4.27Zm-1.87-5.87,68.8-84.8H246.37v22.4H225.83L248,144.77Z"/>
    <path id="step-two" style="stroke-miterlimit:10" d="M370.37,237.17H301V228.9h69.34Zm0,14.4H301v5.06h69.34Zm0,16.8H301v5.06h69.34Zm0,16.8H301v5.06h69.34Zm0-117.07H351.43v5.07h18.94Zm30.13-24.53V322.23H130.1v-64H.5V31.57H179.17v112ZM130.1,250V143.57h40.53V40.1H8.77V250ZM156,173.17V168.1h14.66V151.83H138.37V249.7h32.26V173.17Zm77.6,139.73-2.4.8H328A149.29,149.29,0,0,1,290.63,299c-13.06,7.74-25.06,3.74-34.66.27-6.4-2.13-11.74-4-15.74-2.13C230.1,302,233.57,312.63,233.57,312.9Zm51.73-16.53c-5.33-2.94-11.2-6.14-17.33-9.87-3.74-2.13-7.74-4.53-11.74-6.67-13.6-7.73-25.33-9.86-35.2-6.13-12,4.27-17.6,15.73-18.66,17.87.53,7.2,3.2,13.6,7.46,17.86a22,22,0,0,0,5.87,4.27h13.07c-1.6-5.6-1.34-16.27,9.33-21.07,5.87-2.66,12.53-.53,19.47,2.14,8.26,2.93,17.6,6.13,27.73,1.6Zm-87.73-12a21.71,21.71,0,0,1,4.8-12.27c-6.67,1.6-16.27,5.33-21.87,13.07-5.07,7.2-6.13,16.53-2.93,28l-2.4.8h32.26a3.62,3.62,0,0,0-1.06-.8C199.7,306,196.5,295.57,197.57,284.37ZM158.1,314h14.4c-3.47-12.8-2.13-23.47,4-31.74.53-.53.8-1.06,1.33-1.6a21.6,21.6,0,0,0-13.06,6.4C159.17,292.37,156.77,301.7,158.1,314Zm95.73-62.4c9.87-1.6,17.07-5.87,20.54-12.8s2.93-16.54-1.87-25.6c-20.8-8.8-26.13,3.2-33.07,18.66-4.8,10.67-9.6,21.6-20.8,24.54a31.38,31.38,0,0,1-9.33,1.33c-9.07,0-14.13-4.8-18.93-9.6-3.2-3.2-6.4-6.4-11.2-8V258h-24.8c-.8,3.2-1.87,10.13,1.06,15.46a13.66,13.66,0,0,0,9.07,6.4,30.37,30.37,0,0,1,18.67-5.06c9.86-7.47,22.66-9.07,25.86-9.34,11.2-7.73,28.8-11.46,44.8-13.86Zm12.8-45.34a23,23,0,0,0-8.53-4c-8.27-1.6-17.87,1.34-26.67,8-4.53,3.74-18.66,14.67-33.86,12.54a32.61,32.61,0,0,1-18.67-10.14V235c6.67,1.87,10.93,6.14,14.67,9.87,5.86,5.87,10.66,10.4,23.46,6.93,8.8-2.4,13.07-11.73,17.6-21.86,6.14-13.34,12.8-28.27,32-23.74Zm-128.26,52V283.3c1.86,4.53,6.4,10.4,15.73,12.8,1.33-4.8,3.2-8.8,6.13-12a16.74,16.74,0,0,1-9.06-8c-3.47-6.13-2.67-13.6-1.87-17.87Zm0,55.74H153a68.42,68.42,0,0,1,0-12.8,26.23,26.23,0,0,1-14.66-8.54ZM392.23,152.1H179.17v16.27H225.3v5.06H179.17v32C185,212.9,191.7,216.9,198.63,218c8.8,1.33,18.67-2.4,30.14-11.47,9.86-7.73,21.06-10.93,30.66-9.07a25.3,25.3,0,0,1,17.07,12.8c5.87,10.67,6.67,22.14,2.13,30.94-2.93,5.86-9.33,13.33-24.26,15.46-20,2.94-46.14,8.8-51.2,24a36.3,36.3,0,0,1,16-11.73c11.46-4,24.53-1.87,39.46,6.67,4.27,2.4,8,4.53,11.74,6.66,30.4,17.6,47.46,27.47,87.2,31.74H392V152.1ZM289.3,266.5a10.67,10.67,0,1,0-10.67,10.67A10.67,10.67,0,0,0,289.3,266.5Zm-5.07,0a5.6,5.6,0,1,1-5.6-5.6,5.47,5.47,0,0,1,5.6,5.34v.26Zm-15.46-36a8.54,8.54,0,1,0-8.55,8.53h0a8.28,8.28,0,0,0,8.54-8A4.86,4.86,0,0,0,268.77,230.5Zm-4.8,0A3.47,3.47,0,1,1,260.5,227,3.53,3.53,0,0,1,264,230.5Zm55.2-30.4a7.74,7.74,0,1,0-7.75,7.73h0a7.42,7.42,0,0,0,7.74-7.09C319.18,200.53,319.18,200.31,319.17,200.1Zm-5.07,0a2.68,2.68,0,0,1-2.67,2.67h0a2.67,2.67,0,1,1,2.67-2.67ZM113,62.23H55.43V67.3H113Zm21.34,14.14H55.43v5.06h78.94ZM124.23,90.5H55.43v5.07H124V90.5Zm-22.4,14.13H55.43v5.07h46.4Zm22.4,14.14H55.43v5.06H124v-5.06ZM106.9,132.9H55.43V138H106.9ZM118.1,147H55.43v5.07h62.4V147ZM81,161.17H55.43v5.06H81ZM94.9,175.3H55.43v5.07H94.9ZM41,62.23H29.3V67.3H41Zm0,14.14H29.3v5.06H41ZM41,90.5H29.3v5.07H41Zm0,14.13H29.3v5.07H41Zm0,14.14H29.3v5.06H41Zm0,14.13H29.3V138H41ZM41,147H29.3v5.07H41Zm0,14.14H29.3v5.06H41Zm0,14.13H29.3v5.07H41Zm0,14.4H29.3v5.07H41Zm45.6,0H55.43v5.07h31.2ZM41,203.83H29.3v4.8H41Zm72,0H55.43v4.8H113ZM41,218H29.3V223H41Zm53.87,0H55.43V223H94.9Zm144-162.4v32H197.3v-32ZM233.83,82.5V71.57h-11.2V60.63H202.37V82.5Zm57.34-26.93H249.83v32h41.34Zm-36.27,4.8h31.47V82.23H254.9Zm36.27,277.06v32H249.83v-32Zm-4.8,27.2V353.7h-11.2V342.77H254.9v21.86Zm57.33-27.2H302.37v32H343.7Zm-36.27,5.07H338.9v21.87H307.43ZM238.9,98.23H197.3v32h41.33v-32Zm-36.53,5.07h31.46v21.87H202.37ZM118.63,322H93.3v23.46H25V293.7H50.37V270h68v52Zm-30.4,0H50.37V298.5H30.1v41.87H88.23ZM77.83,308.1v-9.6H55.7v18.4H88.23v-8.53H77.83ZM113.57,275H55.43v18.4H93V316.9H113.3V275Zm177.6-176.8H249.83v32h41.34ZM254.9,103.3h31.47v21.87H254.9Zm88.8-5.07v32H302.37v-32ZM338.63,114H327.7V103.3H307.43v21.87H338.9V114Z"/>
    <path id="step-three" style="stroke-miterlimit:10" d="M121.57,73.83H42.37V68.77h79.2Zm90.66-5.06H185.57v5.06h26.66Zm0,13.06H185.57V86.9h26.66Zm0,13.07H185.57V100h26.66Zm0,13.33H185.57v5.07h26.66Zm0,13.07H185.57v5.07h26.66Zm0,13.33H185.57v5.07h26.66ZM143.7,82.9H64.77V88H144V82.9Zm0,14.13H64.77v5.07H144V97Zm-22.13,14.4H42.37v5.07h79.2Zm22.13,14.14H64.77v5.06H144v-5.06Zm0,14.13H64.77v5.07H144V139.7Zm17.6,14.4H82.1v5.07h79.2Zm0,14.13H82.1v5.07h79.2Zm-39.73,14.14H42.37v5.06h79.2ZM32.77,68.77H21v5.06H32.77Zm0,14.13H21V88H32.77Zm0,14.13H21v5.07H32.77Zm0,14.4H21v5.07H32.77Zm0,14.14H21v5.06H32.77Zm0,14.13H21v5.07H32.77Zm0,14.4H21v5.07H32.77Zm0,14.13H21v5.07H32.77Zm0,14.14H21v5.06H32.77ZM281.3,251.43l-30.4,22.94c-.27,0-.27.26-.53.26h-.27a.55.55,0,0,1-.53-.53c0-.53-1.34-10.4,3.2-28.27,5.33-20.53,14.13-30.93,14.4-31.2a1,1,0,0,1,.8-.26.58.58,0,0,1,.53.53l13.07,36C281.83,250.9,281.57,251.17,281.3,251.43Zm-23.47-6.66a89.84,89.84,0,0,0-3.46,21.6l22.13-16.8-9.6-26.4a107.74,107.74,0,0,0-9.07,21.6ZM272,286.63a1,1,0,0,0-.8-.26H257.83l2.4-7.2c0-.27,0-.8-.26-.8-.27-.27-.54-.27-1.07,0l-3.73,2.13c-.27,0-.27.27-.27.53l-2.93,8.8v.8a1,1,0,0,0,.8.27h17.6c.26,0,.8-.27.8-.53l.8-2.94C272.23,287.17,272,286.9,272,286.63Zm59.2,3.2L300.23,187.7c0-.27-.53-.53-.8-.53H296.5a1,1,0,0,0-.8.26.5.5,0,0,0-.1.7.47.47,0,0,0,.1.1l29.87,98.14H316.5l-3.73-12.54c0-.26-.54-.53-.8-.53H309a.94.94,0,0,0-1.06.8,1.22,1.22,0,0,0,0,.27l4.8,16c0,.26.53.53.8.53h16.8a1,1,0,0,0,.8-.27ZM286.9,187.7c0-.27-.53-.53-.8-.53s-.8.26-.8.53l-6.93,20.8V209l1.6,5.07c0,.27.53.53.8.53s.8-.26.8-.53l4.26-13.87,18.4,62.4L277,275.43a1.4,1.4,0,0,0-.53,1.07l.8,2.93a.57.57,0,0,0,.53.54h.54l30.4-14.4a1.4,1.4,0,0,0,.53-1.07Zm-2.67,34.4c0-.27-.53-.53-.8-.53s-.8.26-.8.53l-1.6,4v.53l9.34,29.6L265,271.43c-.26.27-.53.54-.26.8l.8,2.94a.58.58,0,0,0,.53.53h.8l28.53-17.07c.27-.26.54-.53.27-1.06ZM360.5,328.5l25.87,25.87H396.5V368H382.9V357.83L353.57,328.5H173v-116H32L68.5,261.57H88.23V240.23h26.94l25.06,22.67v45.6H116.77v21.33h-52V265L25.83,212.5H.5V33H228v66.4H252.5V74.9h68.27V96.77L374.1,52.23V43.17h13.6v13.6H376.77l-56,46.66v23.74H289V149.3H400.5V328.5ZM135.17,303.7V266.63h-18.4V303.7Zm-30.94-12.27V303.7h7.47V266.63H93.3v24.8Zm12.54-29.86h14.4l-14.4-13.07Zm-23.47,0h18.4V245.3H93.3ZM69.83,325H111.7V308.77H88.23V266.63H69.83Zm187.74-203.2H316V80h-58.4ZM228,104.5v44.27h56.26V126.63H252.5V104.5ZM219.7,149V54.9H178.9V149Zm-38.4,8.27V204h38.13V157.3ZM9,41.57v8.26H219.7V41.57ZM173,204V149h.8V54.9H9V204.23H173Zm8.27,116H392V157.3H228v55.2H181.3Z"/>
    <path id="step-four" style="stroke-miterlimit:10" d="M82.37,149.3H68.77V135.7h13.6Zm294.4,130.93H319.43v5.07h57.34Zm21.33,14.14H319.43v5.06H398.1ZM388,308.5H319.43v5.07H388Zm-22.4,14.13h-46.4v5.07h46.4ZM388,336.77H319.43v5.06H388Zm-83.2-56.54H293v5.07h11.74Zm0,14.14H293v5.06h11.74Zm0,14.13H293v5.07h11.74Zm0,14.13H293v5.07h11.74Zm0,14.14H293v5.06h11.74Zm-129.07.53H153v32.8H175.7Zm-17.6,5.07h12.53V365.3H158.1Zm56.53-34.67H188.77V372h25.86ZM197.3,316h9.07v47.46H197.3Zm53.07,5.6H227.7V370.1h22.67Zm-17.6,5.06H245.3V365.3H232.77ZM400.5,123.43H380l1.6,1.6L334.9,174.1h17.6v50.13H302.37V200L252,174.37v7.46l24,40.27h8v13.6h-13.6V222.63L252,191.7v22.93a56.72,56.72,0,0,1-21.87,44.8h0l-2.67,2.14a39.4,39.4,0,0,1-23.73,8.26A37.82,37.82,0,0,1,180,261.57l-2.67-2.14a55.34,55.34,0,0,1-20.53-32.53L88.23,376H89v13.6H75.43V376h7.2l72.8-158.4v-30.4L68.5,267.43l9.6,8.8v45.34H54.63v21.06H3.17v-68H26.63V253.57H53.57L65,264l90.67-83.74v-6.4L70.9,209.57v6.93H57.3V203.17H70.9v1.06l84.53-35.73A47.1,47.1,0,0,1,164,142.1l-63.2,4v21.6H50.63V117.57H69.3L46.9,92.5H.5V42.1H50.63V64.5L155.7,54.9V50.1h13.6V63.7h-2.13L185.3,125A47.51,47.51,0,0,1,204,121.3a44.41,44.41,0,0,1,8.53.8L195.7,24.77h-5.33V11.43H204V25H201l16.54,98.14a46.82,46.82,0,0,1,15.73,8.26L305,65.3V47.17h44.8V82.63H305V72.23l-67.73,62.4a42.23,42.23,0,0,1,8,10.14l60-39.47,1.6,2.4V91.43h41.33v32H330.1V172l46.13-48.54H359.17v-32H400.5ZM313.57,74.1h28V55.43h-28ZM54.9,274.63H69.3l-14.4-12.8Zm-23.47,0h18.4V258.37H31.43Zm18.4,5.07H31.43v24.53H42.37V316.5h7.46Zm0,41.87H26.37V279.7H8v57.87h41.6v-16ZM73.3,316.5V279.7H54.9v36.8ZM311.7,118.37h31.2V96.5H311.7Zm-156-54.94V59.7L54.63,69l115.2,65.87a44.62,44.62,0,0,1,10.67-8L161.83,63.17H155.7ZM42.37,50.63H8.77V84H42.1V50.63Zm50.13,75.2H58.9v33.34H92.23V125.83Zm8.27-8.26V141l62.66-4L50.63,72.5V89L76,117.57ZM164,169.3v21.33c4-4,10.4-11.46,10.93-20,.53-9.6,3.73-16.53,8.8-18.66,2.4-1.07,6.4-1.34,11.2,2.66,1.33,1.07,2.4,2.4,4,3.74,8.27,7.73,20.27,19.46,45.07,18.93v-8a40.13,40.13,0,0,0-40-40C181.83,129.57,164,147.43,164,169.3Zm79.73,45.33V182.37c-26.67.53-40.27-12.54-48.53-20.27-1.34-1.33-2.67-2.4-3.74-3.47-2.4-1.86-4.26-2.66-5.86-1.86-2.94,1.33-5.34,6.93-5.87,14.4-.8,14.4-15.2,25.86-15.73,26.4l-.27-.27v17.6A48.26,48.26,0,0,0,182.37,253l2.66,2.14a30,30,0,0,0,37.07,0l2.67-2.14a48.23,48.23,0,0,0,18.93-38.4Zm58.67-20.26V174.1H325V123.43H306.9V110.37L247.7,149.3A47,47,0,0,1,252,168.5Zm41.86-12H310.9V215.7h33.33Zm51.2-64v-11.2H384.5V96.5H364.23v21.87Z"/></svg>
</div>
<div class="titles">
  <h1 class="title title1 active">1. Analyze</h1>
  <h1 class="title title2">2. Create</h1>
  <h1 class="title title3">3. Develop</h1>
  <h1 class="title title4">4. Implement</h1>
</div>
<div class="controls">
  <div class="previous">&larr;</div>
  <div class="next">&rarr;</div>
</div>
            
          
!
            
              $gold: #9F9689;

@mixin horizontalcenter(){
  left: 50%;
  transform: translatex(-50%);
}

@mixin verticalcenter(){
  top: 50%;
  transform: translatey(-50%);
}

@mixin centercenter(){
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div{
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
  &:before, &:after{
    content: '';
    position: absolute;
    display: block;
    box-sizing: border-box;
  }
}

body{
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  color: $gold;
  font-family: 'Lato Light', sans-serif;
  background: radial-gradient(ellipse at center, #333, #111);
  
  & .wrapper{
    @include centercenter();
    width: 50vw;
    height: 50vw;
    max-width: 50vw;
    max-height: 60vh;
    
    & svg{
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      
      & path{
        fill: none;
        stroke: url(#gradient);
        
        &#step-two, &#step-three, &#step-four{
          display: none;
        }
        
      }
      
    }
    
  }
  
  & .titles{
    @include horizontalcenter();
    top: 0;
    width: auto;
    height: auto;
    text-align: center;
    
    & .title{
      display: inline-block;
      opacity: 0;
      width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: all 2s ease;
      &.active{
        opacity: 1;
        width: 10em;
      }
    }
    
  }
  
  & .controls{
    @include horizontalcenter();
    bottom: 0;
    width: auto;
    height: 2em;
    text-align: center;
    font-size: 2em;
    
    & .next, & .previous{
      position: relative;
      float: left;
      width: 2em;
      height: 2em;
      cursor: pointer;
      &:hover{
        color: transparentize($gold, 0.2);
      }
      &:active{
        color: transparentize($gold, 0.5);
      }
    }
    
  }
  
}
            
          
!
            
              /*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.
*/

TweenLite.defaultEase = Expo.easeInOut;

var morphTimeline = new TimelineMax({repeat:-1, paused: true}),
    duration = 2;

morphTimeline
  .to('#step-one',duration,{morphSVG:{shape:"#step-two"}})
  .addPause()
  .to('#step-one',duration,{morphSVG:{shape:"#step-three"}})
  .addPause()
  .to('#step-one',duration,{morphSVG:{shape:"#step-four"}})
  .addPause()
  .to('#step-one',duration,{morphSVG:{shape:"#step-one"}})
  .addPause()
;

var activeStep = 1;
var direction = 'forward';

$('.next').on('click', function(){
  direction = 'forward';
  if(activeStep < 4){
    activeStep++;
  }else{
    activeStep = 1;
  }
  updateView();
  morphTimeline.play();
});

$('.previous').on('click', function(){
  direction = 'backward';
  if(activeStep > 1){
    activeStep--;
  }else{
    activeStep = 4;
  }
  updateView();
  morphTimeline.reverse();
});

function updateView(){
  $('.previous,.next').show();
  $('.previous,.next').css({'pointer-events': 'none', cursor: 'wait'});
  if(activeStep === 1){
    $('.previous').hide();
  }
  if(activeStep === 4){
    $('.next').hide();
  }
  $('.title').removeClass('active');
  $('.title' + activeStep).addClass('active');
  setTimeout(function(){
    $('.previous,.next').css({'pointer-events': 'all', cursor: 'pointer'});
  },(duration*1000));
}

updateView();
            
          
!
999px
Loading ..................

Console