(source: https://jsfiddle.net/63g0urv1/40/)

fiddle.css

.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 300px;
  margin: 0 auto;
  //background: red;
  overflow: hidden;
  
  .code {
    width: 200px;
  }
  .scanner {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 100%;
    //border-top: 2px solid #06A034;
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  animation: scan 5s linear infinite;

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: #06A034;
      border-radius: 4px;
      -webkit-box-shadow: 0 4px 12px 0px rgba(6, 160, 52, 0.32941176470588235);
      box-shadow: 0 4px 12px 0px rgba(6, 160, 52, 0.32941176470588235);
    }
  }
}

@-webkit-keyframes scan {
  /* finish with the scan bar just off the right side */
  50% { top: -300px; transform: rotateX(0deg);}
  50.1% { transform: rotateX(180deg);}// transform: rotateX(180deg);}
  99.9% {top: 300px; transform: rotateX(180deg);}
  100% {top: 300px; transform: rotateX(0deg);}
  //75% { top: 200%; transform: rotateX(0deg);}
}

fiddle.html

<div class="wrap">
<svg class="code" version="1.1" baseProfile="full"  width="264" height="264" viewBox="0 0 264 264"
		 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events">
<desc></desc>
<rect width="264" height="264" fill="#ffffff" cx="0" cy="0" />
<defs>
<rect id="p" width="8" height="8" />
</defs>
<g fill="#000000">
<use x="32" y="32" xlink:href="#p" />
<use x="32" y="40" xlink:href="#p" />
<use x="32" y="48" xlink:href="#p" />
<use x="32" y="56" xlink:href="#p" />
<use x="32" y="64" xlink:href="#p" />
<use x="32" y="72" xlink:href="#p" />
<use x="32" y="80" xlink:href="#p" />
<use x="32" y="96" xlink:href="#p" />
<use x="32" y="104" xlink:href="#p" />
<use x="32" y="176" xlink:href="#p" />
<use x="32" y="184" xlink:href="#p" />
<use x="32" y="192" xlink:href="#p" />
<use x="32" y="200" xlink:href="#p" />
<use x="32" y="208" xlink:href="#p" />
<use x="32" y="216" xlink:href="#p" />
<use x="32" y="224" xlink:href="#p" />
<use x="40" y="32" xlink:href="#p" />
<use x="40" y="80" xlink:href="#p" />
<use x="40" y="96" xlink:href="#p" />
<use x="40" y="104" xlink:href="#p" />
<use x="40" y="120" xlink:href="#p" />
<use x="40" y="144" xlink:href="#p" />
<use x="40" y="152" xlink:href="#p" />
<use x="40" y="160" xlink:href="#p" />
<use x="40" y="176" xlink:href="#p" />
<use x="40" y="224" xlink:href="#p" />
<use x="48" y="32" xlink:href="#p" />
<use x="48" y="48" xlink:href="#p" />
<use x="48" y="56" xlink:href="#p" />
<use x="48" y="64" xlink:href="#p" />
<use x="48" y="80" xlink:href="#p" />
<use x="48" y="96" xlink:href="#p" />
<use x="48" y="104" xlink:href="#p" />
<use x="48" y="112" xlink:href="#p" />
<use x="48" y="120" xlink:href="#p" />
<use x="48" y="128" xlink:href="#p" />
<use x="48" y="152" xlink:href="#p" />
<use x="48" y="160" xlink:href="#p" />
<use x="48" y="176" xlink:href="#p" />
<use x="48" y="192" xlink:href="#p" />
<use x="48" y="200" xlink:href="#p" />
<use x="48" y="208" xlink:href="#p" />
<use x="48" y="224" xlink:href="#p" />
<use x="56" y="32" xlink:href="#p" />
<use x="56" y="48" xlink:href="#p" />
<use x="56" y="56" xlink:href="#p" />
<use x="56" y="64" xlink:href="#p" />
<use x="56" y="80" xlink:href="#p" />
<use x="56" y="96" xlink:href="#p" />
<use x="56" y="120" xlink:href="#p" />
<use x="56" y="152" xlink:href="#p" />
<use x="56" y="176" xlink:href="#p" />
<use x="56" y="192" xlink:href="#p" />
<use x="56" y="200" xlink:href="#p" />
<use x="56" y="208" xlink:href="#p" />
<use x="56" y="224" xlink:href="#p" />
<use x="64" y="32" xlink:href="#p" />
<use x="64" y="48" xlink:href="#p" />
<use x="64" y="56" xlink:href="#p" />
<use x="64" y="64" xlink:href="#p" />
<use x="64" y="80" xlink:href="#p" />
<use x="64" y="96" xlink:href="#p" />
<use x="64" y="112" xlink:href="#p" />
<use x="64" y="120" xlink:href="#p" />
<use x="64" y="128" xlink:href="#p" />
<use x="64" y="152" xlink:href="#p" />
<use x="64" y="176" xlink:href="#p" />
<use x="64" y="192" xlink:href="#p" />
<use x="64" y="200" xlink:href="#p" />
<use x="64" y="208" xlink:href="#p" />
<use x="64" y="224" xlink:href="#p" />
<use x="72" y="32" xlink:href="#p" />
<use x="72" y="80" xlink:href="#p" />
<use x="72" y="136" xlink:href="#p" />
<use x="72" y="144" xlink:href="#p" />
<use x="72" y="152" xlink:href="#p" />
<use x="72" y="160" xlink:href="#p" />
<use x="72" y="176" xlink:href="#p" />
<use x="72" y="224" xlink:href="#p" />
<use x="80" y="32" xlink:href="#p" />
<use x="80" y="40" xlink:href="#p" />
<use x="80" y="48" xlink:href="#p" />
<use x="80" y="56" xlink:href="#p" />
<use x="80" y="64" xlink:href="#p" />
<use x="80" y="72" xlink:href="#p" />
<use x="80" y="80" xlink:href="#p" />
<use x="80" y="96" xlink:href="#p" />
<use x="80" y="112" xlink:href="#p" />
<use x="80" y="128" xlink:href="#p" />
<use x="80" y="144" xlink:href="#p" />
<use x="80" y="160" xlink:href="#p" />
<use x="80" y="176" xlink:href="#p" />
<use x="80" y="184" xlink:href="#p" />
<use x="80" y="192" xlink:href="#p" />
<use x="80" y="200" xlink:href="#p" />
<use x="80" y="208" xlink:href="#p" />
<use x="80" y="216" xlink:href="#p" />
<use x="80" y="224" xlink:href="#p" />
<use x="88" y="96" xlink:href="#p" />
<use x="88" y="112" xlink:href="#p" />
<use x="88" y="120" xlink:href="#p" />
<use x="88" y="144" xlink:href="#p" />
<use x="88" y="160" xlink:href="#p" />
<use x="96" y="40" xlink:href="#p" />
<use x="96" y="56" xlink:href="#p" />
<use x="96" y="72" xlink:href="#p" />
<use x="96" y="80" xlink:href="#p" />
<use x="96" y="96" xlink:href="#p" />
<use x="96" y="104" xlink:href="#p" />
<use x="96" y="120" xlink:href="#p" />
<use x="96" y="144" xlink:href="#p" />
<use x="96" y="152" xlink:href="#p" />
<use x="96" y="160" xlink:href="#p" />
<use x="96" y="168" xlink:href="#p" />
<use x="96" y="176" xlink:href="#p" />
<use x="96" y="192" xlink:href="#p" />
<use x="96" y="200" xlink:href="#p" />
<use x="96" y="208" xlink:href="#p" />
<use x="96" y="216" xlink:href="#p" />
<use x="96" y="224" xlink:href="#p" />
<use x="104" y="56" xlink:href="#p" />
<use x="104" y="64" xlink:href="#p" />
<use x="104" y="72" xlink:href="#p" />
<use x="104" y="88" xlink:href="#p" />
<use x="104" y="96" xlink:href="#p" />
<use x="104" y="128" xlink:href="#p" />
<use x="104" y="152" xlink:href="#p" />
<use x="104" y="168" xlink:href="#p" />
<use x="104" y="192" xlink:href="#p" />
<use x="104" y="208" xlink:href="#p" />
<use x="104" y="216" xlink:href="#p" />
<use x="112" y="32" xlink:href="#p" />
<use x="112" y="40" xlink:href="#p" />
<use x="112" y="56" xlink:href="#p" />
<use x="112" y="80" xlink:href="#p" />
<use x="112" y="88" xlink:href="#p" />
<use x="112" y="104" xlink:href="#p" />
<use x="112" y="112" xlink:href="#p" />
<use x="112" y="128" xlink:href="#p" />
<use x="112" y="160" xlink:href="#p" />
<use x="112" y="168" xlink:href="#p" />
<use x="112" y="176" xlink:href="#p" />
<use x="112" y="184" xlink:href="#p" />
<use x="112" y="200" xlink:href="#p" />
<use x="112" y="216" xlink:href="#p" />
<use x="112" y="224" xlink:href="#p" />
<use x="120" y="72" xlink:href="#p" />
<use x="120" y="88" xlink:href="#p" />
<use x="120" y="96" xlink:href="#p" />
<use x="120" y="144" xlink:href="#p" />
<use x="120" y="152" xlink:href="#p" />
<use x="120" y="160" xlink:href="#p" />
<use x="120" y="208" xlink:href="#p" />
<use x="120" y="216" xlink:href="#p" />
<use x="120" y="224" xlink:href="#p" />
<use x="128" y="32" xlink:href="#p" />
<use x="128" y="48" xlink:href="#p" />
<use x="128" y="56" xlink:href="#p" />
<use x="128" y="72" xlink:href="#p" />
<use x="128" y="80" xlink:href="#p" />
<use x="128" y="104" xlink:href="#p" />
<use x="128" y="120" xlink:href="#p" />
<use x="128" y="128" xlink:href="#p" />
<use x="128" y="144" xlink:href="#p" />
<use x="128" y="168" xlink:href="#p" />
<use x="128" y="184" xlink:href="#p" />
<use x="128" y="192" xlink:href="#p" />
<use x="128" y="208" xlink:href="#p" />
<use x="136" y="32" xlink:href="#p" />
<use x="136" y="40" xlink:href="#p" />
<use x="136" y="56" xlink:href="#p" />
<use x="136" y="64" xlink:href="#p" />
<use x="136" y="104" xlink:href="#p" />
<use x="136" y="112" xlink:href="#p" />
<use x="136" y="120" xlink:href="#p" />
<use x="136" y="168" xlink:href="#p" />
<use x="136" y="176" xlink:href="#p" />
<use x="136" y="184" xlink:href="#p" />
<use x="144" y="40" xlink:href="#p" />
<use x="144" y="48" xlink:href="#p" />
<use x="144" y="56" xlink:href="#p" />
<use x="144" y="72" xlink:href="#p" />
<use x="144" y="80" xlink:href="#p" />
<use x="144" y="88" xlink:href="#p" />
<use x="144" y="112" xlink:href="#p" />
<use x="144" y="128" xlink:href="#p" />
<use x="144" y="152" xlink:href="#p" />
<use x="144" y="168" xlink:href="#p" />
<use x="144" y="176" xlink:href="#p" />
<use x="144" y="192" xlink:href="#p" />
<use x="144" y="216" xlink:href="#p" />
<use x="152" y="40" xlink:href="#p" />
<use x="152" y="56" xlink:href="#p" />
<use x="152" y="72" xlink:href="#p" />
<use x="152" y="112" xlink:href="#p" />
<use x="152" y="120" xlink:href="#p" />
<use x="152" y="144" xlink:href="#p" />
<use x="152" y="152" xlink:href="#p" />
<use x="152" y="160" xlink:href="#p" />
<use x="152" y="168" xlink:href="#p" />
<use x="152" y="192" xlink:href="#p" />
<use x="152" y="200" xlink:href="#p" />
<use x="152" y="216" xlink:href="#p" />
<use x="160" y="32" xlink:href="#p" />
<use x="160" y="40" xlink:href="#p" />
<use x="160" y="64" xlink:href="#p" />
<use x="160" y="80" xlink:href="#p" />
<use x="160" y="88" xlink:href="#p" />
<use x="160" y="112" xlink:href="#p" />
<use x="160" y="128" xlink:href="#p" />
<use x="160" y="136" xlink:href="#p" />
<use x="160" y="152" xlink:href="#p" />
<use x="160" y="160" xlink:href="#p" />
<use x="160" y="168" xlink:href="#p" />
<use x="160" y="176" xlink:href="#p" />
<use x="160" y="184" xlink:href="#p" />
<use x="160" y="192" xlink:href="#p" />
<use x="160" y="216" xlink:href="#p" />
<use x="168" y="96" xlink:href="#p" />
<use x="168" y="112" xlink:href="#p" />
<use x="168" y="120" xlink:href="#p" />
<use x="168" y="128" xlink:href="#p" />
<use x="168" y="160" xlink:href="#p" />
<use x="168" y="192" xlink:href="#p" />
<use x="168" y="200" xlink:href="#p" />
<use x="168" y="208" xlink:href="#p" />
<use x="168" y="216" xlink:href="#p" />
<use x="168" y="224" xlink:href="#p" />
<use x="176" y="32" xlink:href="#p" />
<use x="176" y="40" xlink:href="#p" />
<use x="176" y="48" xlink:href="#p" />
<use x="176" y="56" xlink:href="#p" />
<use x="176" y="64" xlink:href="#p" />
<use x="176" y="72" xlink:href="#p" />
<use x="176" y="80" xlink:href="#p" />
<use x="176" y="112" xlink:href="#p" />
<use x="176" y="120" xlink:href="#p" />
<use x="176" y="128" xlink:href="#p" />
<use x="176" y="144" xlink:href="#p" />
<use x="176" y="160" xlink:href="#p" />
<use x="176" y="176" xlink:href="#p" />
<use x="176" y="192" xlink:href="#p" />
<use x="176" y="200" xlink:href="#p" />
<use x="176" y="216" xlink:href="#p" />
<use x="176" y="224" xlink:href="#p" />
<use x="184" y="32" xlink:href="#p" />
<use x="184" y="80" xlink:href="#p" />
<use x="184" y="96" xlink:href="#p" />
<use x="184" y="104" xlink:href="#p" />
<use x="184" y="112" xlink:href="#p" />
<use x="184" y="120" xlink:href="#p" />
<use x="184" y="136" xlink:href="#p" />
<use x="184" y="152" xlink:href="#p" />
<use x="184" y="160" xlink:href="#p" />
<use x="184" y="192" xlink:href="#p" />
<use x="184" y="208" xlink:href="#p" />
<use x="184" y="216" xlink:href="#p" />
<use x="184" y="224" xlink:href="#p" />
<use x="192" y="32" xlink:href="#p" />
<use x="192" y="48" xlink:href="#p" />
<use x="192" y="56" xlink:href="#p" />
<use x="192" y="64" xlink:href="#p" />
<use x="192" y="80" xlink:href="#p" />
<use x="192" y="112" xlink:href="#p" />
<use x="192" y="128" xlink:href="#p" />
<use x="192" y="144" xlink:href="#p" />
<use x="192" y="152" xlink:href="#p" />
<use x="192" y="160" xlink:href="#p" />
<use x="192" y="168" xlink:href="#p" />
<use x="192" y="176" xlink:href="#p" />
<use x="192" y="184" xlink:href="#p" />
<use x="192" y="192" xlink:href="#p" />
<use x="192" y="200" xlink:href="#p" />
<use x="200" y="32" xlink:href="#p" />
<use x="200" y="48" xlink:href="#p" />
<use x="200" y="56" xlink:href="#p" />
<use x="200" y="64" xlink:href="#p" />
<use x="200" y="80" xlink:href="#p" />
<use x="200" y="96" xlink:href="#p" />
<use x="200" y="120" xlink:href="#p" />
<use x="200" y="128" xlink:href="#p" />
<use x="200" y="144" xlink:href="#p" />
<use x="200" y="160" xlink:href="#p" />
<use x="200" y="176" xlink:href="#p" />
<use x="200" y="192" xlink:href="#p" />
<use x="208" y="32" xlink:href="#p" />
<use x="208" y="48" xlink:href="#p" />
<use x="208" y="56" xlink:href="#p" />
<use x="208" y="64" xlink:href="#p" />
<use x="208" y="80" xlink:href="#p" />
<use x="208" y="112" xlink:href="#p" />
<use x="208" y="128" xlink:href="#p" />
<use x="208" y="136" xlink:href="#p" />
<use x="208" y="144" xlink:href="#p" />
<use x="208" y="160" xlink:href="#p" />
<use x="208" y="168" xlink:href="#p" />
<use x="208" y="192" xlink:href="#p" />
<use x="208" y="200" xlink:href="#p" />
<use x="208" y="208" xlink:href="#p" />
<use x="208" y="224" xlink:href="#p" />
<use x="216" y="32" xlink:href="#p" />
<use x="216" y="80" xlink:href="#p" />
<use x="216" y="96" xlink:href="#p" />
<use x="216" y="104" xlink:href="#p" />
<use x="216" y="112" xlink:href="#p" />
<use x="216" y="120" xlink:href="#p" />
<use x="216" y="128" xlink:href="#p" />
<use x="216" y="136" xlink:href="#p" />
<use x="216" y="144" xlink:href="#p" />
<use x="216" y="152" xlink:href="#p" />
<use x="216" y="160" xlink:href="#p" />
<use x="216" y="168" xlink:href="#p" />
<use x="216" y="176" xlink:href="#p" />
<use x="216" y="184" xlink:href="#p" />
<use x="216" y="200" xlink:href="#p" />
<use x="216" y="224" xlink:href="#p" />
<use x="224" y="32" xlink:href="#p" />
<use x="224" y="40" xlink:href="#p" />
<use x="224" y="48" xlink:href="#p" />
<use x="224" y="56" xlink:href="#p" />
<use x="224" y="64" xlink:href="#p" />
<use x="224" y="72" xlink:href="#p" />
<use x="224" y="80" xlink:href="#p" />
<use x="224" y="112" xlink:href="#p" />
<use x="224" y="128" xlink:href="#p" />
<use x="224" y="144" xlink:href="#p" />
<use x="224" y="160" xlink:href="#p" />
<use x="224" y="176" xlink:href="#p" />
<use x="224" y="192" xlink:href="#p" />
<use x="224" y="200" xlink:href="#p" />
<use x="224" y="208" xlink:href="#p" />
<use x="224" y="216" xlink:href="#p" />
<use x="224" y="224" xlink:href="#p" />
</g>
</svg>
<div class="scanner"></div>
</div>