Mobile iPhone SVG Animation

index.html

<div class="main">
  <?xml version="1.0" encoding="UTF-8"?>
<svg width="690px" height="619px" viewBox="0 0 690 619" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>Icon </title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="194.994586 0.283787341 194.994586 270.736381 0.585072827 269.66152 193.533003 0.283787341"></polygon>
        <rect id="path-3" x="60" y="101" width="49" height="40" rx="4"></rect>
    </defs>
    <g id="Welcome" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Icon-">
            <rect id="border" stroke="#FFFFFF" stroke-width="3" x="181.5" y="121.5" width="238" height="367" rx="8"></rect>
            <g id="base" transform="translate(199.000000, 158.000000)">
                <g id="grid" transform="translate(6.000000, 7.000000)">
                    <mask id="mask-2" fill="white">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Mask"></g>
                    <g id="grid-mask" mask="url(#mask-2)">
                        <g transform="translate(6.000000, 34.000000)">
                            <rect id="Rectangle-3" stroke="#979797" stroke-width="2" fill="none" x="122" y="1" width="47" height="38" rx="4"></rect>
                            <rect id="Rectangle-3-Copy" stroke="#979797" stroke-width="2" fill="none" x="122" y="51" width="47" height="38" rx="4"></rect>
                            <rect id="Rectangle-3-Copy-2" stroke="#979797" stroke-width="2" fill="none" x="121" y="102" width="47" height="38" rx="4"></rect>
                            <rect id="Rectangle-3-Copy-3" stroke="#979797" stroke-width="2" fill="none" x="121" y="152" width="47" height="38" rx="4"></rect>
                            <rect id="Rectangle-3-Copy-4" stroke="#979797" stroke-width="2" fill="none" x="61" y="152" width="47" height="38" rx="4"></rect>
                            <rect id="Rectangle-3-Copy-6" stroke="#979797" stroke-width="2" fill="none" x="1" y="192" width="47" height="38" rx="4"></rect>
                            <mask id="mask-4" fill="white">
                                <use xlink:href="#path-3"></use>
                            </mask>
                            <rect stroke="#979797" stroke-width="2" x="61" y="102" width="47" height="38" rx="4"></rect>
                        </g>
                    </g>
                </g>
                <rect id="base-rec" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="201" height="279" rx="5"></rect>
                <path d="M199.5,4.5 L3.5,277.5" id="divider" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square"></path>
            </g>
            <ellipse id="Oval" stroke="#FFFFFF" stroke-width="2" cx="301.5" cy="461" rx="11.5" ry="11"></ellipse>
            <g id="code" transform="translate(211.000000, 137.000000)" stroke-linecap="square">
                <path d="M69.525,1.5 L110.488459,1.5" id="Line-2" stroke="#FFFFFF" stroke-width="3"></path>
                <path d="M0.5,41.5 L39.5,41.5" id="Line" stroke="#F5A623" stroke-width="2"></path>
                <path d="M0.5,84.5 L67,84.5" id="Line-Copy-9" stroke="#F5A623" stroke-width="2"></path>
                <path d="M3.5,125.5 L26,125.5" id="Line-Copy-17" stroke="#F5A623" stroke-width="2"></path>
                <path d="M0.5,163.5 L54,163.5" id="Line-Copy-27" stroke="#F5A623" stroke-width="2"></path>
                <path d="M3.5,204.5 L53,204.5" id="Line-Copy-32" stroke="#F5A623" stroke-width="2"></path>
                <path d="M2,244.5 L27,244.5" id="Line-Copy-38" stroke="#F5A623" stroke-width="2"></path>
                <path d="M8.5,73.5 L78,73.5" id="Line-Copy-7" stroke="#9013FE" stroke-width="2"></path>
                <path d="M48.5,115.5 L118,115.5" id="Line-Copy-15" stroke="#F5A623" stroke-width="2"></path>
                <path d="M8.5,52.5 L61,52.5" id="Line-Copy" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M17.4150943,63 L61,63" id="Line-Copy-4" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M49.4150943,135 L103,135" id="Line-Copy-21" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M17.4150943,105 L61,105" id="Line-Copy-12" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M69.5,52.5 L83,52.5" id="Line-Copy-2" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M68.4285714,63 L80,63" id="Line-Copy-5" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M121.428571,74 L145,74" id="Line-Copy-35" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M8.42857143,115 L36,115" id="Line-Copy-16" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M11.4285714,144 L47,144" id="Line-Copy-22" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M6.42857143,174 L54,174" id="Line-Copy-28" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M21,224 L45,224" id="Line-Copy-36" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M56.4285714,144 L92,144" id="Line-Copy-23" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M74.4285714,125 L102,125" id="Line-Copy-19" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M76.4285714,95 L109,95" id="Line-Copy-11" stroke="#94CAFF" stroke-width="2"></path>
                <path d="M88.5,52.5 L126,52.5" id="Line-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M88.5,73.5 L111,73.5" id="Line-Copy-8" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M35.5,125.5 L65,125.5" id="Line-Copy-18" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M6.5,153.5 L28,153.5" id="Line-Copy-24" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M6.5,184.5 L44,184.5" id="Line-Copy-30" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M36.5,214.5 L51,214.5" id="Line-Copy-34" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M8.5,233.5 L35,233.5" id="Line-Copy-37" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M38.5,153.5 L60,153.5" id="Line-Copy-25" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M7.5,214.5 L28,214.5" id="Line-Copy-33" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M8.5,254.5 L20,254.5" id="Line-Copy-39" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M60.5,174.5 L76,174.5" id="Line-Copy-29" stroke="#A5FF54" stroke-width="2"></path>
                <path d="M121,104.5 L131,104.5" id="Line-Copy-14" stroke="#FFFFFF" stroke-width="2"></path>
                <path d="M88.4210526,63 L142,63" id="Line-Copy-6" stroke="#9013FE" stroke-width="2"></path>
                <path d="M68.4210526,105 L114,105" id="Line-Copy-13" stroke="#9013FE" stroke-width="2"></path>
                <path d="M12.4210526,95 L66,95" id="Line-Copy-10" stroke="#9013FE" stroke-width="2"></path>
                <path d="M7.42105263,135 L43,135" id="Line-Copy-20" stroke="#9013FE" stroke-width="2"></path>
                <path d="M66.4210526,153 L91,153" id="Line-Copy-26" stroke="#9013FE" stroke-width="2"></path>
                <path d="M14.4210526,194 L60,194" id="Line-Copy-31" stroke="#9013FE" stroke-width="2"></path>
            </g>
        </g>
    </g>
</svg>
  
</div>

mobile-iphone-svg-animation.markdown

Mobile iPhone SVG Animation

A Pen by christian anderson on CodePen.

License.

style.css

.main {
  background: black; 
}

#code path,
#grid{
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 12s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}