<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
 <defs>
<linearGradient id="playGrad" gradientUnits="userSpaceOnUse" x1="0" y1="300" x2="800" y2="300">
  <stop  offset="0" style="stop-color:#246EB9"/>
  <stop  offset="0.2" style="stop-color:#EE4266"/>
  <stop  offset="0.4" style="stop-color:#FFD23F"/>
  <stop  offset="0.6" style="stop-color:#3BCEAC"/>
  <stop  offset="0.8" style="stop-color:#FF6F59"/>
  <stop  offset="1" style="stop-color:#246EB9"/>
</linearGradient>  
  <pattern id="gradPattern" width="800" height="600" x="0" y="0" patternUnits="userSpaceOnUse" >
    
    <rect id="grad" x="0" y="0" fill="url(#playGrad)" width="800" height="600"/>
    
  </pattern>  
      <g id="endGroup">
        <path id="H_Start" d="M233.38,512.43H217.06a5.56,5.56,0,0,1-5.58-5.58V489.91a5.52,5.52,0,0,0-5.37-5.58H134.84a5.39,5.39,0,0,0-5.37,5.58v16.94a5.55,5.55,0,0,1-5.57,5.58H107.58a5.56,5.56,0,0,1-5.58-5.58V381.05a5.56,5.56,0,0,1,5.58-5.58H123.9a5.55,5.55,0,0,1,5.57,5.58v73.12a5.39,5.39,0,0,0,5.37,5.58h71.27a5.52,5.52,0,0,0,5.37-5.58V381.05a5.56,5.56,0,0,1,5.58-5.58h16.32a5.56,5.56,0,0,1,5.58,5.58v125.8A5.56,5.56,0,0,1,233.38,512.43Z"/>
        <path id="R_Start" d="M542,512.43H525.66a5.56,5.56,0,0,1-5.58-5.58V486.61c0-8.68-6.2-15.7-13.63-15.7h-70a5.73,5.73,0,0,0-5.17,5.16v30.78a5.56,5.56,0,0,1-5.58,5.58H409.36a5.56,5.56,0,0,1-5.58-5.58V381.05a5.56,5.56,0,0,1,5.58-5.58h84.48c22.73,0,41.11,18.18,41.11,40.49v14.25a39,39,0,0,1-6.81,22.11,40.54,40.54,0,0,1,19.41,34.29v20.24A5.55,5.55,0,0,1,542,512.43ZM507.48,416c0-8.68-6-15.7-13.64-15.7H431.25v40.49a5.21,5.21,0,0,0,5.37,5.37h57.22c7.65,0,13.64-7,13.64-15.7Z"/>
        <path id="A_Start" d="M389.84,506.54q0,5.56-5.53,5.57h-16.2q-5.53,0-5.53-5.57V489.6q0-5.58-5.4-5.58H285.55c-3.6,0-5.39,1.86-5.39,5.58v16.94q0,5.56-5.54,5.57H258.43q-5.53,0-5.54-5.57V442.71q0-29.32,20-49.78t48.33-20.45q28.51,0,48.55,20.45t20,49.78v63.83Zm-27.26-52.68V443.33q0-18.79-12.05-32t-29.27-13.22q-17,0-29.06,13.12a45,45,0,0,0-12,31.5v11.15c0,3.72,1.79,5.58,5.39,5.58h71.63Q362.58,459.44,362.58,453.86Z"/>
        <path id="D_Start" d="M702,444.15q0,28.31-19.93,48.34t-48.44,20H565q-5.57,0-5.57-5.58V381.15q0-5.56,5.57-5.57h68.66q28.3,0,48.33,20.14t20,48.33Zm-27.26-.1v-.13A43.58,43.58,0,0,0,662.62,413q-12.12-12.84-29.1-12.84H592c-3.58,0-5.38,1.79-5.38,5.38v76.81c0,3.73,1.8,5.59,5.38,5.59h41.48q17,0,29.1-12.83T674.74,444.05Z"/>
                <path id="P_End" d="M202.81,287.09H135.05a5.38,5.38,0,0,0-5.37,5.58v57.89a5.55,5.55,0,0,1-5.58,5.57H107.78a5.54,5.54,0,0,1-5.57-5.57V96a5.55,5.55,0,0,1,5.57-5.58h95c22.72,0,41.11,18.18,41.11,40.49V246.81C243.92,269.12,225.53,287.09,202.81,287.09ZM216.65,131c0-8.67-6.2-15.7-13.84-15.7H135.05a5.33,5.33,0,0,0-5.37,5.37V256.31a5.38,5.38,0,0,0,5.37,5.58h67.76c7.64,0,13.84-7,13.84-15.7Z" fill="#39b54a"/>

        <path id="L_End" d="M387.47,337.13a67.26,67.26,0,0,1-49.37,21.69c-37.8,0-68.37-31.81-68.37-71.06V120.62a5.52,5.52,0,0,0-5.58-5.37h-6.61a5.55,5.55,0,0,1-5.58-5.57V96a5.56,5.56,0,0,1,5.58-5.58h51.23A5.38,5.38,0,0,1,314.14,96v13.64a5.38,5.38,0,0,1-5.37,5.57h-6.2a5.52,5.52,0,0,0-5.58,5.37V288.17c0,24.79,18.59,44.62,41.11,44.62a37.8,37.8,0,0,0,21.07-6.4,5.11,5.11,0,0,0,2.27-4.34V291.31a5.56,5.56,0,0,1,5.58-5.58h16.32a5.56,5.56,0,0,1,5.58,5.58v42.1A5.91,5.91,0,0,1,387.47,337.13Z" />
    
        <path id="A2_End" d="M540.52,350.24q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V256.08q0-5.58-5.4-5.58H436.24q-5.4,0-5.4,5.58v94.16q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V157.7q0-29.32,20-49.78T472,87.47q28.5,0,48.54,20.45t20,49.78V350.24Zm-27.26-129.9v-62q0-18.8-12-32T472,113.09q-17,0-29.07,13.11a45,45,0,0,0-12,31.5v62.64q0,5.58,5.4,5.58h71.62Q513.26,225.92,513.26,220.34Z" />
        <path id="Y_End" d="M640.5,263.75a5.33,5.33,0,0,0-3.93,5.16v81.65a5.54,5.54,0,0,1-5.57,5.57H614.68a5.55,5.55,0,0,1-5.58-5.57V268.91a5.32,5.32,0,0,0-3.93-5.16c-29.33-8.06-50.81-35.74-50.81-68.58V96a5.55,5.55,0,0,1,5.57-5.58h16.32A5.56,5.56,0,0,1,581.83,96V195c0,25,18.39,45.24,40.9,45.24,22.73,0,41.11-20.25,41.11-45V96a5.56,5.56,0,0,1,5.58-5.58h16.32A5.55,5.55,0,0,1,691.31,96v99.13C691.31,228,669.62,255.69,640.5,263.75Z" />
      </g>  
  </defs>
      <g id="startGroup" fill="url(#gradPattern)">
      <path id="P_Start" d="M202.81,188.38H135.05a5.38,5.38,0,0,0-5.37,5.58v27.88a5.56,5.56,0,0,1-5.58,5.58H107.78a5.55,5.55,0,0,1-5.57-5.58V96a5.55,5.55,0,0,1,5.57-5.58h95c22.72,0,41.11,18.18,41.11,40.49V148.1C243.92,170.41,225.53,188.38,202.81,188.38ZM216.65,131c0-8.67-6.2-15.7-13.84-15.7H135.05a5.33,5.33,0,0,0-5.37,5.37v37a5.38,5.38,0,0,0,5.37,5.58h67.76c7.64,0,13.84-7,13.84-15.7Z"/>
        <path id="L_Start" d="M387.47,208.42a67.3,67.3,0,0,1-49.37,21.69c-37.8,0-68.37-31.81-68.37-71.06V120.62a5.52,5.52,0,0,0-5.58-5.37h-6.61a5.55,5.55,0,0,1-5.58-5.57V96a5.56,5.56,0,0,1,5.58-5.58h51.23A5.38,5.38,0,0,1,314.14,96v13.64a5.38,5.38,0,0,1-5.37,5.57h-6.2a5.52,5.52,0,0,0-5.58,5.37v38.84c0,24.79,18.59,44.62,41.11,44.62a37.8,37.8,0,0,0,21.07-6.4,5.11,5.11,0,0,0,2.27-4.34v-25a5.56,5.56,0,0,1,5.58-5.58h16.32a5.56,5.56,0,0,1,5.58,5.58V204.7A6,6,0,0,1,387.47,208.42Z"/>
        <path id="Y_Start" d="M640.5,186.52a5.34,5.34,0,0,0-3.93,5.16v30.16a5.55,5.55,0,0,1-5.57,5.58H614.68a5.56,5.56,0,0,1-5.58-5.58V191.68a5.33,5.33,0,0,0-3.93-5.16c-29.33-8.06-50.81-35.74-50.81-68.58V96a5.55,5.55,0,0,1,5.57-5.58h16.32A5.56,5.56,0,0,1,581.83,96v21.69c0,25,18.39,45.24,40.9,45.24,22.73,0,41.11-20.24,41.11-45V96a5.56,5.56,0,0,1,5.58-5.58h16.32A5.55,5.55,0,0,1,691.31,96v21.9C691.31,150.78,669.62,178.46,640.5,186.52Z"/>
        <path id="A2_Start" d="M540.52,221.53q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V204.59c0-3.72-1.8-5.57-5.4-5.57H436.24c-3.6,0-5.4,1.85-5.4,5.57v16.94q0,5.58-5.53,5.58h-16.2q-5.53,0-5.53-5.58V157.7q0-29.32,20-49.78T472,87.47q28.5,0,48.54,20.45t20,49.78v63.83Zm-27.26-52.67V158.32q0-18.8-12-32T472,113.09q-17,0-29.07,13.11a45,45,0,0,0-12,31.5v11.16q0,5.58,5.4,5.58h71.62Q513.26,174.44,513.26,168.86Z"/>
        <path id="H_End" d="M233.38,512.43H217.06a5.56,5.56,0,0,1-5.58-5.58V412.68a5.51,5.51,0,0,0-5.37-5.57H134.84a5.38,5.38,0,0,0-5.37,5.57v94.17a5.55,5.55,0,0,1-5.57,5.58H107.58a5.56,5.56,0,0,1-5.58-5.58V252.33a5.55,5.55,0,0,1,5.58-5.57H123.9a5.55,5.55,0,0,1,5.57,5.57V377a5.38,5.38,0,0,0,5.37,5.57h71.27a5.51,5.51,0,0,0,5.37-5.57V252.33a5.55,5.55,0,0,1,5.58-5.57h16.32a5.55,5.55,0,0,1,5.58,5.57V506.85A5.56,5.56,0,0,1,233.38,512.43Z" />
        <path id="R_End" d="M542,512.43H525.66a5.56,5.56,0,0,1-5.58-5.58V406.64c0-8.68-6.2-15.7-13.63-15.7h-70a5.73,5.73,0,0,0-5.17,5.16V506.85a5.56,5.56,0,0,1-5.58,5.58H409.36a5.56,5.56,0,0,1-5.58-5.58V252.33a5.55,5.55,0,0,1,5.58-5.57h84.48c22.73,0,41.11,18.18,41.11,40.48v63a39,39,0,0,1-6.81,22.11,40.54,40.54,0,0,1,19.41,34.29V506.85A5.55,5.55,0,0,1,542,512.43Zm-34.5-225.19c0-8.67-6-15.69-13.64-15.69H431.25v89.23a5.21,5.21,0,0,0,5.37,5.37h57.22c7.65,0,13.64-7,13.64-15.7Z" />
        <path id="A_End" d="M389.84,506.54q0,5.56-5.53,5.57h-16.2q-5.53,0-5.53-5.57V379.11q0-5.57-5.4-5.57H285.55c-3.6,0-5.39,1.86-5.39,5.57V506.54q0,5.56-5.54,5.57H258.43q-5.53,0-5.54-5.57V314q0-29.34,20-49.78t48.33-20.45q28.51,0,48.55,20.45t20,49.78V506.54ZM362.58,343.38V314.62q0-18.8-12.05-32t-29.27-13.22q-17,0-29.06,13.12t-12,31.5v29.38c0,3.72,1.79,5.58,5.39,5.58h71.63Q362.58,349,362.58,343.38Z" />

        <path id="D_End" d="M702,444.15q0,28.31-19.93,48.34t-48.44,20H565q-5.57,0-5.57-5.58V252.44c0-3.71,1.86-5.58,5.57-5.58h68.66q28.3,0,48.33,20.14t20,48.34Zm-27.26-.1V315.21a43.6,43.6,0,0,0-12.12-30.93q-12.12-12.84-29.1-12.83H592c-3.58,0-5.38,1.79-5.38,5.38V482.35c0,3.73,1.8,5.59,5.38,5.59h41.48q17,0,29.1-12.83T674.74,444.05Z"/>

      </g>
</svg>
body {
 background-color: #FAF3DD;
 overflow: hidden;
 text-align:center;
  display: flex;
  align-items: center;
  justify-content: center; 
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 width: 77%;
 height: 77%;
 visibility: hidden;
 
}

/* #startGroup{
 fill:url(#playGrad)
} */
var select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
    colorArray = ["#EF476F", "#FFD166", "#06D6A0", "#118AB2", "#073B4C"],
    playArray = ["P", "L", "A2", "Y"],
    hardArray = ["H", "A", "R", "D"],
    offset = 0.15, duration = 1, mainTl = new TimelineMax({repeat: -1});
  

TweenMax.set('svg', {
  visibility: 'visible'
})

var ease1 = CustomEase.create("custom", "M0,0 C0.692,0.098 0.304,0.898 1,1");

TweenLite.defaultEase = ease1; 

function createStartAnimation() {
 let num = 4;
 for(var i = 0; i < num; i++) {
  let playTl = new TimelineMax();
  let playLetter = select('#'+playArray[i] + '_Start');
  let hardLetter = select('#'+hardArray[i] + '_End');
  playTl.to(playLetter, duration, {
   morphSVG:select('#'+playArray[i] + '_End'),
   repeat: -1,
   yoyo: true
  })
   .to(hardLetter, duration, {
   morphSVG:select('#'+hardArray[i] + '_Start'),
   repeat: -1,
   yoyo: true
  }, 0)

  mainTl.add([playTl], i * offset)
 }
}

createStartAnimation()

mainTl.to('#gradPattern', 3, {
  attr:{
    x:800
  },
  ease:Linear.easeNone,
 repeat: -1
}, 0)

//TweenMax.globalTimeScale(0.5)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js
  3. //s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js