<div class="gs-border-blink">
  <!-- define reuse shape -->
  <svg viewBox="0 0 320 180">
    <defs>
      <g id="blink-border">
        <polygon
          id="line1"
          fill="#4fd2dd"
          points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
        >
        </polygon>
        <polygon
          id="line2"
          fill="#235fa7"
          points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
        >
        </polygon>
        <polygon
          id="line3"
          fill="#4fd2dd"
          points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
        >
        </polygon>
      </g>
    </defs>
  </svg>
  
  <!-- use the shape -->
  <svg class="left-top">
    <use xlink:href="#blink-border" />
  </svg>
  <svg class="right-top">
    <use xlink:href="#blink-border" />
  </svg>
  <svg class="left-bottom">
    <use xlink:href="#blink-border" />
  </svg>
  <svg class="right-bottom">
    <use xlink:href="#blink-border" />
  </svg>
</div>
body {
  background-color: #333;
}

.gs-border-blink {
  position: relative;
}

.left-top {
  position: absolute;
  top: 0;
  left: 0;
}

.right-top {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotateY(180deg);
}

.left-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  transform: rotateX(180deg);
}

.right-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotateX(180deg) rotateY(180deg);
}
// gsap.to()... infinity and beyond!
// For more check out greensock.com

gsap
  .to('#line1', {
    fill:'#235fa7',
    repeat: -1,
    yoyo: true,
    duration: 0.25,
    repeatDelay: 0
  })
gsap
  .to('#line1', {
    fill:'#4fd2dd',
    repeat: -1,
    yoyo: true,
    duration: 0.25,
    repeatDelay: 0.25
  });

gsap
  .to('#line2', {
    fill:'#4fd2dd',
    repeat: -1,
    yoyo: true,
    duration: 0.3,
    repeatDelay: 0
  })
  

gsap
  .to('#line3', {
    fill:'transparent',
    repeat: -1,
    yoyo: true,
    duration: 0.5,
    repeatDelay: 0
  })
gsap
  .to('#line3', {
    fill:'#235fa7',
    repeat: -1,
    yoyo: true,
    duration: 0.5,
    repeatDelay: 0.3
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/CSSRulePlugin.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
  5. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js
  6. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js
  7. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js
  8. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js
  9. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EasePack.min.js
  10. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/GSDevTools3.min.js
  11. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js
  12. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js
  13. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathHelper.min.js
  14. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js
  15. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Physics2DPlugin3.min.js
  16. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/PhysicsPropsPlugin3.min.js
  17. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/PixiPlugin.min.js
  18. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js
  19. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/ScrollToPlugin.min.js
  20. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js
  21. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js