Compose deployments

Compose-deployments.markdown

Compose deployments

At Compose, we wanted to help people visualize the components in the different types of deployments.

A Pen by Brandon Mathis on CodePen.

License.

index.slim

.deployment
  .private-network
    .capsules
      .lightweight-capsule
      .data-capsules
        .data-capsule.io-capsule
        .data-capsule.io-capsule
        .data-capsule.io-capsule
      .portal-capsules
        .portal-capsule

.deployment
  .private-network
    .capsules
      .lightweight-capsule
      .data-capsules
        .data-capsule.memory-capsule
        .data-capsule.memory-capsule
      .portal-capsules
        .portal-capsule

.deployment
  .private-network
    .capsules
      .data-capsules
        .data-capsule.io-capsule
        .data-capsule.io-capsule
        .data-capsule.io-capsule
      .portal-capsules
        .portal-capsule
        .portal-capsule
      
.deployment
  .private-network
    .capsules
      .data-capsules
        .data-capsule.io-capsule
        .data-capsule.io-capsule
      .portal-capsules
        .portal-capsule

script.js

$('.deployment').toggleClass('expand')
setInterval(function(){
  $('.deployment').toggleClass('expand')
}, 2500);

style.scss

body {
  background: #333;
}

$capsule-animation-speed: 1.5s;
$capsule-animation-ease: cubic-bezier(0.190, 1.000, 0.220, 1.000);
@mixin capsule-transition($type: all) {
  transition: $type $capsule-animation-speed $capsule-animation-ease;
}
$move-distance: 8px;
* { box-sizing: border-box; }

.deployment {
  padding: 15px;
  $size: 58px;
  text-align: center;
  position: relative;
  width: 370px;
  z-index: 1;
  padding: $size 15px;
  margin: 30px auto;
  &:before, &:after {
    content: "";
    display: block;
    position: absolute;
    width: 340px;
    height: $size;
    @extend %private-network-edge;
  }
  &:before {
    top: 0px;
  }
  &:after {
    bottom: 0px;
    //flip top graphic to work as bottom
    transform: scale(-1);
  }
}

.private-network {
  @extend %private-network-middle;
  @include capsule-transition;
  padding: 10px 0;
  text-align: center;
}

.capsules {
  position: relative;
  @include capsule-transition;
  z-index: 2;
  .expand & {
    transform: scale(1.05);
  }
}

.lightweight-capsule {
  z-index: 150;
  position: relative;
  height: 20px;
  @include capsule-transition;
  top: 10px;
  .expand & {
    transform: translateY(-$move-distance*2);
  }
  
  &:after {
    content: "";
    display: inline-block;
    width: 137px;
    height: 60px;
    position: relative;
    top: -35px;
    @extend %lightweight-capsule-graphic;
  }
}

.portal-capsules {
  position: absolute;
  text-align: center;
  left: 55%;
  width: 120px;
  top: 62%;
  transform: translateY(-50%);
  z-index: 101;
  @include capsule-transition;
  .expand & {
    transform: translate($move-distance, -50%);
  }
}

.portal-capsule {
  @include capsule-transition;
  display: inline-block;
  position: relative;
  width: 60px;
  @include capsule-transition;
  &:after {
    position: relative;
    content: "";
    display: inline-block;
    width: 85px;
    height: 87px;
    @extend %portal-capsule-graphic;
  }
  &:nth-of-type(1) { 
    z-index: 20; 
  }
  &:nth-of-type(2) { 
    z-index: 10;
    top: -12px;
    transform: scale(.98);
    .expand & {
      transform: scale(.98) translateX($move-distance);
    }
  }
}

.data-capsules {
  @include capsule-transition;
  .expand & {
    &:nth-child(1) {
      transform: translateY(-$move-distance/2);
    }
  } 
}

.data-capsule {
  @include capsule-transition;
  height: 56px;
  position: relative;
  @include capsule-transition;
  &:nth-of-type(1) { 
    z-index: 100;
    .expand & {
      transform: translateY(-$move-distance/2);
    }
  }
  &:nth-of-type(2) { 
    z-index: 75;
    .expand & {
      @include capsule-transition;
      transform: translateY($move-distance/2);
    }
  }
  &:nth-of-type(3) { 
    z-index: 50;
    .expand & {
      @include capsule-transition;
      transform: translateY($move-distance + $move-distance/2);
    }
  }
  
  &:after {
    position: relative;
    top: -30px;
    content: "";
    display: inline-block;
    width: 280px;
    height: 118px;
  }
}

.memory-capsule:after {
  @extend %memory-capsule-graphic;
}

.io-capsule:after {
  @extend %io-capsule-graphic;
}

%lightweight-capsule-graphic {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 266.8 121.8"%3E%3Cg stroke="%23FF9736" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="1.414"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23F27600" d="M265.8 93c0 1.6-2.7 3.2-8.1 4.3l-107.8 22.1c-10.7 2.2-28.1 1.8-38.7-.8L8.9 93C3.6 91.7 1 90 1 88.5V28.8c0-1.6 2.7-3.2 8.1-4.3L116.4 2.4c10.7-2.2 28.1-1.8 38.7.8l102.8 25.6c5.3 1.3 7.9 2.9 7.9 4.5V93z"/%3E%3Cpath fill="%23D16500" d="M155.2 3.2c-10.6-2.6-28-3-38.7-.8L9.1 24.5c-10.7 2.2-10.8 6.2-.2 8.8l102.3 25.5c10.6 2.6 28 3 38.7.8l107.8-22.1c10.7-2.2 10.8-6.1.2-8.8L155.2 3.2z"/%3E%3C/g%3E%3Cg enable-background="new"%3E%3Cpath fill="%23FF9736" d="M23.9 56.8c-4.2-.8-7.7 2.5-7.7 7.5s3.4 9.7 7.7 10.6c4.2.8 7.7-2.5 7.7-7.5s-3.5-9.7-7.7-10.6"/%3E%3Cpath fill="%23D16500" d="M23.9 74.9c-4.2-.8-7.7-5.6-7.7-10.6s3.5-8.4 7.7-7.5c4.2.8 7.7 5.6 7.7 10.6s-3.5 8.4-7.7 7.5m0-20c-5.1-1-9.3 3.1-9.3 9.1s4.2 11.8 9.3 12.8c5.1 1 9.3-3.1 9.4-9.1-.1-6-4.2-11.8-9.4-12.8"/%3E%3C/g%3E%3C/svg%3E
') no-repeat center center;
}

%portal-capsule-graphic {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 146.1 153.8"%3E%3Cpath fill="%23FFCC01" stroke="%23FFD942" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="1.414" d="M94.1 1.6c-2.2-.7-4.6-.8-7.2-.3l-67 13C9.5 16.3 1 28.4 1 41.3v82.8c0 9.8 4.8 17.2 11.7 19.3l27.8 8.7c-6.9-2.2-11.7-9.6-11.7-19.3l.1-82.8c0-12.9 8.5-25 18.9-27l67-13c2.5-.5 5-.3 7.2.3L94.1 1.6z"/%3E%3Cpath fill="%23E3B601" stroke="%23FFD942" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="1.414" d="M114.8 10c10.4-2 18.9 6.8 18.9 19.7l-.1 82.8c0 12.9-8.5 25-18.9 27l-67 13c-10.4 2-18.9-6.8-18.9-19.7l.1-82.8c0-12.9 8.5-25 18.9-27l67-13z"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23495559" stroke="%2358656B" stroke-width="2" stroke-miterlimit="10" d="M131.8 69.8c7.7 2 13.3 10.1 13.2 20.9 0 13.8-9.1 26.7-20.2 28.9-2.6.5-5.1.4-7.4-.3l-42.7-11c-7.8-2-13.3-10.1-13.3-20.9 0-13.8 9.1-26.7 20.2-28.9 2.6-.5 5.1-.4 7.4.3l42.6 10.9h.1l.1.1z"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" fill="%23373F43" stroke="%2358656B" stroke-width="2" stroke-miterlimit="10" d="M124.9 104.3c4.3-.8 7.8-5.8 7.8-11.2 0-5.3-3.5-9-7.8-8.1-4.3.8-7.8 5.8-7.8 11.2 0 5.3 3.5 8.9 7.8 8.1zm-.1 15.3c11.2-2.2 20.2-15.1 20.2-28.9 0-13.8-9-23.2-20.2-21-11.2 2.2-20.2 15.1-20.2 28.9.1 13.8 9.1 23.2 20.2 21z"/%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" fill="%236F7E87" d="M124.9 103.6c4-.8 7.3-5.4 7.3-10.4s-3.2-8.3-7.3-7.6c-4 .8-7.3 5.4-7.3 10.4s3.2 8.4 7.3 7.6z"/%3E%3Cpath fill="%23FFD942" d="M15.3 51.5c-4-.8-7.2 2.4-7.2 7s3.2 9.1 7.2 9.9 7.2-2.4 7.2-7c0-4.7-3.2-9.1-7.2-9.9"/%3E%3Cpath fill="%23FFD942" stroke="%23E3B601" stroke-width="2" stroke-miterlimit="10" d="M15.3 68.4c-4-.8-7.2-5.2-7.2-9.9s3.2-7.8 7.2-7c4 .8 7.2 5.2 7.2 9.9 0 4.6-3.2 7.8-7.2 7"/%3E%3C/svg%3E') no-repeat center center;
}
%memory-capsule-graphic {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536.4 208.4"%3E%3Cg stroke="%2347FA41" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="1.414"%3E%3Cpath fill="%2316BF0D" d="M248.5 207l263.7-54c13.4-2.8 23.2-18.4 23.2-39.8v-4.3c0-26.4-14.7-51.5-33-56.1l-204.5-51c-3.5-.9-6.8-.9-9.9-.3l-263.4 54C11 57.9 1 73.7 1 95.3v4.3c0 26.4 14.7 51.5 33 56l204.5 51c3.5 1 6.9 1 10 .4z"/%3E%3Cpath fill="%2319DB13" d="M238.7 106.7c18.3 4.6 33 29.7 33 56.1v4.3c0 26.4-14.9 44.1-33.2 39.6L34 155.7c-18.3-4.6-33-29.6-33-56v-4.3C1 69 15.9 51.3 34.1 55.8l204.6 50.9z"/%3E%3C/g%3E%3Cg enable-background="new"%3E%3Cpath fill="%2347FA41" d="M35.9 99.2c-4.2-.8-7.7 2.5-7.7 7.5s3.4 9.7 7.7 10.6c4.2.8 7.7-2.5 7.7-7.5s-3.5-9.8-7.7-10.6"/%3E%3Cpath fill="%2316BF0D" d="M35.9 117.3c-4.2-.8-7.7-5.6-7.7-10.6s3.5-8.4 7.7-7.5c4.2.8 7.7 5.6 7.7 10.6s-3.5 8.3-7.7 7.5m0-20c-5.1-1-9.3 3.1-9.3 9.1s4.2 11.8 9.3 12.8 9.3-3.1 9.3-9.1c0-6.1-4.2-11.8-9.3-12.8"/%3E%3C/g%3E%3C/svg%3E
') no-repeat center center;
}
%io-capsule-graphic {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 536.5 219.4"%3E%3Cg stroke="%234ABFFF" stroke-width="2" stroke-miterlimit="10"%3E%3Cpath fill="%23288EC7" d="M526.5 64.2l-252.6-63c-.9-.2-1.9-.3-2.7-.1L7.5 55.1c-3.7.7-6.4 5-6.4 10.9L1 139.9c0 7.2 4 14 9 15.3l252.6 63c.9.2 1.9.2 2.7.1.3-.1.3-.1 0 0l263.7-54c3.7-.7 6.3-5 6.3-10.9l.1-73.9c.1-7.2-3.9-14.1-8.9-15.3zM9.1 55.1h-.6c.2-.1.4-.1.6 0zm-.8-.1c-.3 0-.5 0-.7.1.2 0 .4 0 .7-.1zm1 .1c.3 0 .5.1.8.1-.2 0-.5-.1-.8-.1z"/%3E%3Cpath fill="%232FA6E8" d="M262.8 118.2c5 1.2 9 8.1 9 15.3l-.1 73.9c0 7.2-4.1 12-9 10.8L10 155.2c-5-1.2-9-8.1-9-15.3L1.1 66c0-7.2 4.1-12.1 9.1-10.8l252.6 63z"/%3E%3C/g%3E%3Cg enable-background="new"%3E%3Cpath fill="%234ABFFF" d="M35.9 99c-4.2-.8-7.7 2.5-7.7 7.5s3.4 9.7 7.7 10.6c4.2.8 7.7-2.5 7.7-7.5 0-5.1-3.5-9.8-7.7-10.6"/%3E%3Cpath fill="%23288EC7" d="M35.9 117c-4.2-.8-7.7-5.6-7.7-10.6s3.5-8.4 7.7-7.5c4.2.8 7.7 5.6 7.7 10.6s-3.5 8.4-7.7 7.5m0-20c-5.1-1-9.3 3.1-9.3 9.1s4.2 11.8 9.3 12.8c5.1 1 9.3-3.1 9.4-9.1-.1-6-4.3-11.7-9.4-12.8"/%3E%3C/g%3E%3C/svg%3E') no-repeat center center;
}

%private-network-middle {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="340" height="50" viewBox="0 0 340 50"%3E%3Cpath fill="%23373F43" d="M2 0h336v50H2z"/%3E%3Cpath opacity=".1" fill="%23AD41FF" d="M2 0h336v50H2z"/%3E%3Cpath fill="%239A16FF" d="M0 0h5v50H0zM335 0h5v50h-5z"/%3E%3C/svg%3E') repeat-y center center;
}

%private-network-edge {
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="340" height="58" viewBox="0 0 340 58"%3E%3Cpath fill="%23373F43" d="M2 48.7c0-8.9 7.1-15 19.9-18.2L142.3 4.6c7.8-1.9 18.1-4 28.8-4 5.9 0 14.7 1.3 22.5 3l124.8 28.8c16.8 3.5 19.5 11.9 19.5 18.1V58H2v-9.3z"/%3E%3Cpath opacity=".1" fill="%23AD41FF" d="M2 48.7c0-8.9 7.1-15 19.9-18.2L142.3 4.6c7.8-1.9 18.1-4 28.8-4 5.9 0 14.7 1.3 22.5 3l124.8 28.8c16.8 3.5 19.5 11.9 19.5 18.1V58H2v-9.3z"/%3E%3Cpath fill="%239A16FF" d="M335 52c0-3 .4-12.3-17.3-16 0 0-124.3-31.7-146.6-31.7S22.8 34.1 22.8 34.1C10.8 37.1 5 42.5 5 50.3V58H0v-7.7C0 43.5 3.8 34.4 21.5 30 21.5 30 148.7.1 171.2.1s147.7 31.8 147.7 31.8c14 2.8 21.1 9.6 21.1 20.1v6h-5v-6z"/%3E%3C/svg%3E') no-repeat center center;
}