<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2100 2100" style="enable-background:new 0 0 2100 2100;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#6EE4FF;stroke-width:8.3698;stroke-miterlimit:10;}
.st1{fill:none;stroke:#CFF6FF;stroke-width:8.0878;stroke-miterlimit:10;}
.st2{fill:url(#SVGID_1_);}
.st3{fill:#6EE4FF;}
.st4{fill:url(#SVGID_2_);}
.st5{opacity:0.5;}
.st6{fill:#C0FFFF;}
.st7{fill:#6EECFF;}
.st8{opacity:0.502;fill:#FFFFFF;}
.st9{fill:#FFFFFF;}
.st10{fill:none;stroke:#FFFFFF;stroke-width:7.9628;stroke-miterlimit:10;}
.st11{fill:none;stroke:#FFFFFF;stroke-width:6.6357;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st12{fill:url(#SVGID_3_);}
.st13{fill:#FFD99C;}
.st14{fill:#FF598B;}
.st15{opacity:0.502;}
.st16{fill:#FF9442;}
.st17{fill:none;stroke:#FFFFFF;stroke-width:5.3086;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st18{opacity:0.251;fill:#007D99;}
</style>
<g id="Background">
<g>
<circle class="st0" cx="1049.03" cy="1050.5" r="723.29"/>
<circle class="st1" cx="1049.03" cy="1050.5" r="773.06"/>
</g>
<radialGradient id="SVGID_1_" cx="1049.0287" cy="1050.4984" r="688.1226" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#C7FBFF"/>
<stop offset="0.37" style="stop-color:#C5FAFF"/>
<stop offset="0.5376" style="stop-color:#BEF9FF"/>
<stop offset="0.6642" style="stop-color:#B1F5FF"/>
<stop offset="0.7704" style="stop-color:#9FF0FF"/>
<stop offset="0.8637" style="stop-color:#87EAFF"/>
<stop offset="0.9466" style="stop-color:#6BE3FF"/>
<stop offset="1" style="stop-color:#54DDFF"/>
</radialGradient>
<circle class="st2" cx="1049.03" cy="1050.5" r="688.12"/>
<g>
<circle class="st3" cx="586" cy="552.3" r="70.86"/>
<circle class="st3" cx="1269.25" cy="1683.32" r="91"/>
<circle class="st3" cx="1462.53" cy="1703.45" r="19.81"/>
<circle class="st3" cx="1756.96" cy="1472.07" r="27.21"/>
<circle class="st3" cx="613.2" cy="300.6" r="27.21"/>
<circle class="st3" cx="1796.97" cy="738" r="19.81"/>
<circle class="st3" cx="432.67" cy="558.63" r="19.81"/>
<circle class="st3" cx="1602.34" cy="431.12" r="32.51"/>
<circle class="st3" cx="551.58" cy="1639.39" r="34.41"/>
<circle class="st3" cx="452.48" cy="1400.51" r="51.76"/>
<circle class="st3" cx="1408.31" cy="463.64" r="34.41"/>
<circle class="st3" cx="718.88" cy="1654" r="49.46"/>
<circle class="st3" cx="1602.34" cy="648.31" r="89.69"/>
</g>
</g>
<g id="Whale">
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="606.72" y1="1059.0825" x2="1003.0895" y2="1524.8945" gradientTransform="matrix(0.9447 -0.3279 0.3279 0.9447 -369.811 268.693)">
<stop offset="0" style="stop-color:#04B2D9"/>
<stop offset="1" style="stop-color:#04B2D9;stop-opacity:0.1"/>
</linearGradient>
<path class="st4" d="M967.81,1430.49c-4.85,3.81-9.74,7.45-14.62,10.85c-25.89,18.04-64.13,17.15-87.79-3.72
c-95.75-84.43-124.77-179.93-136.18-268.17c52.05,19.66,51.66,80.07,67.17,15.13c15.27-63.95-48.28-88.12-73.77-129.81
c-0.71-46.32-0.86-88.1-8.91-122.15c-8.03-33.96-78.71-97.77-117.42-96.98c-51.36,1.05-127.31,62.6-134.74,131.74
c-4.67,43.47-0.71,100.76,12.34,161.6c-19.57,39.77-49.19,79.11-23.22,131.66c31.12,62.99,20.56,6.58,52.65-37.77
c47.34,111.59,167.14,197.87,352.85,243.71c57.83,14.28,63.52,50.36,90.94,103.25c6.19,11.93,27.17,21.61,31.09,12.32
c6.99-16.58-0.72-57.99,34.31-96.38c0,0-17.37-22.33,40.11-60.69C1095.93,1396.17,1014.55,1393.82,967.81,1430.49z"/>
<g class="st5">
<path class="st6" d="M914.86,1487.66c15.41,17.76,50.58,92.45,57.87,78.83c5.54-10.36-9.04-60.65,18.05-81.15
c0,0-8.12-31.39,29.41-56.43c28.29-18.88-27.29-2.6-58.58,20.34c-19.16,14.05-30.71,18.06-43.66,20.7
C899.58,1473.69,908.95,1480.84,914.86,1487.66z"/>
<path class="st7" d="M494.47,1080.21c12.23,54.55-52.78,90.98-29.01,159.46c16.16,46.56,7.66-28.54,56.67-62.2
C598.84,1124.8,494.47,1080.21,494.47,1080.21z"/>
<path class="st7" d="M716.84,1046.85c7.27,49.87,73.74,59.62,75.76,124.94c1.38,44.41-15.64-21.57-67.74-34.13
C643.31,1118,716.84,1046.85,716.84,1046.85z"/>
</g>
<g>
<path class="st7" d="M834.38,1407.42c-4.62-5.7-7.19-9.43-7.19-9.43C830.03,1401.35,832.41,1404.49,834.38,1407.42
c8.75,10.8-0.29-0.61-17.81-21.91c-137-166.54-82.14-337.19-106.45-440.04c-7.46-31.55-73.12-90.82-109.08-90.09
c-47.71,0.97-113.38,73.76-115.61,113.84c-6.48,116.4,49.58,353.11,246.18,458.84c21.99,11.82,45.64,20.33,70.23,24.65
C848.72,1460.95,891.7,1468.88,834.38,1407.42z"/>
</g>
<g>
<path class="st8" d="M808.01,1391.29c-4.01-5.28-6.26-8.73-6.26-8.73C804.22,1385.68,806.29,1388.59,808.01,1391.29
c7.6,10.01-0.26-0.56-15.46-20.3c-118.91-154.37-77.83-307.17-100.95-400.84c-7.09-28.74-63.52-84.14-93.5-84.47
c-39.79-0.44-92.58,63.57-93.34,99.76c-2.2,105.08,51.1,320.67,218.07,421.69c18.67,11.3,38.65,19.64,59.28,24.22
C821.46,1440.09,857.54,1448.45,808.01,1391.29z"/>
</g>
<path class="st8" d="M589.45,899.02c-90.12,12.4-34.38,247.13,14.37,249.09C652.57,1150.07,679.57,886.62,589.45,899.02z"/>
<path class="st9" d="M590.36,909.73c-48.53,6.68-18.52,133.08,7.74,134.14S638.88,903.05,590.36,909.73z"/>
<path class="st9" d="M603.15,1103.12c-13.35-2.84,11.26,84.86,19.06,89.47C630.02,1197.2,616.5,1105.96,603.15,1103.12z"/>
</g>
<g id="Bubbles">
<circle class="st10" cx="752.69" cy="420.02" r="92.82"/>
<circle class="st10" cx="991.58" cy="1715.31" r="92.82"/>
<circle class="st10" cx="1737.15" cy="1192.42" r="92.82"/>
<circle class="st10" cx="975.65" cy="453.12" r="41.8"/>
<circle class="st10" cx="710.22" cy="593.8" r="20.57"/>
<circle class="st10" cx="1567.56" cy="1387.43" r="20.57"/>
<circle class="st10" cx="1189.65" cy="379.96" r="38.15"/>
<circle class="st10" cx="1411.62" cy="1540.06" r="38.15"/>
<circle class="st10" cx="1737.15" cy="971.37" r="38.15"/>
<circle class="st10" cx="412.86" cy="991.94" r="20.57"/>
<circle class="st10" cx="639.3" cy="1477.67" r="14.6"/>
<circle class="st10" cx="1546.98" cy="1241.44" r="10.62"/>
<circle class="st10" cx="1422.23" cy="573.23" r="10.62"/>
<circle class="st10" cx="1633.72" cy="815.74" r="10.62"/>
</g>
<circle id="Ripple-01" class="st11" cx="1049.03" cy="1050.5" r="216.32"/>
<circle id="Ripple-02" class="st11" cx="1049.03" cy="1050.5" r="216.32"/>
<circle id="Ripple-03" class="st11" cx="1049.03" cy="1050.5" r="216.32"/>
<g id="Donut">
<g>
<g>
<g>
<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="873.1497" y1="951.4332" x2="1246.1418" y2="1170.7977">
<stop offset="0" style="stop-color:#04B2D9"/>
<stop offset="1" style="stop-color:#04B2D9;stop-opacity:0.251"/>
</linearGradient>
<path class="st12" d="M1059.65,844.79c-119.47,0-216.32,96.85-216.32,216.32s96.85,216.32,216.32,216.32
c119.47,0,216.32-96.85,216.32-216.32S1179.12,844.79,1059.65,844.79z M1059.65,1146.72c-47.28,0-85.6-38.32-85.6-85.6
s38.32-85.6,85.6-85.6c47.28,0,85.6,38.32,85.6,85.6S1106.92,1146.72,1059.65,1146.72z"/>
</g>
</g>
<g>
<g>
<path class="st13" d="M1049.03,834.17c-119.47,0-216.32,96.85-216.32,216.32s96.85,216.32,216.32,216.32
c119.47,0,216.32-96.85,216.32-216.32S1168.5,834.17,1049.03,834.17z M1049.03,1136.1c-47.28,0-85.6-38.32-85.6-85.6
c0-47.28,38.32-85.6,85.6-85.6c47.28,0,85.6,38.32,85.6,85.6C1134.63,1097.77,1096.3,1136.1,1049.03,1136.1z"/>
</g>
</g>
<g>
<path class="st14" d="M1049.03,849.44c-111.04,0-201.06,90.02-201.06,201.06s90.02,201.06,201.06,201.06
s201.06-90.02,201.06-201.06S1160.07,849.44,1049.03,849.44z M1049.03,1152.69c-56.44,0-102.19-45.75-102.19-102.19
c0-56.44,45.75-102.19,102.19-102.19c56.44,0,102.19,45.75,102.19,102.19C1151.22,1106.94,1105.47,1152.69,1049.03,1152.69z"/>
</g>
<g class="st15">
<g>
<path class="st16" d="M1049.03,834.17c-119.47,0-216.32,96.85-216.32,216.32s96.85,216.32,216.32,216.32
c119.47,0,216.32-96.85,216.32-216.32S1168.5,834.17,1049.03,834.17z M1049.03,1233.64c-101.15,0-183.15-82-183.15-183.15
s82-183.15,183.15-183.15s183.15,82,183.15,183.15S1150.18,1233.64,1049.03,1233.64z"/>
</g>
</g>
<g class="st15">
<g>
<path class="st9" d="M896.87,1060.06c0-87.82,71.19-159.02,159.02-159.02c87.82,0,159.02,71.19,159.02,159.02
c0,2.51-0.07,5-0.18,7.49c0.57-5.62,0.87-11.31,0.87-17.08c0-91.99-74.57-166.56-166.56-166.56s-166.56,74.57-166.56,166.56
c0,78.98,54.98,145.12,128.75,162.24C945.14,1193.41,896.87,1132.38,896.87,1060.06z"/>
</g>
</g>
<g class="st15">
<g>
<path class="st16" d="M1049.03,936.36c-63.03,0-114.13,51.1-114.13,114.13s51.1,114.13,114.13,114.13s114.13-51.1,114.13-114.13
S1112.06,936.36,1049.03,936.36z M1049.03,1137.58c-48.09,0-87.08-38.99-87.08-87.08s38.99-87.08,87.08-87.08
s87.08,38.99,87.08,87.08S1097.12,1137.58,1049.03,1137.58z"/>
</g>
</g>
</g>
<g>
<path class="st17" d="M888.07,986.39c0.08,8.66,3.22,17.25,8.74,23.92"/>
<path class="st17" d="M913.94,1098.42c-5.45,4.61-11.58,8.42-18.12,11.26"/>
<path class="st17" d="M951.81,894.45c6.97,1.83,12.97,7.02,15.77,13.66"/>
<path class="st17" d="M897.55,942.37c6.38,0.34,12.73,1.4,18.88,3.15"/>
<path class="st17" d="M935.03,1004.07c-4.86,4.25-8.72,9.62-11.21,15.58"/>
<path class="st17" d="M944.07,1128.66c2.97,7.31,2.23,16.02-1.95,22.71"/>
<path class="st17" d="M993.78,1224.7c-2.65-4.77-5.29-9.54-7.94-14.31C987.33,1209.53,988.19,1207.71,993.78,1224.7z"/>
<path class="st17" d="M1002.31,1176.69c4.54-1.48,9.08-2.95,13.62-4.43"/>
<path class="st17" d="M962.04,954.73c4.02,4.64,7.5,9.74,10.36,15.18"/>
<path class="st17" d="M1054.3,875.47c1.63,4.61,2.55,9.48,2.71,14.37C1055.9,890.45,1054.79,891.05,1054.3,875.47z"/>
<path class="st17" d="M1001.88,922.02c3.8-4.12,8.95-6.96,14.46-7.98"/>
<path class="st17" d="M1201.81,979.05c0.3,6.09-1.44,12.27-4.87,17.31"/>
<path class="st17" d="M1167.94,1048.61c6.58,2.3,11.92,7.87,13.93,14.54"/>
<path class="st17" d="M1088.38,1186.75c1.84,7.06,4.53,13.9,7.98,20.33"/>
<path class="st17" d="M890.76,1053.75c4.91,3.02,9.81,6.04,14.72,9.06"/>
<path class="st17" d="M1137.18,901.74c3.71,5.63,3.01,13.77-1.6,18.69"/>
<path class="st17" d="M1093.91,951.88c-1.43-6.49-3.61-12.82-6.49-18.81"/>
<path class="st17" d="M1136.53,976.35c6.76-4.58,13.51-9.17,20.27-13.75"/>
<path class="st17" d="M1191.66,1121.76c2.67,7.41,3.17,15.58,1.4,23.26"/>
<path class="st17" d="M1111.03,1134.08c4.48,7.18,9.9,13.78,16.08,19.56"/>
<path class="st17" d="M1137.67,1204.4c4.35-6.12,9.54-11.65,15.37-16.38"/>
<path class="st17" d="M1059.37,1216.16c-4.58,4.32-6.9,10.92-6.03,17.16"/>
<path class="st17" d="M1137.01,1097.94c4.97-2.38,9.94-4.75,14.91-7.13C1153.28,1090.16,1155.71,1090.23,1137.01,1097.94z"/>
<path class="st17" d="M1215.06,1046.41c3.11,7.5,5.6,15.27,7.43,23.18C1223.22,1072.78,1223.31,1077.07,1215.06,1046.41z"/>
<path class="st17" d="M1211.04,1111.78c7.28-2.76,13.73-7.68,18.31-13.97"/>
<path class="st17" d="M876.61,1080.35c5.85,2.45,11.7,4.91,17.55,7.36"/>
</g>
</g>
<g id="Birds">
<path class="st18" d="M1231.25,1290.5c5.35-5.35,4.79-16.2,4.79-16.2s-23.56-12.42-27.41-19.7c-3.86-7.28-2.17-34.05,20.87-45.1
c14.61-7,56.17-35.24,54.06-38.21c-2.11-2.97-52.01,2.99-68.88,8.83s-23.62,17.08-28.93,31.38c-5.31,14.3-15.04,9.47-17.39,6.69
s-8.35-3.64-13.28-3.86c0.21,4.93,1.07,10.92,3.86,13.28c2.78,2.36,7.62,12.09-6.69,17.39c-14.3,5.31-25.54,12.06-31.38,28.93
c-5.84,16.86-11.8,66.77-8.83,68.88c2.97,2.11,31.21-39.45,38.21-54.06c11.05-23.04,37.81-24.73,45.1-20.87s19.7,27.41,19.7,27.41
S1225.9,1295.86,1231.25,1290.5z"/>
<path class="st18" d="M1638.64,1369.39c5.26-5.26,4.71-15.91,4.71-15.91s-23.14-12.2-26.93-19.35s-2.13-33.44,20.5-44.29
c14.35-6.88,55.17-34.62,53.1-37.53s-51.09,2.94-67.65,8.67s-23.2,16.77-28.41,30.82s-14.77,9.3-17.08,6.57s-8.2-3.58-13.04-3.79
c0.21,4.84,1.05,10.73,3.79,13.04s7.48,11.87-6.57,17.08s-25.09,11.85-30.82,28.41s-11.59,65.58-8.67,67.65s30.65-38.75,37.53-53.1
c10.85-22.63,37.14-24.29,44.29-20.5s19.35,26.93,19.35,26.93S1633.38,1374.65,1638.64,1369.39z"/>
<path class="st18" d="M1291.6,1541.87c4.63-4.63,4.14-13.99,4.14-13.99s-20.35-10.73-23.68-17.02
c-3.33-6.29-1.88-29.41,18.03-38.95c12.62-6.05,48.52-30.44,46.7-33.01c-1.82-2.56-44.93,2.58-59.5,7.63s-20.4,14.75-24.99,27.11
s-12.99,8.18-15.03,5.77c-2.04-2.41-7.22-3.15-11.47-3.33c0.19,4.26,0.93,9.44,3.33,11.47c2.41,2.04,6.58,10.44-5.77,15.03
s-22.06,10.42-27.11,24.99c-5.04,14.57-10.19,57.67-7.63,59.5c2.56,1.82,26.96-34.08,33.01-46.7c9.54-19.9,32.66-21.36,38.95-18.03
c6.29,3.33,17.02,23.68,17.02,23.68S1286.98,1546.49,1291.6,1541.87z"/>
<path class="st18" d="M1431.13,1279.4c3.79-3.79,3.39-11.46,3.39-11.46s-16.67-8.79-19.4-13.94c-2.73-5.15-1.54-24.09,14.77-31.91
c10.34-4.96,39.74-24.94,38.25-27.03c-1.49-2.1-36.8,2.12-48.73,6.25c-11.93,4.13-16.71,12.08-20.46,22.2
c-3.76,10.12-10.64,6.7-12.31,4.73c-1.67-1.97-5.91-2.58-9.39-2.73c0.15,3.49,0.76,7.73,2.73,9.39c1.97,1.67,5.39,8.55-4.73,12.31
c-10.12,3.76-18.07,8.53-22.2,20.46c-4.13,11.93-8.35,47.24-6.25,48.73c2.1,1.49,22.08-27.91,27.03-38.25
c7.82-16.3,26.75-17.49,31.91-14.77c5.15,2.73,13.94,19.4,13.94,19.4S1427.35,1283.18,1431.13,1279.4z"/>
<path class="st18" d="M1120.28,1462.13c3.79-3.79,3.39-11.46,3.39-11.46s-16.67-8.79-19.4-13.94c-2.73-5.15-1.54-24.09,14.77-31.91
c10.34-4.96,39.74-24.94,38.25-27.03c-1.49-2.1-36.8,2.12-48.73,6.25s-16.71,12.08-20.46,22.2c-3.76,10.12-10.64,6.7-12.31,4.73
c-1.67-1.97-5.91-2.58-9.39-2.73c0.15,3.49,0.76,7.73,2.73,9.39c1.97,1.67,5.39,8.55-4.73,12.31c-10.12,3.76-18.07,8.53-22.2,20.46
c-4.13,11.93-8.35,47.24-6.25,48.73s22.08-27.91,27.03-38.25c7.82-16.3,26.75-17.49,31.91-14.77c5.15,2.73,13.94,19.4,13.94,19.4
S1116.49,1465.92,1120.28,1462.13z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>body, html {
height: 100%;
margin: 0;
overflow: hidden;
}
svg {
max-height: 100%;
}
#Donut{
transform-origin: 1054.33px 1055.80px;
animation-name: scale-float;
animation-duration: 6s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
#Whale{
transform-origin: 1054.33px 1055.80px;
animation-name: swim;
animation-duration: 30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#Birds{
transform-origin: 1368.75px 1379.027px;
animation-name: flying;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#Ripple-01, #Ripple-02, #Ripple-03{
transform-origin: 1054.33px 1055.80px;
animation-name: ripple-scale;
animation-duration: 6s;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
}
#Ripple-02{
animation-delay: 2s;
}
#Ripple-03{
animation-delay: 4s;
}
@keyframes ripple-scale{
0%{
transform: scale(1);
opacity: 1;
}
100%{
transform: scale(3.2);
opacity: 0;
}
}
@keyframes scale-float{
0%{
transform: scale(1);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
@keyframes swim{
0%{
tramsform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes flying{
0%{
transform: translate(0px, 0px);
opacity: 0;
}
25%{
transform: translate(-250px, -300px);
opacity: 1;
}
50%{
transform: translate(-500px, -600px);
opacity: 0;
}
100%{
transform: translate(0px, 0px);
opacity: 0;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.