HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 100 100">
<g>
<rect id="XMLID" x="41.2" y="82.3" width="1.3" height="14.9"/>
<rect id="XMLID" x="43.7" y="82.3" width="1.3" height="14.9"/>
<rect id="XMLID" x="38.7" y="89.3" width="1.3" height="7.8"/>
<path id="XMLID" d="M51.1,96.5L51.1,96.5c0,0.4-0.3,0.7-0.7,0.7l-3.6,0c-0.4,0-0.7-0.3-0.7-0.7v0c0-0.4,0.3-0.7,0.7-0.7l3.6,0
C50.8,95.8,51.1,96.1,51.1,96.5z"/>
<rect id="XMLID" x="46.2" y="89.3" width="1.3" height="7.8"/>
<rect id="XMLID" x="49.8" y="89.3" width="1.3" height="7.8"/>
<rect id="XMLID" x="51.1" y="94.2" width="3.5" height="1.3"/>
<rect id="XMLID" x="56" y="89.3" width="1.3" height="7.8"/>
<rect id="XMLID" x="58" y="89.3" width="3.7" height="7.8"/>
<rect id="XMLID" x="52.1" y="91.2" width="3.9" height="1.3"/>
<rect id="XMLID" x="64.5" y="89.3" transform="matrix(-0.7807 0.6249 -0.6249 -0.7807 174.1273 124.6576)" width="1.3" height="7.2"/>
<rect id="XMLID" x="62.4" y="89.3" width="1.3" height="7.8"/>
<rect id="XMLID" x="66.6" y="89.3" width="1.3" height="7.8"/>
<path id="XMLID" class="st0" d="M59.9,95.3L59.9,95.3c-0.6,0-1.1-0.5-1.1-1.1v-1.8c0-0.6,0.5-1.1,1.1-1.1h0
c0.6,0,1.1,0.5,1.1,1.1v1.8C61,94.8,60.5,95.3,59.9,95.3z"/>
</g>
</svg>
CSS
body {
background: #222222;
}
.st0{
fill:none;}
#XMLID {
-moz-animation: strokedesign 20s cubic-bezier(0.91, 0.91, 0.91, 0.95) alternate infinite;
-webkit-animation: strokedesign 20s cubic-bezier(0.91, 0.91, 0.91, 0.95) alternate infinite;
animation: strokedesign 20s cubic-bezier(0.91, 0.91, 0.91, 0.95) alternate infinite;
fill: #000;
stroke: #fff;
stroke-width: 0.1;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 5;
stroke-dashoffset: 10;
}
@-moz-keyframes strokedesign {
0%,100% {
stroke-dashoffset: 200;
fill:#fff;
}
50% {
stroke-dashoffset: 0;
fill:#222;
}
60%{
stroke-dashoffset: 70;
fill:#222;
}
}
@-webkit-keyframes strokedesign {
0%,100% {
stroke-dashoffset: 200;
fill:#fff;
}
50% {
stroke-dashoffset: 0;
fill:#222;
}
60%{
stroke-dashoffset: 70;
fill:#222;
}
}
@keyframes strokedesign {
0%,100% {
stroke-dashoffset: 200;
fill:#fff;
}
50% {
stroke-dashoffset: 0;
fill:#222;
}
60%{
stroke-dashoffset: 70;
fill:#222;
}
}
svg {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(0%, -70%);
position: absolute;
top: 0%;
left: 0%;
}
