Skip to content

Instantly share code, notes, and snippets.

@blia

blia/iphone5-kit.svg

Created April 21, 2016 13:35
Show Gist options
  • Save blia/e936d2dfeb43dafc16da2928c320ace1 to your computer and use it in GitHub Desktop.
Save blia/e936d2dfeb43dafc16da2928c320ace1 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
iphone5-kit.svg
<svg width="2542px" height="1906px" viewBox="-10472 -781 2542 1906" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 3.7.1 (28215) - http://www.bohemiancoding.com/sketch -->
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="2542" height="1906"></rect>
<mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="2542" height="1906" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<path d="M49.5,25 C49.5,11.4690236 38.5309764,0.5 25,0.5 C11.4690236,0.5 0.5,11.4690236 0.5,25 C0.5,38.5309764 11.4690236,49.5 25,49.5 C38.5309764,49.5 49.5,38.5309764 49.5,25 Z M3.5,25 C3.5,13.1258779 13.1258779,3.5 25,3.5 C36.8741221,3.5 46.5,13.1258779 46.5,25 C46.5,36.8741221 36.8741221,46.5 25,46.5 C13.1258779,46.5 3.5,36.8741221 3.5,25 Z" id="path-3"></path>
<ellipse id="path-5" cx="30.5" cy="30.0704225" rx="30.5" ry="30.0704225"></ellipse>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="65" height="64.1408451">
<rect x="-2" y="-2" width="65" height="64.1408451" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
<ellipse id="path-7" cx="30.5" cy="30.0704225" rx="30.5" ry="30.0704225"></ellipse>
<rect id="path-9" x="0" y="1" width="283.006993" height="43" rx="6"></rect>
<mask id="mask-10" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="283.006993" height="43" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<rect id="path-11" x="0" y="1" width="141.503497" height="43" rx="6"></rect>
<mask id="mask-12" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="141.503497" height="43" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<rect id="path-13" x="0" y="0" width="283" height="60" rx="6"></rect>
<mask id="mask-14" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="283" height="60" fill="white">
<use xlink:href="#path-13"></use>
</mask>
<rect id="path-15" x="0" y="0" width="376" height="782" rx="15"></rect>
<mask id="mask-16" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="376" height="782" fill="white">
<use xlink:href="#path-15"></use>
</mask>
<circle id="path-17" cx="9" cy="9" r="9"></circle>
<mask id="mask-18" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="22" height="22">
<rect x="-2" y="-2" width="22" height="22" fill="white"></rect>
<use xlink:href="#path-17" fill="black"></use>
</mask>
<circle id="path-19" cx="479" cy="9" r="9"></circle>
<mask id="mask-20" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-2" y="-2" width="22" height="22">
<rect x="468" y="-2" width="22" height="22" fill="white"></rect>
<use xlink:href="#path-19" fill="black"></use>
</mask>
<rect id="path-21" x="134" y="0" width="214" height="52" rx="40"></rect>
<mask id="mask-22" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="214" height="52" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<rect id="path-23" x="137" y="0" width="214" height="52" rx="40"></rect>
<mask id="mask-24" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="214" height="52" fill="white">
<use xlink:href="#path-23"></use>
</mask>
<rect id="path-25" x="168" y="47" width="74" height="12" rx="40"></rect>
<mask id="mask-26" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="74" height="12" fill="white">
<use xlink:href="#path-25"></use>
</mask>
<rect id="path-27" x="168" y="47" width="74" height="12" rx="40"></rect>
<mask id="mask-28" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="74" height="12" fill="white">
<use xlink:href="#path-27"></use>
</mask>
</defs>
<g id="Wireframe_iPhone6" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(-10472.000000, -781.000000)">
<use id="Wireframe-bg" stroke="#979797" mask="url(#mask-2)" stroke-width="2" fill="#88888B" xlink:href="#path-1"></use>
<g id="Logo" transform="translate(2247.000000, 1534.000000)">
<circle id="Logo-bg" fill="#4DFFA1" cx="69.5" cy="69.5" r="69.5"></circle>
<path d="M97.7978182,55.1546122 L97.7978182,42.9013878 C97.7978182,42.6817143 97.6771558,42.4826122 97.4839481,42.3797551 L78.4444675,32.0749388 C78.3563766,32.0271837 78.2564416,32 78.1572468,32 C78.0536104,32 77.9514545,32.0286531 77.8626234,32.0771429 L69.7908312,36.6109388 L61.3822208,32.0742041 C61.2933896,32.0271837 61.1927143,32 61.0942597,32 C60.9935844,32 60.8906883,32.0286531 60.7996364,32.0771429 L42.3109091,42.3826939 C42.1228831,42.4811429 42,42.6861224 42,42.9013878 L42,91.877551 C42,92.0898776 42.111039,92.2816327 42.2953636,92.3903673 L60.770026,103.163918 C60.8595974,103.223429 60.963974,103.252816 61.0794545,103.252816 C61.1860519,103.252816 61.2896883,103.225633 61.3785195,103.174939 L69.702,98.4258776 L77.8300519,103.168327 C77.9211039,103.223429 78.0291818,103.252816 78.140961,103.252816 C78.2460779,103.252816 78.348974,103.225633 78.4385455,103.174939 L97.4950519,92.3918367 C97.6808571,92.2875102 97.7978182,92.0898776 97.7978182,91.877551 L97.7978182,66.5489796 C97.7978182,66.3373878 97.6823377,66.137551 97.4898701,66.0273469 C97.4017792,65.9817959 97.3011039,65.9560816 97.1989481,65.9560816 C97.0908701,65.9560816 96.9864935,65.9817959 96.893961,66.0361633 L80.7370519,75.5151837 L80.7370519,71.1518367 C80.7370519,70.9431837 80.6252727,70.7462857 80.4424286,70.6368163 L75.5922468,67.8398367 L97.4943117,55.6725714 C97.6808571,55.5653061 97.7978182,55.3676735 97.7978182,55.1546122 L97.7978182,55.1546122 Z M80.7370519,76.8302857 L96.5993377,67.587102 L96.6341299,91.5131429 L78.1794545,101.994286 L70.8656883,97.8102041 L80.435026,92.3918367 C80.6215714,92.2867755 80.7370519,92.0898776 80.7370519,91.877551 L80.7370519,76.8302857 L80.7370519,76.8302857 Z M69.7804675,97.0938776 L60.2585065,91.5777959 L60.2585065,76.3821224 L74.4596494,68.4694694 L79.5385714,71.4493878 L79.5741039,91.5131429 L69.7804675,97.0938776 L69.7804675,97.0938776 Z M60.2585065,75.0787755 L60.2585065,43.2709388 L69.7656623,37.9502857 L79.6177792,43.2114286 L79.6177792,64.2398367 L60.2585065,75.0787755 L60.2585065,75.0787755 Z M59.3701948,42.3826939 C59.1829091,42.4811429 59.060026,42.6853878 59.060026,42.9013878 L59.060026,75.6437551 L43.1984805,84.5541224 L43.1984805,43.2709388 L61.1016623,33.2717551 L68.5938312,37.2398367 L59.3701948,42.3826939 L59.3701948,42.3826939 Z M59.060026,77.0227755 L59.060026,91.877551 C59.060026,92.0898776 59.1710649,92.2801633 59.3576104,92.3918367 L68.6204805,97.7110204 L61.1194286,101.992816 L43.1984805,91.5777959 L43.1984805,85.856 L59.060026,77.0227755 L59.060026,77.0227755 Z M80.4668571,42.3797551 L70.9249091,37.3059592 L78.1609481,33.2746939 L96.6341299,43.2106939 L96.6341299,54.7887347 L80.7814675,63.6763265 L80.7814675,42.9013878 C80.7814675,42.6817143 80.6615455,42.4811429 80.4668571,42.3797551 L80.4668571,42.3797551 Z" id="Barbara-Giardelli-Logo" stroke="#FFFFFF" fill="#FFFFFF"></path>
</g>
<g id="UI/UX-SET" transform="translate(178.000000, 1346.000000)">
<g id="Confirm-icon" transform="translate(1122.000000, 307.000000)">
<g id="container">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Mask"></g>
<path d="M43.619529,5.02130118 L36.7303306,11.9104995 L16.8314951,13.5303644 L11.5369959,19.9846702 L21.8055515,33.2493656 L34.2233625,36.6529255 L42.3426627,19.2100489 L50.6771173,11.2467193 L69.3416002,38.8195109 L43.0159194,59.1241376 C43.0159194,59.1241376 7.61778479,61.4509442 7.61778479,60.287541 C7.6177848,59.1241378 -6.170409,31.8417065 -6.17040943,31.2600046 C-6.17040986,30.6783027 -7.85763866,9.73377177 -7.01402404,8.39575964 C-6.17040943,7.05774751 3.8944361,-1.31986868 3.8944361,-1.31986868 L32.3003789,-2.2507876 L40.1217981,-2.5928112 L43.619529,5.02130118 Z" id="Path-418" fill="#FFFFFF" mask="url(#mask-4)"></path>
</g>
<polyline id="icn_tick" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="17 21.4024005 25.3259107 29.7283112 48.0542219 7"></polyline>
</g>
<g id="Carousel" transform="translate(1122.000000, 201.000000)">
<rect id="carousel-bg" fill="#FFFFFF" x="0" y="0" width="124" height="40" rx="40"></rect>
<circle id="3-of-3" fill-opacity="0.519999981" fill="#D8D8D8" cx="84.5" cy="19.5" r="6.5"></circle>
<circle id="2-of-3" fill-opacity="0.519999981" fill="#D8D8D8" cx="61.5" cy="19.5" r="6.5"></circle>
<circle id="selected-1-of-3" fill="#88888B" cx="36.5" cy="19.5" r="6.5"></circle>
</g>
<g id="-TYPEFACE-link" transform="translate(1122.000000, 92.000000)" font-size="17" font-family=".SFNSText-Regular, .SF NS Text" line-spacing="26" fill="#BFBFBF" font-weight="normal">
<text>
<tspan x="0" y="16">MONTESERAT TYPEFACE</tspan>
<tspan x="0" y="42">http://www.fontsquirrel.com/fonts/montserrat</tspan>
</text>
</g>
<g id="Palette" transform="translate(1122.000000, 0.000000)">
<rect id="#FFFFFF" fill="#FFFFFF" transform="translate(262.500000, 17.000000) rotate(-180.000000) translate(-262.500000, -17.000000) " x="225" y="1" width="75" height="32" rx="3"></rect>
<rect id="#BEBEBE" fill="#BEBEBE" x="150" y="1" width="75" height="32"></rect>
<rect id="#9D9D9F" fill="#9D9D9F" x="75" y="1" width="75" height="32"></rect>
<rect id="#4DFFA1" fill="#4DFFA1" x="0" y="1" width="75" height="32" rx="3"></rect>
</g>
<g id="Loading" transform="translate(525.000000, 301.000000)">
<text id="LOADING" font-family=".SFNSText-Regular, .SF NS Text" font-size="17.2631579" font-weight="normal" fill="#BFBFBF">
<tspan x="96.5" y="36.5454545">LOADING</tspan>
</text>
<g id="Loading-progression" fill="#FFFFFF">
<ellipse id="Oval" opacity="0.3" cx="30.4555604" cy="6.05302299" rx="5.5258022" ry="5.50893103"></ellipse>
<ellipse id="Oval" opacity="0.15" cx="47.8727033" cy="13.2117586" rx="5.5258022" ry="5.50893103"></ellipse>
<path d="M55.1138462,38.8724253 C50.4967033,38.8724253 46.7629011,35.1514253 46.7629011,30.5553908 C46.7629011,25.9565517 50.5002198,22.2299425 55.1138462,22.2327471 C59.723956,22.2313448 63.4626813,25.9572529 63.4626813,30.5553908 C63.4626813,35.1507241 59.723956,38.8724253 55.1138462,38.8724253 L55.1138462,38.8724253 Z" id="Shape"></path>
<ellipse id="Oval" opacity="0.949999988" cx="47.9310769" cy="47.9158506" rx="5.5258022" ry="5.50893103"></ellipse>
<ellipse id="Oval" opacity="0.8" cx="30.5371429" cy="55.1320805" rx="5.5258022" ry="5.50893103"></ellipse>
<ellipse id="Oval" opacity="0.7" cx="13.12" cy="47.9733448" rx="5.5258022" ry="5.50893103"></ellipse>
<path d="M5.88167033,25.1256897 C8.93749451,25.1256897 11.4060659,27.5902299 11.4074725,30.6332184 C11.4074725,33.6797126 8.93257143,36.1463563 5.88167033,36.1435517 C2.82584615,36.1435517 0.351648352,33.6762069 0.351648352,30.6332184 C0.351648352,27.5902299 2.82865934,25.1256897 5.88167033,25.1256897 L5.88167033,25.1256897 Z" id="Shape" opacity="0.600000024"></path>
<path d="M16.9684396,9.37366667 C19.128967,11.529 19.1261538,15.010908 16.9684396,17.1641379 C14.8107253,19.318069 11.3104176,19.318069 9.1527033,17.1655402 C6.99358242,15.0130115 6.99358242,11.5233908 9.1512967,9.37086207 C11.3104176,7.21903448 14.8107253,7.22324138 16.9684396,9.37366667 L16.9684396,9.37366667 Z" id="Shape" opacity="0.400000006"></path>
</g>
</g>
<g id="User-Placeholder" transform="translate(526.000000, 188.000000)">
<text id="description" font-family=".SFNSText-Regular, .SF NS Text" font-size="18" font-weight="normal" fill="#BFBFBF">
<tspan x="96" y="38">USER PICTURE</tspan>
</text>
<g id="icn_user">
<g id="img-bg" opacity="0.726212687">
<use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
<use stroke="#EDEDED" mask="url(#mask-6)" stroke-width="4" xlink:href="#path-5"></use>
</g>
<g id="body">
<mask id="mask-8" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<g id="Mask"></g>
<ellipse id="Oval-12" fill="#9B9B9B" mask="url(#mask-8)" cx="30.1453488" cy="68.1829348" rx="25.1802326" ry="24.8255814"></ellipse>
</g>
<ellipse id="head" fill="#9B9B9B" cx="30.5" cy="27.2731739" rx="11.3488372" ry="11.1889944"></ellipse>
</g>
</g>
<g id="img-placeholders" transform="translate(525.000000, 0.000000)">
<g id="Rectangle-163-+-Oval-9-+-Path-67" transform="translate(322.000000, 76.000000)">
<rect id="img-bg" fill="#BEBEBE" opacity="0.299999982" x="0" y="0" width="61" height="61" rx="2"></rect>
<path d="M0,61 L8.49819542e-16,46.0780747 L18.7993305,23.6665548 C20.5735373,21.5514438 23.470402,21.5282467 25.2770782,23.6233465 L34.5517596,34.3786676 C36.3551141,36.4699153 39.293189,36.4795527 41.1106468,34.4041748 L43.40248,31.7871016 C45.2214989,29.7099411 48.0359817,29.8095594 49.6991178,32.0233347 L60.9383588,46.9837184 L60.9383588,61" id="mountains" fill-opacity="0.599999964" fill="#D8D8D8"></path>
<ellipse id="sun" fill-opacity="0.599999964" fill="#D8D8D8" cx="47.4575018" cy="11.7258585" rx="7.12731712" ry="7.20220215"></ellipse>
</g>
<g id="small-focus-img" transform="translate(322.000000, 0.000000)">
<rect id="img-bg" fill="#4DFFA1" opacity="0.299999982" x="0" y="0" width="61" height="61" rx="2"></rect>
<path d="M0,61 L8.49819542e-16,46.0780747 L18.7993305,23.6665548 C20.5735373,21.5514438 23.470402,21.5282467 25.2770782,23.6233465 L34.5517596,34.3786676 C36.3551141,36.4699153 39.293189,36.4795527 41.1106468,34.4041748 L43.40248,31.7871016 C45.2214989,29.7099411 48.0359817,29.8095594 49.6991178,32.0233347 L60.9383588,46.9837184 L60.9383588,61" id="mountains" fill-opacity="0.599999964" fill="#D8D8D8"></path>
<ellipse id="sun" fill-opacity="0.599999964" fill="#D8D8D8" cx="47.4575018" cy="11.7258585" rx="7.12731712" ry="7.20220215"></ellipse>
</g>
<g id="big-img" transform="translate(159.000000, 0.000000)">
<rect id="img-bg" fill="#BEBEBE" opacity="0.299999982" x="0" y="0" width="137" height="137" rx="2"></rect>
<path d="M0,137 L1.9086111e-15,103.486823 L43.0114568,52.2109484 C46.5598405,47.980762 52.3563207,47.9376149 55.9677314,52.1255627 L78.4019536,78.1412558 C82.0091228,82.3242849 87.886485,82.3430338 91.5181861,78.1959486 L98.2899839,70.4631477 C101.92671,66.3103245 107.56072,66.5189055 110.881924,70.9397101 L136.86156,105.52081 L136.86156,137" id="mountains" fill-opacity="0.599999964" fill="#D8D8D8"></path>
<ellipse id="sun" fill-opacity="0.599999964" fill="#D8D8D8" cx="106.584881" cy="26.3351248" rx="16.0072532" ry="16.1754376"></ellipse>
</g>
<g id="big-focus-img">
<rect id="img-bg" fill="#4DFFA1" opacity="0.299999982" x="0" y="0" width="137" height="137" rx="2"></rect>
<path d="M0,137 L1.9086111e-15,103.486823 L43.0114568,52.2109484 C46.5598405,47.980762 52.3563207,47.9376149 55.9677314,52.1255627 L78.4019536,78.1412558 C82.0091228,82.3242849 87.886485,82.3430338 91.5181861,78.1959486 L98.2899839,70.4631477 C101.92671,66.3103245 107.56072,66.5189055 110.881924,70.9397101 L136.86156,105.52081 L136.86156,137" id="mountains" fill-opacity="0.599999964" fill="#D8D8D8"></path>
<ellipse id="sun" fill-opacity="0.599999964" fill="#D8D8D8" cx="106.584881" cy="26.3351248" rx="16.0072532" ry="16.1754376"></ellipse>
</g>
</g>
<g id="Tabs" transform="translate(1.000000, 321.000000)">
<use id="tabs-bg-outline" stroke="#BBBBBB" mask="url(#mask-10)" stroke-width="6" xlink:href="#path-9"></use>
<use id="tab-active-bg" stroke="#BBBBBB" mask="url(#mask-12)" stroke-width="6" fill="#BBBBBB" transform="translate(70.751748, 22.500000) rotate(-180.000000) translate(-70.751748, -22.500000) " xlink:href="#path-11"></use>
<text id="TAB-inactive-copy" font-family=".SFNSText-Regular, .SF NS Text" font-size="14" font-weight="normal" fill="#BBBBBB">
<tspan x="192.999512" y="28">TAB 2</tspan>
</text>
<text id="TAB-active-copy" font-family=".SFNSText-Regular, .SF NS Text" font-size="14" font-weight="normal" fill="#FFFFFF">
<tspan x="51.9633789" y="28">TAB 1</tspan>
</text>
</g>
<g id="Confirm-status" transform="translate(232.000000, 207.000000)">
<rect id="button-bg" fill="#BEBEBE" x="0" y="0" width="51" height="32" rx="3"></rect>
<polyline id="icn_tick" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" points="18.8976653 16.4612002 23.1133163 20.6241556 34.621322 9.26"></polyline>
</g>
<g id="Feedback-button" transform="translate(94.000000, 207.000000)">
<rect id="button-bg" fill="#BEBEBE" x="0" y="0" width="75" height="32" rx="3"></rect>
<text id="copy-here" font-family=".SFNSText-Regular, .SF NS Text" font-size="14" font-weight="normal" fill="#88888B">
<tspan x="22.3930664" y="21">GET</tspan>
</text>
</g>
<g id="CTA-button" transform="translate(1.000000, 207.000000)">
<rect id="button-bg" fill="#4DFFA1" x="0" y="0" width="75" height="32" rx="3"></rect>
<text id="copy-here" font-family=".SFNSText-Regular, .SF NS Text" font-size="14" font-weight="normal" fill="#88888B">
<tspan x="21.8222656" y="21">BUY</tspan>
</text>
</g>
<g id="Secondary-button" transform="translate(0.000000, 98.500000)">
<use id="button-bg-outilne" stroke="#BBBBBB" mask="url(#mask-14)" stroke-width="6" xlink:href="#path-13"></use>
<text id="copy-here" font-family=".SFNSText-Regular, .SF NS Text" font-size="17.2631579" font-weight="normal" fill="#BFBFBF">
<tspan x="51.582648" y="36">SECONDARY BUTTON</tspan>
</text>
</g>
<g id="Primary-button" transform="translate(0.000000, 0.500000)">
<rect id="button-bg" fill="#BEBEBE" x="0" y="0" width="284" height="60" rx="6"></rect>
<text id="copy-here" font-family=".SFNSText-Regular, .SF NS Text" font-size="16.8421053" font-weight="normal" fill="#FFFFFF">
<tspan x="67.7401316" y="36.7272727">PRIMARY BUTTON</tspan>
</text>
</g>
</g>
<g id="ANNOTATION" transform="translate(2010.000000, 238.000000)">
<use id="annotation-bg" stroke="#979797" mask="url(#mask-16)" stroke-width="2" fill="#D8D8D8" opacity="0.264867071" xlink:href="#path-15"></use>
<g id="annotation-1" transform="translate(48.000000, 389.000000)">
<text id="annotation-copy" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="20" font-weight="normal" fill="#FFFFFF">
<tspan x="1.5" y="139.5">Sed ut perspiciatis unde </tspan>
<tspan x="1.5" y="162.5">omnis iste natus error sit </tspan>
<tspan x="1.5" y="185.5">voluptatem accusantium </tspan>
<tspan x="1.5" y="208.5">doloremque laudantium, </tspan>
<tspan x="1.5" y="231.5">totam rem aperiam, eaque </tspan>
<tspan x="1.5" y="254.5">ipsa quae ab illo inventore </tspan>
<tspan x="1.5" y="277.5">veritatis.</tspan>
<tspan x="1.5" y="300.5"></tspan>
<tspan x="1.5" y="323.5">Lorem ipsum dolor sit </tspan>
</text>
<g id="counter" transform="translate(0.500000, 0.500000)">
<path d="M27.5,70 C43.9027252,51.2529755 55,42.6878306 55,27.5 C55,12.3121694 42.6878306,0 27.5,0 C12.3121694,0 0,12.3121694 0,27.5 C0,42.6878306 12.4847908,51.2529755 27.5,70 Z" id="counter-bg" fill="#4DFFA1"></path>
<text id="1" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="30" font-weight="normal" fill="#88888B">
<tspan x="20.6665039" y="41">1</tspan>
</text>
</g>
</g>
<path d="M1.20072556,322 L374.200714,322" id="divider" stroke="#88888B" stroke-width="3" stroke-linecap="square"></path>
<g id="annotation-0" transform="translate(53.000000, 64.000000)">
<text id="annotation-copy" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="20" font-weight="normal" fill="#FFFFFF">
<tspan x="5.5" y="137.5">Lorem ipsum dolor sit amet, </tspan>
<tspan x="5.5" y="160.5">consectetur adipiscing elit.</tspan>
</text>
<g id="counter" transform="translate(0.500000, 0.500000)">
<path d="M27.5,70 C43.9027252,51.2529755 55,42.6878306 55,27.5 C55,12.3121694 42.6878306,0 27.5,0 C12.3121694,0 0,12.3121694 0,27.5 C0,42.6878306 12.4847908,51.2529755 27.5,70 Z" id="counter-bg" fill="#4DFFA1"></path>
<text id="0" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="30" font-weight="normal" fill="#88888B">
<tspan x="19.2202148" y="39">0</tspan>
</text>
</g>
</g>
</g>
<g id="CONNECTIONS" transform="translate(1287.000000, 258.000000)">
<g id="click-action-2" transform="translate(0.000000, 711.000000)">
<use id="click" stroke="#4DFFA1" mask="url(#mask-18)" stroke-width="4" xlink:href="#path-17"></use>
<path d="M21,9 L481,9" id="Line" stroke="#4DFFA1" stroke-width="2" stroke-linecap="square"></path>
<polygon id="pointer-right" fill="#4DFFA1" transform="translate(485.500000, 9.000000) scale(-1, 1) translate(-485.500000, -9.000000) " points="489 4 489 14 482 9"></polygon>
</g>
<g id="click-action-1" transform="translate(0.000000, 601.000000)">
<use id="click" stroke="#4DFFA1" mask="url(#mask-20)" stroke-width="4" xlink:href="#path-19"></use>
<path d="M8,9 L468,9" id="Line" stroke="#4DFFA1" stroke-width="2" stroke-linecap="square"></path>
<polygon id="pointer-left" fill="#4DFFA1" points="7 4 7 14 0 9"></polygon>
</g>
<g id="Free-connection" transform="translate(10.000000, 347.000000)">
<path d="M243.051465,5.73278208 L27.9631208,5.73278208 C13.0467447,5.73278208 0.954632726,17.8304414 0.954632726,32.7252791 L0.954632726,65.7451903 C0.954632726,80.6527347 13.0330618,92.7376873 27.9549966,92.7376873 L451.698222,92.7376873 C466.610111,92.7376873 478.698585,104.826828 478.698585,119.73186 L478.698585,158.854847 C478.698585,173.763317 466.607237,185.84902 451.695586,185.84902 L243.051468,185.84902" id="Path-409" stroke="#4DFFA1" stroke-width="2"></path>
<polygon id="pointer" fill="#4DFFA1" transform="translate(246.000000, 5.732782) rotate(-90.000000) translate(-246.000000, -5.732782) " points="241 0.0344349719 251 0.0344349719 246 11.4311292"></polygon>
<polygon id="pointer" fill="#4DFFA1" transform="translate(239.826609, 185.849020) rotate(-270.000000) translate(-239.826609, -185.849020) " points="234.826609 180.150673 244.826609 180.150673 239.826609 191.547367"></polygon>
</g>
<g id="Swipe-right" transform="translate(8.000000, 158.000000)">
<g id="Line-+-pointer" transform="translate(0.000000, 21.000000)">
<path d="M-5.55111512e-17,5 L477,5" id="Line" stroke="#4DFFA1" stroke-width="2" stroke-linecap="square"></path>
<polygon id="pointer-right" fill="#4DFFA1" transform="translate(479.500000, 5.000000) scale(-1, 1) translate(-479.500000, -5.000000) " points="483 0 483 10 476 5"></polygon>
</g>
<use id="swipe-bg" stroke="#4DFFA1" mask="url(#mask-22)" stroke-width="4" fill="#88888B" xlink:href="#path-21"></use>
<text id="SWIPE-RIGHT" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="20" font-weight="normal" letter-spacing="0.800000012" fill="#4DFFA1">
<tspan x="175.500977" y="33">SWIPE RIGH</tspan>
<tspan x="294.321289" y="33">T</tspan>
</text>
</g>
<g id="Swipe-left" transform="translate(5.000000, 0.000000)">
<g id="Line-+-pointer" transform="translate(0.000000, 21.000000)">
<path d="M8,5 L485,5" id="Line" stroke="#4DFFA1" stroke-width="2" stroke-linecap="square"></path>
<polygon id="pointer-left" fill="#4DFFA1" points="7 0 7 10 0 5"></polygon>
</g>
<use id="swipe-bg" stroke="#4DFFA1" mask="url(#mask-24)" stroke-width="4" fill="#88888B" xlink:href="#path-23"></use>
<text id="SWIPE-LEFT" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="20" font-weight="normal" letter-spacing="0.800000012" fill="#4DFFA1">
<tspan x="185.480469" y="33">SWIPE LEFT</tspan>
</text>
</g>
</g>
<g id="GENERIC" transform="translate(699.000000, 111.000000)">
<g id="Page-description" transform="translate(12.000000, 994.000000)">
<text id="Description-go-here" font-family=".SFNSText-Regular, .SF NS Text" font-size="18" font-weight="normal" letter-spacing="2.55" fill="#FFFFFF">
<tspan x="0" y="84.5">Description go here, short ^_^</tspan>
</text>
<path d="M2.5,49 L369.610352,49" id="divider" stroke="#FFFFFF" stroke-linecap="square" opacity="0.431086754"></path>
<text id="Page-title" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="21" font-weight="normal" letter-spacing="3" fill="#4DFFA1">
<tspan x="0" y="20.5">1.1 GENERIC PAG</tspan>
<tspan x="205.996582" y="20.5">E</tspan>
</text>
</g>
<g id="iPhone-6" transform="translate(0.000000, 123.000000)">
<path d="M4,317.297951 L2,317.238228 C0.8954305,317.205244 -2.66453526e-15,316.291815 -2.66453526e-15,315.184582 L-2.66453526e-15,261.247041 C-2.66453526e-15,260.145828 0.887729645,259.237647 2,259.218263 L4,259.183408 L4,225.055275 L2.9906311,225.054303 C1.33895115,225.052713 -9.29472953e-16,223.705498 -9.79942512e-16,222.060526 L-2.57277117e-15,170.144916 C-2.62345108e-15,168.493088 1.34306961,167.151582 2.9906311,167.148594 L4,167.146764 L4,133.376675 L2.9906311,133.376676 C1.33895115,133.376677 -3.55271368e-15,132.040315 -3.55271368e-15,130.369607 L-3.55271368e-15,108.284881 C-3.55271368e-15,106.624121 1.34792741,105.277809 3.00407619,105.277809 L4.66021551,105.277809 L4.37627333,60.0004562 C4.16846331,26.8631193 30.8675309,0 63.9911344,0 L331.008866,0 C364.141054,0 391,26.866949 391,60.0011902 L391,166.932605 L392.009369,166.932605 C393.661049,166.932605 395,168.27521 395,169.925204 L395,221.098253 C395,222.751019 393.65693,224.090851 392.009369,224.090851 L391,224.090851 L391,721.996009 C391,755.135298 364.132469,782 331.008866,782 L63.9911344,782 C30.8589458,782 4,755.134572 4,721.992064 L4,317.297951 Z" id="iPhone6-outline" stroke="#FFFFFF" stroke-width="3"></path>
<ellipse id="home-button" stroke="#FFFFFF" stroke-width="3" cx="197" cy="734" rx="30" ry="30"></ellipse>
<ellipse id="camera" stroke="#FFFFFF" stroke-width="2" cx="137" cy="53" rx="6" ry="6"></ellipse>
<use id="speaker" stroke="#FFFFFF" mask="url(#mask-26)" stroke-width="4" xlink:href="#path-25"></use>
<rect id="content" fill="#FFFFFF" x="29" y="93" width="337" height="595" rx="4"></rect>
</g>
<text id="WIRE" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="58" font-weight="normal" fill="#4DFFA1">
<tspan x="127.654297" y="502">WIRE</tspan>
</text>
<g id="counter" transform="translate(317.000000, 0.500000)">
<path d="M27.5,70 C43.9027252,51.2529755 55,42.6878306 55,27.5 C55,12.3121694 42.6878306,0 27.5,0 C12.3121694,0 0,12.3121694 0,27.5 C0,42.6878306 12.4847908,51.2529755 27.5,70 Z" id="counter-container" fill="#4DFFA1"></path>
<text id="1" fill="#9A9A9D" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="30" font-weight="normal">
<tspan x="20.6665039" y="40">1</tspan>
</text>
</g>
</g>
<g id="LANDING" transform="translate(177.000000, 111.000000)">
<g id="page-description" transform="translate(4.000000, 994.000000)">
<text id="Description-go-here" font-family=".SFNSText-Regular, .SF NS Text" font-size="18" font-weight="normal" letter-spacing="2.57142878" fill="#FFFFFF">
<tspan x="0" y="84.5">Description go here</tspan>
</text>
<path d="M2.5,49 L369.610352,49" id="divider" stroke="#FFFFFF" stroke-linecap="square" opacity="0.431086754"></path>
<text id="Page-title" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="21" font-weight="normal" letter-spacing="3" fill="#4DFFA1">
<tspan x="0" y="20.5">0.0 LANDING PAG</tspan>
<tspan x="217.183594" y="20.5">E</tspan>
</text>
</g>
<g id="iPhone-6" transform="translate(0.000000, 123.000000)">
<path d="M4,317.297951 L2,317.238228 C0.8954305,317.205244 -2.66453526e-15,316.291815 -2.66453526e-15,315.184582 L-2.66453526e-15,261.247041 C-2.66453526e-15,260.145828 0.887729645,259.237647 2,259.218263 L4,259.183408 L4,225.055275 L2.9906311,225.054303 C1.33895115,225.052713 -9.29472953e-16,223.705498 -9.79942512e-16,222.060526 L-2.57277117e-15,170.144916 C-2.62345108e-15,168.493088 1.34306961,167.151582 2.9906311,167.148594 L4,167.146764 L4,133.376675 L2.9906311,133.376676 C1.33895115,133.376677 -3.55271368e-15,132.040315 -3.55271368e-15,130.369607 L-3.55271368e-15,108.284881 C-3.55271368e-15,106.624121 1.34792741,105.277809 3.00407619,105.277809 L4.66021551,105.277809 L4.37627333,60.0004562 C4.16846331,26.8631193 30.8675309,0 63.9911344,0 L331.008866,0 C364.141054,0 391,26.866949 391,60.0011902 L391,166.932605 L392.009369,166.932605 C393.661049,166.932605 395,168.27521 395,169.925204 L395,221.098253 C395,222.751019 393.65693,224.090851 392.009369,224.090851 L391,224.090851 L391,721.996009 C391,755.135298 364.132469,782 331.008866,782 L63.9911344,782 C30.8589458,782 4,755.134572 4,721.992064 L4,317.297951 Z" id="iPhone6-full-color" fill="#4DFFA1"></path>
<ellipse id="home-button" stroke="#FFFFFF" stroke-width="3" cx="197" cy="734" rx="30" ry="30"></ellipse>
<ellipse id="camera" stroke="#FFFFFF" stroke-width="2" cx="137" cy="53" rx="6" ry="6"></ellipse>
<use id="speaker" stroke="#FFFFFF" mask="url(#mask-28)" stroke-width="4" xlink:href="#path-27"></use>
<rect id="content" fill="#FFFFFF" x="29" y="93" width="337" height="595" rx="4"></rect>
</g>
<text id="WIRE" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="58" font-weight="normal" fill="#88888B">
<tspan x="130.654297" y="502">WIRE</tspan>
</text>
<g id="counter" transform="translate(317.000000, 0.500000)">
<path d="M27.5,70 C43.9027252,51.2529755 55,42.6878306 55,27.5 C55,12.3121694 42.6878306,0 27.5,0 C12.3121694,0 0,12.3121694 0,27.5 C0,42.6878306 12.4847908,51.2529755 27.5,70 Z" id="counter-container" fill="#4DFFA1"></path>
<text id="0" fill="#9A9A9D" font-family=".SFNSDisplay-Regular, .SF NS Display" font-size="30" font-weight="normal">
<tspan x="18.2202148" y="40">0</tspan>
</text>
</g>
</g>
</g>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment