Add animation feature to the waves
rydkvist opened this issue · comments
It would be really nice to have an animation for the waves, preferably an animation that the user can edit the speed of. 😄
Here are some visual examples that I found:
Nice project otherwise! 😃
@Nojze yeah it would be a great addition.
Thanks for the suggestion.
I'll wait if anyone wants to pick this one or i'll try to pull it up myself.
Hey, I would love to make it ! Sounds amazing :D
@setheal sure go ahead
Hey @anup-a I think I'm not gonna make it, it's my first time playing with svg animation and it's way harder than I thought. Keep me updated if someone make it I would like to see how to do it in the future. :) I'm really sorry to not be able to help you with this.
@setheal no issues.....
Are you working on this @anup-a ?
If SMIL Animation is what we are looking for, I believe that the <animate> SVG element would just do the trick. Here is the MDN link about it, and we already have some pretty neat snippets on how to implement animated wave with SMIL Animation, like this one.
I was using the same technique described above to write animated waves for a drift bottle event page. I will put it on github page or somewhere else if anyone is interested in.
Here is an example:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
height="100%" width="100%"
viewBox="0 0 1440 600" preserveAspectRatio="none"
id="foreground">
<defs>
<linearGradient id="coldGradient">
<stop offset="5%" stop-color="#00d084" stop-opacity="0.5"></stop>
<stop offset="95%" stop-color="#0693e3" stop-opacity="0.66"></stop>
</linearGradient>
</defs>
<path d="M 0,600 C 0,600 0,360 0,360 C 54.20213549337261,343.78148011782037 108.40427098674522,327.5629602356407 172,329 C 235.59572901325478,330.4370397643593 308.58505154639175,349.5296391752577 375,360 C 441.41494845360825,370.4703608247423 501.25552282768774,372.3184830633284 559,379 C 616.7444771723123,385.6815169366716 672.3928571428571,397.1964285714286 738,395 C 803.6071428571429,392.8035714285714 879.1730486008837,376.89580265095725 928,370 C 976.8269513991163,363.10419734904275 998.9149484536083,365.22036082474233 1050,375 C 1101.0850515463917,384.77963917525767 1181.1671575846833,402.2227540500736 1251,401 C 1320.8328424153167,399.7772459499264 1380.4164212076585,379.8886229749632 1440,360 C 1440,360 1440,600 1440,600 Z" stroke="none" stroke-width="0" fill="url(#coldGradient)">
<animate
repeatCount="indefinite"
attributeName="d"
calcMode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="12s"
values="M 0,600 C 0,600 0,360 0,360 C 54.20213549337261,343.78148011782037 108.40427098674522,327.5629602356407 172,329 C 235.59572901325478,330.4370397643593 308.58505154639175,349.5296391752577 375,360 C 441.41494845360825,370.4703608247423 501.25552282768774,372.3184830633284 559,379 C 616.7444771723123,385.6815169366716 672.3928571428571,397.1964285714286 738,395 C 803.6071428571429,392.8035714285714 879.1730486008837,376.89580265095725 928,370 C 976.8269513991163,363.10419734904275 998.9149484536083,365.22036082474233 1050,375 C 1101.0850515463917,384.77963917525767 1181.1671575846833,402.2227540500736 1251,401 C 1320.8328424153167,399.7772459499264 1380.4164212076585,379.8886229749632 1440,360 C 1440,360 1440,600 1440,600 Z;M 0,600 C 0,600 0,360 0,360 C 61.757547864506606,349.3378129602356 123.51509572901321,338.67562592047125 174,342 C 224.4849042709868,345.32437407952875 263.6971649484537,362.6353092783505 333,364 C 402.3028350515463,365.3646907216495 501.6962444771723,350.7831369661267 567,357 C 632.3037555228277,363.2168630338733 663.5178571428572,390.2321428571429 711,396 C 758.4821428571428,401.7678571428571 822.2323269513992,386.2882916053019 879,380 C 935.7676730486008,373.7117083946981 985.5528350515465,376.6146907216495 1053,383 C 1120.4471649484535,389.3853092783505 1205.5563328424155,399.2529455081002 1273,396 C 1340.4436671575845,392.7470544918998 1390.2218335787923,376.3735272459499 1440,360 C 1440,360 1440,600 1440,600 Z;M 0,600 C 0,600 0,360 0,360 C 56.98122238586156,330.0913107511046 113.96244477172311,300.18262150220914 171,319 C 228.0375552282769,337.81737849779086 285.1314432989691,405.36082474226805 348,404 C 410.8685567010309,402.63917525773195 479.5117820324007,332.3740795287187 534,329 C 588.4882179675993,325.6259204712813 628.8214285714284,389.1428571428571 692,395 C 755.1785714285716,400.8571428571429 841.2025036818852,349.05449189985274 909,329 C 976.7974963181148,308.94550810014726 1026.3685567010307,320.63917525773195 1082,330 C 1137.6314432989693,339.36082474226805 1199.3232695139911,346.38880706921947 1260,351 C 1320.6767304860089,355.61119293078053 1380.3383652430043,357.8055964653903 1440,360 C 1440,360 1440,600 1440,600 Z;M 0,600 C 0,600 0,360 0,360 C 73.74815905743739,379.8479381443299 147.49631811487478,399.6958762886598 209,385 C 270.5036818851252,370.3041237113402 319.7628865979382,321.06443298969066 366,315 C 412.2371134020618,308.93556701030934 455.45213549337245,346.04639175257734 524,354 C 592.5478645066275,361.95360824742266 686.4285714285716,340.75 745,328 C 803.5714285714284,315.25 826.8335787923415,310.95360824742266 876,332 C 925.1664212076585,353.04639175257734 1000.2371134020618,399.4355670103092 1077,394 C 1153.7628865979382,388.5644329896908 1232.217967599411,331.3041237113402 1293,317 C 1353.782032400589,302.6958762886598 1396.8910162002944,331.3479381443299 1440,360 C 1440,360 1440,600 1440,600 Z;M 0,600 C 0,600 0,360 0,360 C 54.20213549337261,343.78148011782037 108.40427098674522,327.5629602356407 172,329 C 235.59572901325478,330.4370397643593 308.58505154639175,349.5296391752577 375,360 C 441.41494845360825,370.4703608247423 501.25552282768774,372.3184830633284 559,379 C 616.7444771723123,385.6815169366716 672.3928571428571,397.1964285714286 738,395 C 803.6071428571429,392.8035714285714 879.1730486008837,376.89580265095725 928,370 C 976.8269513991163,363.10419734904275 998.9149484536083,365.22036082474233 1050,375 C 1101.0850515463917,384.77963917525767 1181.1671575846833,402.2227540500736 1251,401 C 1320.8328424153167,399.7772459499264 1380.4164212076585,379.8886229749632 1440,360 C 1440,360 1440,600 1440,600 Z;">
</animate>
</path>
<path d="M 0,600 C 0,600 0,480 0,480 C 59.828424153166424,490.9074005891016 119.65684830633285,501.8148011782032 175,512 C 230.34315169366715,522.1851988217968 281.20103092783506,531.6481958762888 348,513 C 414.79896907216494,494.35180412371125 497.53902798232696,447.5924153166421 557,438 C 616.460972017673,428.4075846833579 652.6428571428571,455.98214285714295 700,472 C 747.3571428571429,488.01785714285705 805.8895434462444,492.4790132547865 874,494 C 942.1104565537556,495.5209867452135 1019.7989690721652,494.1018041237113 1090,482 C 1160.2010309278348,469.8981958762887 1222.9145802650958,447.1137702503682 1280,445 C 1337.0854197349042,442.8862297496318 1388.5427098674522,461.44311487481593 1440,480 C 1440,480 1440,600 1440,600 Z" stroke="none" stroke-width="0" fill="url(#coldGradient)">
<animate
repeatCount="indefinite"
attributeName="d"
calcMode="spline"
keyTimes="0; 0.25; 0.5; 0.75; 1"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="8s"
values="M 0,600 C 0,600 0,480 0,480 C 59.828424153166424,490.9074005891016 119.65684830633285,501.8148011782032 175,512 C 230.34315169366715,522.1851988217968 281.20103092783506,531.6481958762888 348,513 C 414.79896907216494,494.35180412371125 497.53902798232696,447.5924153166421 557,438 C 616.460972017673,428.4075846833579 652.6428571428571,455.98214285714295 700,472 C 747.3571428571429,488.01785714285705 805.8895434462444,492.4790132547865 874,494 C 942.1104565537556,495.5209867452135 1019.7989690721652,494.1018041237113 1090,482 C 1160.2010309278348,469.8981958762887 1222.9145802650958,447.1137702503682 1280,445 C 1337.0854197349042,442.8862297496318 1388.5427098674522,461.44311487481593 1440,480 C 1440,480 1440,600 1440,600 Z;M 0,600 C 0,600 0,480 0,480 C 45.64083210603829,499.5261413843888 91.28166421207658,519.0522827687776 160,513 C 228.71833578792342,506.9477172312224 320.5141752577319,475.31701030927843 392,466 C 463.4858247422681,456.68298969072157 514.6616347569956,469.67967599410906 561,470 C 607.3383652430044,470.32032400589094 648.8392857142857,457.9642857142856 709,448 C 769.1607142857143,438.0357142857144 847.9812223858617,430.4631811487482 916,449 C 984.0187776141383,467.5368188512518 1041.235824742268,512.1829896907217 1094,524 C 1146.764175257732,535.8170103092783 1195.0754786450664,514.8048600883652 1252,502 C 1308.9245213549336,489.1951399116348 1374.462260677467,484.5975699558174 1440,480 C 1440,480 1440,600 1440,600 Z;M 0,600 C 0,600 0,480 0,480 C 65.96336524300442,473.7030559646539 131.92673048600884,467.40611192930777 190,466 C 248.07326951399116,464.59388807069223 298.2564432989691,468.0786082474227 351,464 C 403.7435567010309,459.9213917525773 459.0474963181149,448.27945508100134 529,456 C 598.9525036818851,463.72054491899866 683.5535714285714,490.80357142857144 746,495 C 808.4464285714286,499.19642857142856 848.7382179675996,480.5062592047128 897,473 C 945.2617820324004,465.4937407952872 1001.4935567010309,469.1713917525773 1063,483 C 1124.506443298969,496.8286082474227 1191.287555228277,520.808173784978 1255,522 C 1318.712444771723,523.191826215022 1379.3562223858617,501.595913107511 1440,480 C 1440,480 1440,600 1440,600 Z;M 0,600 C 0,600 0,480 0,480 C 59.78368924889544,479.59167893961705 119.56737849779088,479.18335787923417 181,480 C 242.43262150220912,480.81664212076583 305.5141752577319,482.85824742268045 360,492 C 414.4858247422681,501.14175257731955 460.37592047128135,517.3836524300441 515,513 C 569.6240795287187,508.61634756995585 632.9821428571429,483.6071428571429 701,488 C 769.0178571428571,492.3928571428571 841.6955081001472,526.1877761413843 901,521 C 960.3044918998528,515.8122238586157 1006.2358247422678,471.6417525773196 1066,454 C 1125.7641752577322,436.3582474226804 1199.3611929307806,445.2452135493372 1264,454 C 1328.6388070692194,462.7547864506628 1384.3194035346096,471.3773932253314 1440,480 C 1440,480 1440,600 1440,600 Z;M 0,600 C 0,600 0,480 0,480 C 59.828424153166424,490.9074005891016 119.65684830633285,501.8148011782032 175,512 C 230.34315169366715,522.1851988217968 281.20103092783506,531.6481958762888 348,513 C 414.79896907216494,494.35180412371125 497.53902798232696,447.5924153166421 557,438 C 616.460972017673,428.4075846833579 652.6428571428571,455.98214285714295 700,472 C 747.3571428571429,488.01785714285705 805.8895434462444,492.4790132547865 874,494 C 942.1104565537556,495.5209867452135 1019.7989690721652,494.1018041237113 1090,482 C 1160.2010309278348,469.8981958762887 1222.9145802650958,447.1137702503682 1280,445 C 1337.0854197349042,442.8862297496318 1388.5427098674522,461.44311487481593 1440,480 C 1440,480 1440,600 1440,600 Z;">
</animate>
</path>
</svg>I still cannot get this to move on safari (according to one of my schoolmates), though
Edit:
My bad. After removing white space before semicolon in keyTimes and keySplines attributes, it works like a charm in safari.
@kotAPI Not working now. Busy with something else. Would try to close this as soon as possible.
@chrysocolla great would look into this.
You could try & PR. I would be needing help in this one.
Feel free to create PR.