inspiration from polygon ps4 review
A Pen by Anthony Aubertin on CodePen.
Created
November 16, 2013 22:58
-
-
Save jsdev/7506529 to your computer and use it in GitHub Desktop.
A Pen by Anthony Aubertin.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <h1>iPhone svg animation by <a href="http://twitter.com/noxdzine/">Noxdzine</a></h1> | |
| <svg id="svg" /> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | |
| <script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script> | |
| </body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| setTimeout(function(){ | |
| var s = Snap('#svg'); | |
| var path = s.path("m63.33313,292.66699l459.28516,-263.69135c0,0 33.67444,-21.11328 65.22778,0c31.55347,21.11328 178.68628,108.72656 178.68628,108.72656c0,0 28.59961,18.65039 -5.77344,40.80853c-34.37305,22.15833 -453.51563,290.06445 -453.51563,290.06445c0,0 -42.67188,27.12317 -76.61133,3.76965c-33.93945,-23.35364 -182.2959,-127.11536 -182.2959,-127.11536c0,0 -31.83362,-22.14136 7.06519,-47.78906 z"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1000,mina.easeinout); | |
| var path = s.path("m766.94495,138.01617c0,0 34.63818,20.81006 -3.06641,46.03607c-37.70459,25.22607 -438.99463,282.05823 -438.99463,282.05823c0,0 -58.17871,51.00574 -112.47852,3.38074c-64.27734,-45.10938 -170.89453,-121.33008 -170.89453,-121.33008c0,0 -33.61768,-24.74109 22.42188,-55.86133"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m781.54895,160.8941l0,28.6026c0,0 0.80957,4.52625 -4.08984,8.54285c-4.89941,4.0166 -454.62305,296.79749 -454.62305,296.79749c0,0 -54.82129,43.22644 -105.31543,8.09863c-50.49414,-35.12805 -180.60938,-130.78125 -180.60938,-130.78125c0,0 -4.91895,-2.26379 -5.21387,-13.61523c-0.29492,-11.35168 -0.21228,-30.31299 -0.21228,-30.31299c0,0 0.79041,-11.40637 12.45837,-21.04456"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m103.94641,286.46936l218.33496,153.0199l397.66602,-251.7373l-220.10645,-129.81195l-395.89453,228.52936z"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m175.43372,365.37256c0,0 -31.89844,0.94092 -31.20166,19.59521c0.69678,18.6543 30.87109,17.66956 30.87109,17.66956c0,0 32.63965,-0.28772 32.17188,-17.93762c-1.05859,-20.98193 -31.84131,-19.32715 -31.84131,-19.32715z"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m319.80286,460.7677l4.65723,5.33105l-0.40137,27.81934"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m329.51086,490.18555l0,-27.06445l-5.2041,-5.4541"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m753.96155,183.03955l4.46289,4.53699l0,22.78271"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m762.76599,207.71167l0,-22.83508l-4.83838,-4.83838"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m613.22034,92.9566c0,0 1.17041,-1.78857 3.81543,-0.44971c2.64502,1.33887 37.1748,21.57324 37.1748,21.57324c0,0 1.39307,1.63281 -0.21777,2.84668c-1.61084,1.21387 -4.36963,0.30518 -4.36963,0.30518l-35.61731,-20.53381c-1.43396,-0.82672 -1.75464,-2.54041 -0.78552,-3.74158l0,0z"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| var path = s.path("m647.82825,96.82013c0,0 -2.77539,-1.71997 -1.35547,-3.14844c1.41992,-1.42847 6.58618,-0.14185 6.58618,-0.14185c0,0 5.62402,1.82886 2.95728,3.96802c-2.66675,2.13916 -8.18799,-0.67773 -8.18799,-0.67773z"); | |
| var len = path.getTotalLength(); | |
| path.attr({ | |
| stroke: '#fff', | |
| strokeWidth: 1, | |
| fill: 'none', | |
| "stroke-dasharray":len + " " + len, | |
| "stroke-dashoffset":len | |
| }).animate({"stroke-dashoffset": 0}, 1500,mina.easeinout); | |
| },2000); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| background:#000; | |
| text-align: center; | |
| color: #fff; | |
| font-family: helvetica, arial, serif; | |
| } | |
| a{ | |
| text-decoration: none; | |
| color: #20A4FC ; | |
| } | |
| svg{ | |
| margin: 0 auto; | |
| width: 810px; | |
| height: 530px; | |
| -webkit-transform: scale(0.7); | |
| -moz-transform: scale(0.7); | |
| -ms-transform: scale(0.7); | |
| -o-transform: scale(0.7); | |
| transform: scale(0.7); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment