Posted in
5761
12:18 am, October 23, 2021
Zig Zag SVG Animated
What is it?
I found this on the Laravel Site and thought it looked cool
What can i use this for?
Just an animated background
Conclusion
Example of what you can do with an animated svg and use it as a background.
Original Source
Thanks to the author vanderzone, this code comes from the
Zig Zags pen on Codepen.
Zig Zag SVG Animated Demo
View Demo Full Screen View Demo New Tab
Zig Zag SVG Animated Code
HTML
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script>
<!-- https://vapor.laravel.com/ -->
<svg id="hero-svg" class="absolute inset-0 h-full w-full" viewBox="0 0 950 513" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice" style="visibility: visible;">
<defs>
<linearGradient id="heroGrad" data-name="New Gradient Swatch 6" x1="475.23" y1="661" x2="475.23" gradientUnits="userSpaceOnUse">
<stop offset="0.25" stop-color="#fff"></stop>
<stop offset="0.32" stop-color="#cef2fc"></stop>
<stop offset="0.41" stop-color="#a2e6f9"></stop>
<stop offset="0.49" stop-color="#7bdbf7"></stop>
<stop offset="0.58" stop-color="#5cd3f5"></stop>
<stop offset="0.67" stop-color="#44ccf4"></stop>
<stop offset="0.77" stop-color="#32c8f3"></stop>
<stop offset="0.87" stop-color="#28c5f2"></stop>
<stop offset="1" stop-color="#25c4f2"></stop>
</linearGradient>
</defs>
<g class="whole">
<g class="allComets">
<g class="cometGroup1" fill="#25C4F2">
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.43242,-0.90167,0.90167,-0.43242,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 1;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.40966,-0.85421,0.85421,-0.40966,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.947368;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.3869,-0.80675,0.80675,-0.3869,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.894737;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.36414,-0.7593,0.7593,-0.36414,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.842105;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.34138,-0.71184,0.71184,-0.34138,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.789474;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.31862,-0.66439,0.66439,-0.31862,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.736842;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.29586,-0.61693,0.61693,-0.29586,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.684211;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.2731,-0.56947,0.56947,-0.2731,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.631579;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.25034,-0.52202,0.52202,-0.25034,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.578947;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.22758,-0.47456,0.47456,-0.22758,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.526316;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.20483,-0.4271,0.4271,-0.20483,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.473684;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.18207,-0.37965,0.37965,-0.18207,0.5,0.5)" style="transform-origin: 0px 0px 0px; opacity: 0.421053;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.15931,-0.33219,0.33219,-0.15931,0.8323420734674869,1.1929918124874916)" style="transform-origin: 0px 0px 0px; opacity: 0.368421;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.13655,-0.28473,0.28473,-0.13655,2.9688268314948516,5.647939178524609)" style="transform-origin: 0px 0px 0px; opacity: 0.315789;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.11379,-0.23728,0.23728,-0.11379,5.105311589522046,10.102886544561386)" style="transform-origin: 0px 0px 0px; opacity: 0.263158;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.09103,-0.18982,0.18982,-0.09103,7.241796347549439,14.557833910598504)" style="transform-origin: 0px 0px 0px; opacity: 0.210526;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.06827,-0.14236,0.14236,-0.06827,9.378281105576633,19.012781276635224)" style="transform-origin: 0px 0px 0px; opacity: 0.157895;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.04551,-0.09491,0.09491,-0.04551,11.514765863604026,23.46772864267234)" style="transform-origin: 0px 0px 0px; opacity: 0.105263;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.02275,-0.04745,0.04745,-0.02275,13.65125062163122,27.922676008709118)" style="transform-origin: 0px 0px 0px; opacity: 0.0526316;"></ellipse>
</g>
<g class="cometGroup2" fill="#25C4F2">
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.43243,0.90166,-0.90166,0.43243,908.9705258829147,574.9490161524144)" style="transform-origin: 0px 0px 0px; opacity: 1;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.40967,0.85421,-0.85421,0.40967,907.190076186416,571.2365819449485)" style="transform-origin: 0px 0px 0px; opacity: 0.947368;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.38691,0.80675,-0.80675,0.38691,905.4096264899176,567.5241477374834)" style="transform-origin: 0px 0px 0px; opacity: 0.894737;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.36415,0.75929,-0.75929,0.36415,903.629176793419,563.8117135300179)" style="transform-origin: 0px 0px 0px; opacity: 0.842105;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.34139,0.71184,-0.71184,0.34139,901.8487270969205,560.0992793225524)" style="transform-origin: 0px 0px 0px; opacity: 0.789474;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.31863,0.66438,-0.66438,0.31863,900.068277400422,556.386845115087)" style="transform-origin: 0px 0px 0px; opacity: 0.736842;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.29587,0.61692,-0.61692,0.29587,898.2878277039235,552.6744109076219)" style="transform-origin: 0px 0px 0px; opacity: 0.684211;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.27311,0.56947,-0.56947,0.27311,896.5073780074248,548.961976700156)" style="transform-origin: 0px 0px 0px; opacity: 0.631579;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.25035,0.52201,-0.52201,0.25035,894.7269283109265,545.2495424926909)" style="transform-origin: 0px 0px 0px; opacity: 0.578947;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.22759,0.47456,-0.47456,0.22759,892.9464786144279,541.5371082852254)" style="transform-origin: 0px 0px 0px; opacity: 0.526316;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.20483,0.4271,-0.4271,0.20483,891.1660289179295,537.8246740777604)" style="transform-origin: 0px 0px 0px; opacity: 0.473684;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.18207,0.37964,-0.37964,0.18207,889.3855792214308,534.1122398702945)" style="transform-origin: 0px 0px 0px; opacity: 0.421053;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.15931,0.33219,-0.33219,0.15931,887.6051295249324,530.3998056628294)" style="transform-origin: 0px 0px 0px; opacity: 0.368421;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.13655,0.28473,-0.28473,0.13655,885.8246798284338,526.6873714553636)" style="transform-origin: 0px 0px 0px; opacity: 0.315789;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.11379,0.23728,-0.23728,0.11379,884.0442301319354,522.9749372478985)" style="transform-origin: 0px 0px 0px; opacity: 0.263158;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.09103,0.18982,-0.18982,0.09103,882.2637804354367,519.262503040433)" style="transform-origin: 0px 0px 0px; opacity: 0.210526;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.06827,0.14236,-0.14236,0.06827,880.4833307389383,515.5500688329677)" style="transform-origin: 0px 0px 0px; opacity: 0.157895;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.04551,0.09491,-0.09491,0.04551,878.7028810424397,511.8376346255021)" style="transform-origin: 0px 0px 0px; opacity: 0.105263;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.02275,0.04745,-0.04745,0.02275,876.9224313459412,508.1252004180368)" style="transform-origin: 0px 0px 0px; opacity: 0.0526316;"></ellipse>
</g>
<g class="cometGroup3" fill="#25C4F2">
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.43237,0.90169,-0.90169,-0.43237,835.4780983841789,239.3285359783934)" style="transform-origin: 0px 0px 0px; opacity: 1;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.40961,0.85423,-0.85423,-0.40961,837.5126367073972,235.08562870676786)" style="transform-origin: 0px 0px 0px; opacity: 0.947368;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.38686,0.80677,-0.80677,-0.38686,839.5471750306153,230.84272143514235)" style="transform-origin: 0px 0px 0px; opacity: 0.894737;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.3641,0.75932,-0.75932,-0.3641,841.5817133538336,226.5998141635169)" style="transform-origin: 0px 0px 0px; opacity: 0.842105;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.34134,0.71186,-0.71186,-0.34134,843.6162516770519,222.35690689189136)" style="transform-origin: 0px 0px 0px; opacity: 0.789474;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.31859,0.6644,-0.6644,-0.31859,845.65079000027,218.11399962026587)" style="transform-origin: 0px 0px 0px; opacity: 0.736842;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.29583,0.61694,-0.61694,-0.29583,847.6853283234883,213.8710923486404)" style="transform-origin: 0px 0px 0px; opacity: 0.684211;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.27307,0.56949,-0.56949,-0.27307,849.7198666467066,209.62818507701488)" style="transform-origin: 0px 0px 0px; opacity: 0.631579;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.25032,0.52203,-0.52203,-0.25032,851.7544049699248,205.38527780538936)" style="transform-origin: 0px 0px 0px; opacity: 0.578947;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.22756,0.47457,-0.47457,-0.22756,853.788943293143,201.14237053376382)" style="transform-origin: 0px 0px 0px; opacity: 0.526316;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.2048,0.42711,-0.42711,-0.2048,855.8234816163613,196.89946326213843)" style="transform-origin: 0px 0px 0px; opacity: 0.473684;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.18205,0.37966,-0.37966,-0.18205,857.8580199395795,192.6565559905128)" style="transform-origin: 0px 0px 0px; opacity: 0.421053;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.15929,0.3322,-0.3322,-0.15929,859.8925582627978,188.41364871888732)" style="transform-origin: 0px 0px 0px; opacity: 0.368421;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.13653,0.28474,-0.28474,-0.13653,861.927096586016,184.17074144726186)" style="transform-origin: 0px 0px 0px; opacity: 0.315789;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.11378,0.23728,-0.23728,-0.11378,863.9616349092342,179.92783417563632)" style="transform-origin: 0px 0px 0px; opacity: 0.263158;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.09102,0.18983,-0.18983,-0.09102,865.9961732324525,175.6849269040108)" style="transform-origin: 0px 0px 0px; opacity: 0.210526;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.06826,0.14237,-0.14237,-0.06826,868.0307115556707,171.44201963238532)" style="transform-origin: 0px 0px 0px; opacity: 0.157895;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.04551,0.09491,-0.09491,-0.04551,870.065249878889,167.1991123607598)" style="transform-origin: 0px 0px 0px; opacity: 0.105263;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(-0.02275,0.04745,-0.04745,-0.02275,872.0997882021072,162.95620508913436)" style="transform-origin: 0px 0px 0px; opacity: 0.0526316;"></ellipse>
</g>
<g class="cometGroup4" fill="#25C4F2">
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.43236,-0.90169,0.90169,0.43236,584.7521247366319,102.10140826562701)" style="transform-origin: 0px 0px 0px; opacity: 1;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.4096,-0.85424,0.85424,0.4096,582.8945505124354,105.97538996363846)" style="transform-origin: 0px 0px 0px; opacity: 0.947368;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.38685,-0.80678,0.80678,0.38685,581.036976288239,109.8493716616498)" style="transform-origin: 0px 0px 0px; opacity: 0.894737;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.36409,-0.75932,0.75932,0.36409,579.1794020640425,113.72335335966125)" style="transform-origin: 0px 0px 0px; opacity: 0.842105;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.34134,-0.71186,0.71186,0.34134,577.321827839846,117.5973350576727)" style="transform-origin: 0px 0px 0px; opacity: 0.789474;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.31858,-0.6644,0.6644,0.31858,575.4642536156496,121.47131675568403)" style="transform-origin: 0px 0px 0px; opacity: 0.736842;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.29582,-0.61695,0.61695,0.29582,573.606679391453,125.34529845369559)" style="transform-origin: 0px 0px 0px; opacity: 0.684211;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.27307,-0.56949,0.56949,0.27307,571.7491051672566,129.2192801517068)" style="transform-origin: 0px 0px 0px; opacity: 0.631579;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.25031,-0.52203,0.52203,0.25031,569.8915309430602,133.09326184971826)" style="transform-origin: 0px 0px 0px; opacity: 0.578947;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.22756,-0.47457,0.47457,0.22756,568.0339567188637,136.9672435477297)" style="transform-origin: 0px 0px 0px; opacity: 0.526316;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.2048,-0.42712,0.42712,0.2048,566.1763824946672,140.84122524574104)" style="transform-origin: 0px 0px 0px; opacity: 0.473684;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.18204,-0.37966,0.37966,0.18204,564.3188082704708,144.71520694375238)" style="transform-origin: 0px 0px 0px; opacity: 0.421053;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.15929,-0.3322,0.3322,0.15929,562.4612340462742,148.58918864176405)" style="transform-origin: 0px 0px 0px; opacity: 0.368421;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.13653,-0.28474,0.28474,0.13653,560.6036598220776,152.46317033977562)" style="transform-origin: 0px 0px 0px; opacity: 0.315789;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.11378,-0.23728,0.23728,0.11378,558.7460855978811,156.337152037787)" style="transform-origin: 0px 0px 0px; opacity: 0.263158;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.09102,-0.18983,0.18983,0.09102,556.8885113736847,160.2111337357985)" style="transform-origin: 0px 0px 0px; opacity: 0.210526;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.06826,-0.14237,0.14237,0.06826,555.0309371494882,164.08511543380985)" style="transform-origin: 0px 0px 0px; opacity: 0.157895;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.04551,-0.09491,0.09491,0.04551,553.1733629252918,167.95909713182107)" style="transform-origin: 0px 0px 0px; opacity: 0.105263;"></ellipse>
<ellipse cx="0" cy="0" rx="5" ry="2" data-svg-origin="0 0" transform="matrix(0.02275,-0.04745,0.04745,0.02275,551.3157887010954,171.8330788298324)" style="transform-origin: 0px 0px 0px; opacity: 0.0526316;"></ellipse>
</g>
</g>
<g opacity="0.2">
<line class="midLine" x1="158.74" y1="330.5" x2="791.71" y2="330.5" fill="none" stroke="#25c4f2" stroke-linecap="round" stroke-linejoin="round"></line>
<path class="dataPath1" d="M950,.5l-316.48,660L317,.5l-158.24,330L.5.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="url(#heroGrad)"></path>
<path class="dataPath2" d="M.5,660.5l158.24-330L317,660.5,633.47.5,950,660.5" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke="url(#heroGrad)"></path>
</g>
</g>
</svg>
CSS
#hero-svg {
-webkit-text-size-adjust: 100%;
line-height: 1.5;
font-family: GT America;
color: #2c2f33;
-webkit-font-smoothing: antialiased;
box-sizing: inherit;
border: 0 solid #a1aebb;
display: block;
vertical-align: middle;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
visibility: visible;
}
Javascript
let select = (s) => {
return document.querySelector(s);
},
selectAll = (s) => {
return document.querySelectorAll(s);
},
allCometCircles1 = selectAll('#hero-svg .cometGroup1 ellipse'),
allCometCircles2 = selectAll('#hero-svg .cometGroup2 ellipse'),
allCometCircles3 = selectAll('#hero-svg .cometGroup3 ellipse'),
allCometCircles4 = selectAll('#hero-svg .cometGroup4 ellipse'),
cometDuration1 = 20,
cometDuration2 = 24,
cometDuration3 = 21,
cometDuration4 = 23,
stagger = 0.045;
TweenMax.set('svg', {
visibility: 'visible'
})
let cometPath1 = MorphSVGPlugin.pathDataToBezier('M950,.5l-316.48,660L317,.5l-158.24,330L.5.5', {
offsetX: 0,
offsetY: 0
});
let cometPath2 = MorphSVGPlugin.pathDataToBezier('M.5,660.5l158.24-330L317,660.5,633.47.5,950,660.5', {
offsetX: 0,
offsetY: 0
});
TweenMax.set('ellipse', {
transformOrigin: '50% 50%'
})
let allCometsTl = new TimelineMax();
let comet1Tl = new TimelineMax({repeat: -1});
comet1Tl.staggerFromTo(allCometCircles1, cometDuration1, {
cycle: {
scale: function (i, target) {
return 1 - ((i/allCometCircles1.length) )
},
alpha: function (i, target) {
return 1 - ((i/allCometCircles1.length) )
}
}
}, {
bezier: {
type: "cubic",
values: cometPath1,
autoRotate: true
},
ease: Linear.easeNone
}, stagger).seek(41);
let comet3Tl = new TimelineMax({repeat: -1});
comet3Tl.staggerFromTo(allCometCircles3, cometDuration3, {
cycle: {
scale: function (i, target) {
return 1 - ((i/allCometCircles3.length) )
},
alpha: function (i, target) {
return 1 - ((i/allCometCircles3.length) )
}
}
}, {
bezier: {
type: "cubic",
values: cometPath1,
autoRotate: true
},
ease: Linear.easeNone
}, stagger).seek(28);
let comet2Tl = new TimelineMax({repeat: -1});
comet2Tl.staggerFromTo(allCometCircles2, cometDuration2, {
cycle: {
scale: function (i, target) {
return 1 - ((i/allCometCircles2.length) )
},
alpha: function (i, target) {
return 1 - ((i/allCometCircles2.length) )
}
}
}, {
bezier: {
type: "cubic",
values: cometPath2,
autoRotate: true
},
ease: Linear.easeNone
}, stagger).seek(60);
let comet4Tl = new TimelineMax({repeat: -1});
comet4Tl.staggerFromTo(allCometCircles4, cometDuration4, {
cycle: {
scale: function (i, target) {
return 1 - ((i/allCometCircles4.length) )
},
alpha: function (i, target) {
return 1 - ((i/allCometCircles4.length) )
}
}
}, {
bezier: {
type: "cubic",
values: cometPath2,
autoRotate: true
},
ease: Linear.easeNone
}, stagger).seek(23);
allCometsTl.add(comet1Tl)
.add(comet2Tl, 0)
.add(comet3Tl, 0)
.add(comet4Tl, 0)
allCometsTl.seek(100);
allCometsTl.timeScale(3)
Related Tags
Add Comment
Other Items in svg
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript