<div class="wrap">
<a href="#show" class="modal-open">Click To Show</a>

<div class="overlay" id="show">
<div class="modal">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 560 280" preserveAspectRatio="true">
								
  <line id="svg_3" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="2.0" x2="558" y2="2.0"/>
  
  <line id="svg_4" fill="none" stroke="#000000" stroke-width="2" x1="558" y1="278" x2="558" y2="2.0"/>
  
  <line id="svg_2" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="278" x2="558" y2="278"/>
  
  <line id="svg_5" fill="none" stroke="#000000" stroke-width="2" x1="2.0" y1="2.0" x2="2.0" y2="278"/>
 
</svg>
   <div class="modal-inner">
     <a href="#" class="modal-close" title="Close Modal">X</a>
     <h3>Modal Title</h3>
   </div>
  </div>
  
</div>
  
</div>
@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400italic,700italic,700);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
* {
  padding:0;
  margin:0;
  position:relative;
  box-sizing:border-box;
}
html {
  height:100%;
  min-height:100%;
}
body {
  height:100%;
  min-height:100%;
  font-family: 'Cantarell', sans-serif;
  font-size: 14px;
  background: radial-gradient(ellipse at center, rgba(2,162,239,1) 0%,rgba(3,106,179,1) 100%);
  color:#424242;
}
.wrap {
  height:100%;
  top:0px;
}
svg {
  width:560px;
  position:relative;
  height:280px;
  margin:0 auto;
  display:block;
}
svg line {
  stroke-width:2px;
   stroke:rgba(2,162,239,1);
}
svg #svg_2 {
	stroke-dasharray: 1680;
  stroke-dashoffset: 1680;
}
svg #svg_4 {
	stroke-dasharray: 1680;
  stroke-dashoffset: -280;
}
svg #svg_3 {
	stroke-dasharray: 1680;
  stroke-dashoffset: -580;
}
svg #svg_5 {
	stroke-dasharray: 1680;
  stroke-dashoffset: -280;
}
@keyframes anim-dash {
  90% {
    stroke:rgba(2,162,239,1);
  }
  100% {
    stroke:#ffffff;
    stroke-dashoffset: 0;
    opacity:1;
  }
}

.overlay {
  background:rgba(0,0,0,.5);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  opacity:0;
  z-index:-999;
}
.modal {
  position:absolute;
  width:560px;
  height:280px;
  top:50%;
  left:50%;
  transform:translate(-100%,-40%);
}
.modal-inner {
  position:absolute;
  top:3px;
  left:3px;
  width:554px;
  height:274px;
  background:rgba(255,255,255,1);
  opacity:0;
}
.modal-close {
  float:right;
  z-index:+2;
  color:#424242;
  margin:5px 5px 0 0;
  font-size:20px;
  font-weight:bold;
  text-decoration:none;
  text-align:center;
  line-height:20px;
  height:20px;
  width:20px;
}
.modal-inner h3 {
  display:block;
  text-align:center;
  font-size:22px;
  padding:20px 20px 10px 20px;
}
.overlay:target .modal, .overlay:target {
  animation:display .6s forwards;
  z-index:auto;
}
.overlay:target .modal svg line{
  animation: anim-dash .6s forwards;
  animation-delay:.6s;
}
.overlay:target .modal .modal-inner {
  animation:display .6s forwards;
  animation-delay:1s;
}
@keyframes display {
  to {
    opacity:1;
  }
}


a.modal-open {
  display:block;
  padding:20px;
  color:#424242;
  font-weight:bold;
  margin:0 auto;
  transform:translateY(100%);
  width:200px;
  background:#e0e0e0;
  border-radius:2px;
  text-align:center;
  text-decoration:none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.