Program:
<!DOCTYPE html>
<html>
<head>
<title>Wave Animation</title>
</head>
<body>
<svg width="340" height="340" viewbox="0 0 340 340">
<circle cx="170" cy="170" r="170" fill="#0080fe"/>
<defs>
<linearGradient id="sky" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4ae" />
<stop offset="20%" stop-color="#8df" />
<stop offset="60%" stop-color="#cef" />
</linearGradient>
</defs>
<circle cx="170" cy="170" r="165" fill="url(#sky)" stroke="#0080fe" />
<!-- wave_back -->
<path fill="#00d8ff">
<animate
id="back_1"
attributeName="d"
values="m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 6.8326332,185.21556 79.896672,121.6182 174.55119,171.86364 c 76.51832,40.61821 158.59628,9.61898 158.49981,16.54922 z;
m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 c -0.2183668,-6.92823 95.84567,31.47441 167.50019,-20.28015 70.22788,-50.72413 158.59628,9.61898 158.49981,16.54922 z"
begin="0; back_2.end"
dur="2.5s"
/>
<animate
id="back_2"
attributeName="d"
values="m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 c -0.2183668,-6.92823 95.84567,31.47441 167.50019,-20.28015 70.22788,-50.72413 158.59628,9.61898 158.49981,16.54922 z;
m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 6.8326332,185.21556 79.896672,121.6182 174.55119,171.86364 c 76.51832,40.61821 158.59628,9.61898 158.49981,16.54922 z"
begin="back_1.end"
dur="2.5s"
/>
</path>
<!-- boat -->
<g>
<g>
<path fill="#6b2000" d="m 122,168.0417 h 99 l -12,16 h -70 z" />
<path fill="#e00" d="m 172,113.0417 v 0 53 h -52 z" />
<path fill="#f00" d="m 175,102.041702 v 0 l 50,63.999998 h -50 z"/>
<animateTransform
attributeName="transform"
type="translate"
values="0 10; -25 -25; 0 10"
begin="0s"
dur="5s"
repeatCount="indefinite"
/>
</g>
<animateTransform
attributeName="transform"
type="rotate"
values="-5; 5; -5"
begin="0s"
dur="5s"
repeatCount="indefinite"
/>
</g>
<!-- wave_front -->
<defs>
<linearGradient id="wave_frnt" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#20efff" />
<stop offset="100%" stop-color="#0af" />
</linearGradient>
</defs>
<path fill="url(#wave_frnt)">
<animate
id="front_1"
attributeName="d"
values="m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 c -0.2183668,-6.92823 73.693275,22.97511 163.50019,-17.28015 77.94993,-34.94046 162.59628,6.61898 162.49981,13.54922 z;
m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 6.8326332,185.21556 93.744275,131.1189 170.55119,174.86364 c 74.22788,42.27587 162.59628,6.61898 162.49981,13.54922 z"
begin="0s; front_2.end"
dur="2.5s"
/>
<animate
id="front_2"
attributeName="d"
values="m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 6.8326332,185.21556 93.744275,131.1189 170.55119,174.86364 c 74.22788,42.27587 162.59628,6.61898 162.49981,13.54922 z;
m 333.051,188.41286 c -1,71.8405 -62.68587,144.07838 -162.49981,146.63784 C 72.705084,337.5597 9.0510001,255.59873 7.051,192.14379 c -0.2183668,-6.92823 73.693275,22.97511 163.50019,-17.28015 77.94993,-34.94046 162.59628,6.61898 162.49981,13.54922 z"
begin="front_1.end"
dur="2.5s"
/>
</path>
</svg>
</body>
</html>
OUTPUT:
Post a Comment