<div id="app">
<svg id="Infographic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 800" width="600" height="800">
  <defs>
    <linearGradient id="linear-gradient" x1="150.25" y1="699.1" x2="150.25" y2="700.14" gradientTransform="matrix(600, 0, 0, -800, -89850, 560100)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#042335"/>
      <stop offset="1"/>
    </linearGradient>
  </defs>
  <title>SVG Infographic</title>
  <rect id="Background" width="600" height="800" fill="url(#linear-gradient)"/>
  <text transform="translate(440.2 772.2)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">Phone</text>
  <path id="Phone_Icon" data-name="Phone Icon" d="M481.6,665.2H448a9.2,9.2,0,0,0-9.2,9.2v61a9.2,9.2,0,0,0,9.2,9.2h33.6a9.2,9.2,0,0,0,9.2-9.2v-61A9.2,9.2,0,0,0,481.6,665.2Zm-19.8,3.1h6.1a1.5,1.5,0,1,1,0,3.1h-6.1a1.5,1.5,0,1,1,0-3.1Zm3.1,72.6a3.9,3.9,0,1,1,3.9-3.9A3.9,3.9,0,0,1,464.8,740.8Zm19.8-13.1a1.5,1.5,0,0,1-1.5,1.5H446.5a1.5,1.5,0,0,1-1.5-1.5V675.9a1.5,1.5,0,0,1,1.5-1.5h36.6a1.5,1.5,0,0,1,1.5,1.5Z" fill="#bbb"/>
  <text transform="translate(312.5 772.2)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate"><tspan letter-spacing="-0.11em">T</tspan><tspan x="9" y="0">ablet</tspan></text>
  <path id="Tablet_Icon" data-name="Tablet Icon" d="M366.3,651.2H311.8a9.7,9.7,0,0,0-9.7,9.7v73.9a9.7,9.7,0,0,0,9.7,9.7h54.5a9.7,9.7,0,0,0,9.7-9.7V660.9A9.7,9.7,0,0,0,366.3,651.2ZM339,740.7a5.8,5.8,0,1,1,5.8-5.8A5.8,5.8,0,0,1,339,740.7Zm29.2-15.6H309.8V662.9h58.4Z" fill="#bbb"/>
  <text transform="translate(142.2 772.2)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">Laptop</text>
  <path id="Laptop_Icon" data-name="Laptop Icon" d="M218.5,732.8a11.8,11.8,0,0,0,11.8-11.8V655.9A11.9,11.9,0,0,0,218.5,644H123.9a11.9,11.9,0,0,0-11.8,11.8v65.1a11.9,11.9,0,0,0,11.8,11.8H100.2a11.9,11.9,0,0,0,11.8,11.8H230.4a11.9,11.9,0,0,0,11.8-11.8Zm-94.6-76.9h94.6v65.1H123.9Zm47.3,82.8a5.9,5.9,0,1,1,5.9-5.9A5.9,5.9,0,0,1,171.2,738.7Z" fill="#bbb"/>
  <text transform="translate(50.3 598.5)" font-size="21" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate"><tspan letter-spacing="-0.11em">T</tspan><tspan x="10.5" y="0">o see how a web design adapts to di</tspan><tspan x="350.2" y="0" letter-spacing="-0.02em">f</tspan><tspan x="355.7" y="0">ferent devices,</tspan><tspan x="102.6" y="25.2">click on the icon devices below</tspan></text>
  <rect id="Demo_Panel" data-name="Demo Panel" y="320" width="600" height="250" fill="#3f5b2a"/>
  <g id="Labels">
    <text transform="translate(31.7 280.6)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">One UR<tspan x="65" y="0" letter-spacing="-0.04em">L</tspan></text>
    <text transform="translate(146.7 269.8)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">Single <tspan x="-4" y="21.6">Content</tspan></text>
    <text transform="translate(246.5 280.6)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">One Code</text>
    <text transform="translate(375.3 269.8)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">Media <tspan x="-4.5" y="21.6">Queries</tspan></text>
    <text transform="translate(498.6 269.8)" font-size="18" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">Multiple <tspan x="1.5" y="21.6">Devices</tspan></text>
  </g>
  <g id="Icons">
    <g id="Group">
      <path d="M97.1,195.2a5.5,5.5,0,0,1-5.5,5.5H37.1a5.5,5.5,0,0,1-5.5-5.5V177a5.5,5.5,0,0,1,5.5-5.5H91.7a5.5,5.5,0,0,1,5.5,5.5Z" fill="#455a64"/>
      <rect x="31.6" y="189.7" width="65.5" height="41.85" fill="#bbdefb"/>
      <path d="M35.3,182.4a3.6,3.6,0,1,1,3.6,3.6A3.6,3.6,0,0,1,35.3,182.4Z" fill="#8bc34a"/>
      <path d="M46.2,182.4a3.6,3.6,0,1,1,3.6,3.6A3.6,3.6,0,0,1,46.2,182.4Z" fill="#ffeb3b"/>
      <path d="M93.5,184.2a1.8,1.8,0,0,1-1.8,1.8H60.7a1.8,1.8,0,0,1-1.8-1.8v-3.6a1.8,1.8,0,0,1,1.8-1.8H91.7a1.8,1.8,0,0,1,1.8,1.8Z" fill="#fafafa"/>
      <path d="M76.2,217h-20a.9.9,0,0,1-.8-1.4l10-14.6a.9.9,0,0,1,1.5,0l10,14.6a.9.9,0,0,1-.8,1.4Z" fill="#3f51b5"/>
      <path d="M46.4,235.5c19.3,5.7,23.4-5.3,23.4-18.5H62.6C62.6,230.4,58.5,236.4,46.4,235.5Z" fill="#3f51b5"/>
    </g>
    <g id="Group-2" data-name="Group">
      <rect x="250.3" y="173.8" width="70.2" height="60.81" fill="#424e5c"/>
      <path d="M318.1,176.2v56.1H252.6V176.2Zm4.7-4.7H247.9V237h74.8Z" fill="#afc5d8"/>
      <rect x="247.9" y="171.5" width="74.8" height="9.36" fill="#afc5d8"/>
      <line x1="289.5" y1="196.1" x2="280.6" y2="221.8" fill="none" stroke="#bae0bd" stroke-miterlimit="10" stroke-width="4.68"/>
      <path d="M272.4,219l-11.5-10.1,11.5-10.1" fill="none" stroke="#bae0bd" stroke-miterlimit="10" stroke-width="4.68"/>
      <path d="M298.5,219l11.4-10.1-11.4-10.1" fill="none" stroke="#bae0bd" stroke-miterlimit="10" stroke-width="4.68"/>
    </g>
    <g id="Group-3" data-name="Group">
      <path d="M492.6,171.5h72.9v52.7H492.6Z" fill="#546e7a"/>
      <path d="M496.7,175.6h64.8v42.6H496.7Z" fill="#bbdefb"/>
      <path d="M516.9,212H504.8a4.1,4.1,0,0,1-4.1-4.1V185.7a4.1,4.1,0,0,1,4.1-4.1h12.2a4.1,4.1,0,0,1,4.1,4.1V208A4.1,4.1,0,0,1,516.9,212Z" fill="#e38939"/>
      <path d="M523,224.2h12.2v6.1H523Zm24.3,6.1H510.9c-4.1,0-4.1,4.1-4.1,4.1v2h44.6v-2S551.4,230.3,547.3,230.3Z" fill="#455a64"/>
      <path d="M512.9,208a2,2,0,1,1-2-2A2,2,0,0,1,512.9,208Z" fill="#a6642a"/>
      <path d="M504.8,185.7h12.2V206H504.8Z" fill="#fff3e0"/>
      <path d="M553.4,212H529.1A4.1,4.1,0,0,1,525,208V185.7a4.1,4.1,0,0,1,4.1-4.1h24.3a4.1,4.1,0,0,1,4.1,4.1V208A4.1,4.1,0,0,1,553.4,212Z" fill="#e38939"/>
      <path d="M543.3,208a2,2,0,1,1-2-2A2,2,0,0,1,543.3,208Z" fill="#a6642a"/>
      <path d="M529.1,185.7h24.3V206H529.1Z" fill="#fff3e0"/>
    </g>
    <g id="Group-4" data-name="Group">
      <path d="M169.6,198H199v5.9H169.6Zm0,20.6H199v5.9H169.6Zm0-41.2H199v5.9H169.6Z" fill="#90caf9"/>
      <path d="M146,171.5h17.7v17.7H146Z" fill="#ffc107"/>
      <path d="M146,192.1h17.7v17.7H146Z" fill="#7cb342"/>
      <path d="M156.3,176.7a2.2,2.2,0,1,0,2.2-2.2A2.2,2.2,0,0,0,156.3,176.7Z" fill="#fff9c4"/>
      <path d="M152.9,178.2l-5.4,8h10.7Z" fill="#d85700"/>
      <path d="M158.2,180.9l-4,5.4h8Z" fill="#ef7e03"/>
      <path d="M152.7,196.5a2.2,2.2,0,1,1,4.3,0c0,1.2-2.2,4.4-2.2,4.4S152.7,197.8,152.7,196.5Zm4.3,8.8a2.2,2.2,0,1,1-4.3,0c0-1.2,2.2-4.4,2.2-4.4S157,204.1,157,205.4Z" fill="#fff"/>
      <path d="M150.1,200.7a2.2,2.2,0,0,1-.8-3,2.1,2.1,0,0,1,2.9-.8c1,.6,2.7,4.1,2.7,4.1S151.1,201.3,150.1,200.7Zm9.6.6a2.2,2.2,0,0,1,.8,3,2.1,2.1,0,0,1-2.9.8c-1-.6-2.7-4.1-2.7-4.1S158.6,200.6,159.7,201.2Z" fill="#fff"/>
      <path d="M159.7,200.7a2.2,2.2,0,0,0,.8-3,2.1,2.1,0,0,0-2.9-.8c-1,.6-2.7,4.1-2.7,4.1S158.6,201.3,159.7,200.7Zm-9.6.6a2.2,2.2,0,0,0-.8,3,2.1,2.1,0,0,0,2.9.8c1-.6,2.7-4.1,2.7-4.1S151.1,200.6,150.1,201.2Z" fill="#fff"/>
      <path d="M157.1,201a2.2,2.2,0,1,1-2.2-2.2,2.2,2.2,0,0,1,2.2,2.2" fill="#ffc107"/>
      <path d="M146,212.7h17.7v17.7H146Z" fill="#1565c0"/>
      <path d="M150.4,217.1h8.8V226h-8.8Z" fill="#ffc107"/>
      <path d="M148.6,221.6l6.2-6.2,6.2,6.2-6.2,6.2Z" fill="#ffc107"/>
      <path d="M151.9,221.6a2.9,2.9,0,1,0,2.9-2.9A2.9,2.9,0,0,0,151.9,221.6Z" fill="#fff8e1"/>
    </g>
    <path d="M371.7,171.5V196h58.2V171.5Zm67.4,1.5-4.6,4.6h9.2Zm-59.7,4.6h18.4v12.3H379.4Zm24.5,0h18.4v12.3H403.9Zm33.7,3.1v3.1h3.1v-3.1Zm0,6.1v3.1h3.1v-3.1Zm0,6.1V196h3.1V193Zm-65.9,6.1V210l58.2-8.1v-2.8Zm65.9,0v3.1h3.1v-3.1Zm-7.7,5.9-58.2,8.1v16.6h58.2Zm7.7.2v3.1h3.1v-3.1Zm0,6.1v3.1h3.1v-3.1Zm0,6.1v3.1h3.1v-3.1Zm-3.1,6.1,4.6,4.6,4.6-4.6Zm-56.7,10.7-4.6,4.6,4.6,4.6Zm46,0v9.2l4.6-4.6Zm-42.9,3.1v3.1H384v-3.1Zm6.1,0v3.1h3.1v-3.1Zm6.1,0v3.1h3.1v-3.1Zm6.1,0v3.1h3.1v-3.1Zm6.1,0v3.1h3.1v-3.1Zm6.1,0v3.1h3.1v-3.1Zm6.1,0v3.1h3.1v-3.1Z" fill="#416f9f"/>
    <path d="M122.7,194.5v6h-6v2h6v6h2v-6h6v-2h-6v-6Z" fill="#fff"/>
    <path d="M224.6,194.5v6h-6v2h6v6h2v-6h6v-2h-6v-6Z" fill="#fff"/>
    <path d="M348.3,194.5v6h-6v2h6v6h2v-6h6v-2h-6v-6Z" fill="#fff"/>
    <path d="M463.3,194.5v2h14v-2Zm0,6v2h14v-2Z" fill="#fff"/>
  </g>
  <text transform="translate(16.8 106)" font-size="14" fill="#fff" font-family="ArialMT, Arial" style="isolation: isolate">Responsive web design allows a website to respond to the device that it is being viewed on. <tspan x="20.6" y="16.8">This provides an optimal experience for all users regardless of whether they are using</tspan><tspan x="143.6" y="33.6">a smartphone, tablet, laptop, or other devices.</tspan></text>
  <line id="Horizontal_Rule" data-name="Horizontal Rule" x1="23.3" y1="78.8" x2="581" y2="78.8" fill="none" stroke="#fff" stroke-linecap="square" stroke-miterlimit="3" stroke-width="2"/>
  <text transform="translate(24.1 63.5)" font-size="27" fill="#a4cedd" font-family="Arial-BoldMT, Arial" font-weight="700" style="isolation: isolate">HOW RESPONSIVE WEB DESIGN WORKS</text>
  
  <!-- Website wireframe's components -->
  
  <rect :x="d.r1.x" :y="d.r1.y" :width="d.r1.width" :height="d.r1.height" fill="lightgrey" stroke="grey" stroke-width="5"/>
  <rect :x="d.r2.x" :y="d.r2.y" :width="d.r2.width" :height="d.r2.height" fill="blue" />
  <rect :x="d.r3.x" :y="d.r3.y" :width="d.r3.width" :height="d.r3.height" fill="cyan" />
  <rect :x="d.r4.x" :y="d.r4.y" :width="d.r4.width" :height="d.r4.height" fill="orange" />
  <rect :x="d.r5.x" :y="d.r5.y" :width="d.r5.width" :height="d.r5.height" fill="green" />
  <rect :x="d.r6.x" :y="d.r6.y" :width="d.r6.width" :height="d.r6.height" fill="red" />
  
  <!-- Icons overlays -->
  
  <rect @click="anim(laptop)" x="95" y="640" width="155" height="110" fill="transparent"/>
  <rect @click="anim(tablet)" x="295" y="645" width="85" height="105" fill="transparent"/>
  <rect @click="anim(phone)" x="435" y="660" width="60" height="90" fill="transparent"/>
  
</svg>
</div>  

const laptop = {
  r1: {x: '100', y: '335', width: '400', height: '220'},
  r2: {x: '115', y: '350', width: '200', height: '30'},
  r3: {x: '115', y: '390', width: '370', height: '70'},
  r4: {x: '115', y: '470', width: '110', height: '40'},
  r5: {x: '245', y: '470', width: '110', height: '40'},
  r6: {x: '375', y: '470', width: '110', height: '40'},
}

const tablet = {
  r1: {x: '200', y: '335', width: '200', height: '220'},
  r2: {x: '215', y: '350', width: '100', height: '30'},
  r3: {x: '215', y: '385', width: '170', height: '70'},
  r4: {x: '215', y: '460', width: '80', height: '40'},
  r5: {x: '305', y: '460', width: '80', height: '40'},
  r6: {x: '215', y: '505', width: '80', height: '40'},
}

const phone = {
  r1: {x: '220', y: '335', width: '160', height: '220'},
  r2: {x: '225', y: '340', width: '150', height: '30'},
  r3: {x: '225', y: '375', width: '150', height: '70'},
  r4: {x: '225', y: '450', width: '150', height: '30'},
  r5: {x: '225', y: '485', width: '150', height: '30'},
  r6: {x: '225', y: '520', width: '150', height: '30'},
}

new Vue({
  el: '#app',
  data: { 
    d: {
      r1: {x: '100', y: '335', width: '400', height: '220'},
      r2: {x: '100', y: '335', width: '400', height: '220'},
      r3: {x: '100', y: '335', width: '400', height: '220'},
      r4: {x: '100', y: '335', width: '400', height: '220'},
      r5: {x: '100', y: '335', width: '400', height: '220'},
      r6: {x: '100', y: '335', width: '400', height: '220'},
    }
  },
  created(){
    this.anim(laptop) 
  },
  methods: { 
    anim(val){  
    function animate(time) {
      requestAnimationFrame(animate);
      TWEEN.update(time);
    }
    requestAnimationFrame(animate);   
    new TWEEN.Tween(this.d.r1).to(val.r1, 1000).start();
    new TWEEN.Tween(this.d.r2).to(val.r2, 1000).start();
    new TWEEN.Tween(this.d.r3).to(val.r3, 1000).start();
    new TWEEN.Tween(this.d.r4).to(val.r4, 1000).start();
    new TWEEN.Tween(this.d.r5).to(val.r5, 1000).start();
    new TWEEN.Tween(this.d.r6).to(val.r6, 1000).start();
    }
  }
});