<div id="app">
  <main>
    <button @click="toggleMode">
      <span v-if="mode === 'monolith'">Break into Microservices</span>
      <span v-else>Use a monolith instead</span>
    </button>
    <icon-interface></icon-interface>
    
    <transition-group 
      @enter="enterServiceItems"
      @leave="leaveItems"
      mode="out-in"
      :css="false">
      <div v-if="mode === 'monolith'" key="monolith" class="monolith">
        <div>
          <icon-logic></icon-logic>
        </div>
      </div>
      <div v-else class="services" key="services">
        <div v-for="service in services" class="service">
          <component :is="`icon-${service}`"></component>
        </div>
      </div>
    </transition-group>

    <transition-group 
      @enter="enterDBItems"
      @leave="leaveItems"
      mode="out-in"
      :css="false"
      tag="div" 
      class="all-db">
      <div v-for="n in dbitems" :key="n">
        <icon-database></icon-database>
      </div>
    </transition-group>

  </main>
</div>
    
<script type="x-template" id="icon-clothing">
  <section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M87,67.82V16c0-0.017-0.004-0.032-0.005-0.049c-0.002-0.096-0.013-0.19-0.029-0.284 c-0.005-0.029-0.006-0.058-0.012-0.087c-0.025-0.116-0.06-0.23-0.105-0.339c-0.014-0.034-0.032-0.064-0.048-0.097 c-0.036-0.076-0.074-0.15-0.12-0.22c-0.024-0.037-0.05-0.072-0.076-0.107c-0.045-0.061-0.093-0.12-0.146-0.176 c-0.031-0.034-0.063-0.066-0.096-0.097c-0.054-0.051-0.112-0.097-0.172-0.142c-0.038-0.029-0.076-0.058-0.116-0.084 c-0.016-0.01-0.029-0.023-0.045-0.032l-10-6C75.718,8.099,75.362,8,75,8H25c-0.311,0-0.617,0.072-0.895,0.211l-12,6 c-0.048,0.024-0.089,0.055-0.134,0.082c-0.04,0.024-0.081,0.046-0.119,0.073c-0.074,0.052-0.141,0.11-0.207,0.17 c-0.022,0.021-0.048,0.039-0.069,0.061c-0.085,0.086-0.163,0.179-0.23,0.279c-0.013,0.019-0.022,0.041-0.035,0.061 c-0.051,0.081-0.098,0.165-0.137,0.252c-0.018,0.041-0.031,0.083-0.046,0.125c-0.027,0.073-0.051,0.147-0.069,0.223 c-0.011,0.045-0.019,0.091-0.026,0.137c-0.013,0.081-0.021,0.162-0.025,0.244C11.007,15.946,11,15.972,11,16v51.82L7.032,89.642 c-0.106,0.583,0.052,1.184,0.432,1.639C7.845,91.737,8.407,92,9,92h80c0.007,0,0.013,0,0.02,0c1.104,0,2-0.896,2-2 c0-0.221-0.036-0.434-0.103-0.633L87,67.82z M25.472,12h48.974l3.333,2H21.472L25.472,12z M11.396,88l3.571-19.642 C14.989,68.24,15,68.121,15,68V18h68v50c0,0.12,0.011,0.24,0.032,0.358L86.604,88H11.396z"/>
  <path d="M62,27.5c-1.104,0-2,0.896-2,2c0,6.065-4.935,11-11,11s-11-4.935-11-11c0-1.104-0.896-2-2-2s-2,0.896-2,2 c0,8.271,6.729,15,15,15s15-6.729,15-15C64,28.396,63.104,27.5,62,27.5z"/>
</svg>
    <p>Clothing Microservice</p>
  </section>
</script>
    
<script type="x-template" id="icon-users">
  <section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M84.521,48.937c2.752-2.642,4.476-6.347,4.476-10.454c0-7.998-6.507-14.505-14.505-14.505 s-14.505,6.507-14.505,14.505c0,4.14,1.753,7.871,4.544,10.516c-3.075,1.53-5.779,3.749-7.89,6.503 c-2.444-2.153-5.216-3.943-8.248-5.294c4.655-3.857,7.626-9.679,7.626-16.183c0-11.586-9.426-21.013-21.013-21.013 c-11.587,0-21.013,9.426-21.013,21.013c0,6.508,2.975,12.333,7.635,16.191C9.939,55.434,2.062,67.223,2.062,80.213 c0,1.104,0.896,2,2,2s2-0.896,2-2c0-12.325,8.072-23.422,19.726-27.335c2.788,1.369,5.91,2.16,9.22,2.16 c3.313,0,6.438-0.792,9.229-2.164c11.611,3.871,19.659,14.98,19.659,27.339c0,1.104,0.896,2,2,2s2-0.896,2-2 c0-8.223-3.136-15.96-8.375-21.858c2.25-3.106,5.382-5.438,8.977-6.681c1.83,0.835,3.856,1.313,5.995,1.313 c2.17,0,4.222-0.492,6.072-1.35c7.421,2.504,12.56,9.62,12.56,17.535c0,1.104,0.896,2,2,2s2-0.896,2-2 C97.125,60.531,92.088,52.66,84.521,48.937z M27.49,49.263c-0.281-0.284-0.639-0.476-1.031-0.553 c-5.053-2.953-8.464-8.422-8.464-14.686c0-9.381,7.632-17.013,17.013-17.013s17.013,7.632,17.013,17.013 c0,6.301-3.451,11.8-8.554,14.741c-0.277,0.08-0.532,0.219-0.75,0.407c-2.317,1.184-4.932,1.866-7.708,1.866 C32.307,51.038,29.761,50.389,27.49,49.263z M69.634,47.787c-0.056-0.032-0.113-0.059-0.172-0.086 c-3.259-1.786-5.475-5.248-5.475-9.219c0-5.793,4.712-10.505,10.505-10.505s10.505,4.712,10.505,10.505 c0,5.792-4.712,10.505-10.505,10.505C72.74,48.987,71.089,48.55,69.634,47.787z"/>
</svg>
    <p>Users Microservice</p>
  </section>
</script>

<script type="x-template" id="icon-photos">
  <section>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M77,4H4v81h16.251L83.72,95.523L97.262,15.63L77,12.609V4z M77,24.407l6.418,1.088L77,63.36V24.407z M8,8h65 v73H8V8z M92.636,18.984L80.441,90.925L44.706,85H77V74.106l2.173,0.368l8.858-52.255L77,20.351v-3.697L92.636,18.984z"/>
  <path d="M12,67h57V12H12V67z M16,63v-4.306c2.478-4.67,7.132-11.153,9.908-11.153c1.83,0,2.701,0.78,4.027,1.962 c1.669,1.487,3.735,3.338,7.904,3.338c4.043,0,6.755-3.142,9.398-6.181c2.451-2.818,4.724-5.479,7.76-5.479 c3.257,0,5.666,6.024,7.485,10.423c0.836,2.023,1.666,3.775,2.519,5.07V63H16z M65,16v30.91c-2.185-4.906-5.048-9.729-9.92-9.729 c-4.858,0-8.025,3.642-10.82,6.854c-2.149,2.471-4.18,4.806-6.4,4.806c-2.645,0-3.796-1.025-5.253-2.324 c-1.488-1.326-3.34-2.976-6.693-2.976c-3.662,0-7.281,3.845-9.913,7.535V16H65z"/>
  <path d="M28,36c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S23.589,36,28,36z M28,24c2.206,0,4,1.794,4,4 s-1.794,4-4,4s-4-1.794-4-4S25.794,24,28,24z"/>
</svg>
    <p>Photos Microservice</p>
  </section>
</script>

<script type="x-template" id="icon-logic">
  <section class="logic">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M39.902,46.22l6.445,3.797c0.574,0.338,0.811,1.048,0.553,1.663l-3.788,9.062 c-0.584,1.398,1.247,2.532,2.238,1.386l11.651-13.466c0.54-0.624,0.389-1.584-0.317-2.012l-6.401-3.882 c-0.538-0.326-0.774-0.983-0.568-1.577l3.344-9.625c0.491-1.413-1.36-2.438-2.298-1.273L39.54,44.235 C39.03,44.869,39.201,45.807,39.902,46.22z"/>
  <path d="M22.028,73h50.5c5.987,0,11.549-2.342,15.664-6.594c4.051-4.188,6.176-9.724,5.983-15.59 c-0.357-10.836-8.859-19.71-19.776-20.642c-1.757-0.151-3.526-0.087-5.258,0.186C65.637,20.049,55.916,13,44.874,13 c-14.132,0-25.629,11.497-25.629,25.629c0,0.444,0.013,0.896,0.038,1.351c-3.743,0.548-7.153,2.299-9.765,5.049 c-3.034,3.194-4.636,7.4-4.512,11.844C5.251,65.614,13.046,73,22.028,73z M12.419,47.783c2.362-2.487,5.591-3.902,9.091-3.984 c0.568-0.013,1.104-0.268,1.474-0.701c0.369-0.432,0.537-1.001,0.462-1.564c-0.133-0.989-0.2-1.966-0.2-2.904 C23.245,26.703,32.948,17,44.874,17c9.857,0,18.468,6.655,20.938,16.185c0.275,1.062,1.355,1.703,2.421,1.438 c1.896-0.474,3.866-0.632,5.825-0.463c8.898,0.76,15.828,7.977,16.119,16.789c0.158,4.773-1.568,9.275-4.86,12.677 C81.963,67.091,77.421,69,72.528,69h-50.5c-6.874,0-12.837-5.605-13.023-12.24C8.911,53.388,10.123,50.2,12.419,47.783z"/>
</svg>
    <p>Business Logic</p>
  </section>
</script>

<script type="x-template" id="icon-ui">
  <section class="ui">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M87,67c1.104,0,2-0.896,2-2V22.907C89,19.099,85.901,16,82.093,16H18.907C15.099,16,12,19.099,12,22.907V65 c0,1.104,0.896,2,2,2s2-0.896,2-2V22.907C16,21.304,17.304,20,18.907,20h63.186C83.696,20,85,21.304,85,22.907V65 C85,66.104,85.896,67,87,67z"/>
  <path d="M20,30v35c0,1.104,0.896,2,2,2h57c1.104,0,2-0.896,2-2V30c0-1.104-0.896-2-2-2H22C20.896,28,20,28.896,20,30 z M24,32h53v31H24V32z"/>
  <path d="M9.264,80.992C9.62,81.615,10.282,82,11,82h78c0.718,0,1.38-0.385,1.736-1.008l4-7 c0.354-0.619,0.352-1.379-0.006-1.996C94.372,71.38,93.713,71,93,71H7c-0.713,0-1.372,0.38-1.73,0.996 c-0.358,0.617-0.36,1.377-0.006,1.996L9.264,80.992z M89.554,75l-1.714,3H12.161l-1.714-3H89.554z"/>
  <circle cx="51" cy="24" r="2"/>
</svg>
    <p>User Interface</p>
  </section>
</script>

<script type="x-template" id="icon-db">
  <section class="db">
  <svg class="arrow" height="50" width="50" fill="#aaa" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M48,13c-1.104,0-2,0.896-2,2v65.9L29.373,64.273c-0.78-0.781-2.048-0.781-2.828,0 c-0.781,0.781-0.781,2.047,0,2.828l20.312,20.312C47.247,87.805,47.759,88,48.271,88s1.024-0.195,1.414-0.586l20.312-20.312 c0.781-0.781,0.781-2.047,0-2.828c-0.78-0.781-2.048-0.781-2.828,0L50,81.442V15C50,13.896,49.104,13,48,13z"/>
  </svg>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M88.784,17.114C86.99,10.068,73.708,3.141,50.502,3.141c-23.189,0-36.47,6.918-38.278,13.959 C12.085,17.371,12,17.674,12,18v64c0,0.613,0.282,1.154,0.716,1.521c3.072,6.545,16.094,12.598,37.786,12.598 c21.698,0,34.721-6.056,37.789-12.604C88.721,83.149,89,82.61,89,82v-1.458c0-0.012,0.002-0.023,0.002-0.035 c0-0.007-0.002-0.013-0.002-0.02V59.679c0-0.012,0.002-0.023,0.002-0.035c0-0.007-0.002-0.013-0.002-0.02V39.234 c0-0.012,0.002-0.023,0.002-0.035c0-0.007-0.002-0.013-0.002-0.02V18.789c0-0.012,0.002-0.023,0.002-0.035S89,18.73,89,18.718V18 C89,17.68,88.918,17.382,88.784,17.114z M85,59.668c-0.042,5.486-14.197,11.588-34.498,11.588c-20.331,0-34.5-6.12-34.5-11.613 c0-0.007-0.002-0.013-0.002-0.02V46.258c5.703,4.795,17.412,8.553,34.502,8.553c17.087,0,28.793-3.757,34.498-8.55V59.668z M85,39.223c-0.042,5.486-14.197,11.588-34.498,11.588c-20.331,0-34.5-6.12-34.5-11.613c0-0.007-0.002-0.013-0.002-0.02V25.813 c5.703,4.795,17.412,8.553,34.502,8.553c17.087,0,28.793-3.756,34.498-8.55V39.223z M50.502,7.141 c20.301,0,34.456,6.102,34.498,11.588v0.049c-0.042,5.486-14.197,11.588-34.498,11.588c-20.331,0-34.5-6.12-34.5-11.612 S30.171,7.141,50.502,7.141z M50.502,92.119c-20.331,0-34.5-6.12-34.5-11.612c0-0.007-0.002-0.013-0.002-0.02V66.704 c5.703,4.795,17.412,8.553,34.502,8.553c17.087,0,28.793-3.757,34.498-8.55v13.824C84.958,86.018,70.803,92.119,50.502,92.119z"/>
</svg>
    <p>Database</p>
  </section>
</script>

<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="filter">
    <defs>
      <filter id="shadowed-goo">
          
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
          <feBlend in2="shadow" in="goo" result="goo" />
          <feBlend in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <filter id="goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feBlend in2="goo" in="SourceGraphic" result="mix" />
      </filter>
    </defs>
</svg>
body {
  background: #282b30;
  color: white;
  font-family: 'Alata', sans-serif;
}

main {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 40px;
}

svg:not(.arrow) {
  width: 40px;
  height: 40px;
  fill: white;
  border-radius: 1000px;
  padding: 15px;
}

section {
  margin-top: 30px;
}

button {
  width: 220px;
  font-family: 'Alata', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: inline-block;
  letter-spacing: 0.05em;
  box-sizing: content-box;
  background: #7d7880;  
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 25px;
  border-radius: 30px;
  outline: 0 !important;
  border: 1px solid black;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  box-shadow: 0 8px 6px -6px black;
}

p {
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.filter {
  display: none;
}

.all-db, .services, .monolith {
  position: relative;
  -webkit-filter: url("#shadowed-goo");
  filter: url("#shadowed-goo");
  div {
    position: absolute;
    top: 0;
    left: -45px;
  }
}

.monolith {
  right: -10px;
}

.ui svg {
  background: #1abc9c;
}

.monolith svg, .services svg {
  background: #1a9ebc;
}

.db svg:not(.arrow) {
  background: #b64040;
}

.db {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.all-db {
  margin: 150px -15px 0 0;
}
View Compiled
Vue.component('IconInterface', {
  template: '#icon-ui'
})

Vue.component('IconDatabase', {
  template: '#icon-db'
})

Vue.component('IconLogic', {
  template: '#icon-logic'
})

Vue.component('IconPhotos', {
  template: '#icon-photos'
})

Vue.component('IconUsers', {
  template: '#icon-users'
})

Vue.component('IconClothing', {
  template: '#icon-clothing'
})

new Vue({
  el: '#app',
  data() {
    return {
      mode: 'monolith',
      duration: 1,
      services: [
        'users',
        'clothing',
        'photos'
      ]
    }
  },
  computed: {
    dbitems() {
      return this.mode === 'monolith' ? 1 : this.services.length
    }
  },
  methods: {
    toggleMode() {
      this.mode === 'monolith' ? this.mode = 'microservice' : this.mode = 'monolith'
    },
    enterServiceItems(el, done) {
      if (this.mode === 'monolith') {
        TweenMax.to('.logic p', 0.1, {
          opacity: 0
        })
      } 
      for (let [i, node] of el.childNodes.entries()) {
        TweenMax.to(node, this.duration, {
          x: i * 150 - 150,
          ease: Sine.easeOut
        })
      }
    },
    enterDBItems(el, done) {
      const dbItems = document.querySelectorAll('.db')
      
      for (let [i, node] of dbItems.entries()) {
        TweenMax.to(node, this.duration, {
          x: i * 150 - 150,
          ease: Sine.easeOut
        })
      }
    },
    leaveItems(el, done) {
      TweenMax.to(el.childNodes, this.duration, {
        x: 0,
        ease: Sine.easeIn
      })
      
      TweenMax.to(el.childNodes, this.duration / 2, {
        delay: this.duration / 2,
        opacity: 0,
        ease: Sine.easeIn
      })
      
      TweenMax.to('.db', this.duration, {
        x: 0,
        ease: Sine.easeIn
      })
      
      TweenMax.to('.monolith div', this.duration, {
        x: 0,
        ease: Sine.easeIn
      })
      
      TweenMax.to('.logic p', 0.1, {
        opacity: 1
      }) 
    }
  }
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js