aquarium2.svg

<svg id="mysvg" width="1000" height="1000" viewBOX="0, 0,1000,1000" style="enable-background:new 0 0 1000 1000;" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
#mysvg{background-color:black;}
.lg1{fill:url(#myGradient1);}
</style>
<!--suisou-->
        <defs>
                <linearGradient id="myGradient1" gradientUnits="objectBoundingBox" spreadMethod="reflect"
                x1="100" y1="900" x2="100" y2="100">
                        <stop offset="1%"  stop-color="pink" />
                        <stop offset="99%" stop-color="lightblue" />
                        <animate attributeName ="y1" dur="9s" from="-100%" to="100%" repeatCount = "indefinite"/>
                        <animate attributeName ="y2" dur="9s" from="0%" to="200%" repeatCount = "indefinite"/>
                </linearGradient>
                <linearGradient id="myGradient2" gradientTransform="rotate(90)">
                        <stop offset="5%"  stop-color="white" />
                        <stop offset="95%" stop-color="silver" />
                </linearGradient>
                <radialGradient id="myGradient3" gradientUnits="userSpaceOnUse"
                cx="500" cy="110" r="390" fx="500" fy="110">
                        <stop offset="0%" stop-color="black" />
                        <stop offset="50%" stop-color="deeppink" />
                        <stop offset="100%" stop-color="black" />
                </radialGradient >
                <linearGradient id="myGradient4">
                        <stop offset="1%"  stop-color="gold" />
                        <stop offset="99%" stop-color="deeppink" />
                </linearGradient>
                <linearGradient id="myGradient5">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="99%" stop-color="greenyellow" />
                </linearGradient>
                <linearGradient id="myGradient5">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="99%" stop-color="greenyellow" />
                </linearGradient>
                <linearGradient id="myGradient6" gradientTransform="rotate(90)">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="99%" stop-color="greenyellow" />
                </linearGradient>
                <linearGradient id="myGradient7" gradientTransform="rotate(20)">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="99%" stop-color="pink" />
                </linearGradient>
                <linearGradient id="myGradient8" gradientTransform="rotate(120)">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="99%" stop-color="hotpink" />
                </linearGradient>
                <linearGradient id="myGradient9" gradientTransform="rotate(90)">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="90%" stop-color="greenyellow" />          
                </linearGradient>
                <linearGradient id="myGradient10" gradientTransform="rotate(80)">
                        <stop offset="1%"  stop-color="silver" />
                        <stop offset="99%" stop-color="lightblue" />
                </linearGradient>
                <linearGradient id="myGradient11">
                        <stop offset="1%"  stop-color="aqua" />
                        <stop offset="99%" stop-color="hotpink" />
                </linearGradient>
                <radialGradient id="myGradient12">
                        <stop offset="20%" stop-color="gold" />
                        <stop offset="95%" stop-color="lightgreen" />
                </radialGradient>
                <linearGradient id="myGradient13" gradientTransform="rotate(90)" >
                        <stop offset="20%" stop-color="greenyellow" />
                        <stop offset="95%" stop-color="aqua" />
                </linearGradient>
                <radialGradient id="myGradient14" gradientTransform="rotate(-15)">
                        <stop offset="1%" stop-color="hotpink" />
                        <stop offset="99%" stop-color="deeppink" />
                </radialGradient>
                <linearGradient id="myGradient15" gradientUnits="objectBoundingBox" spreadMethod="reflect"
                x1="100" y1="900" x2="100" y2="100">
                        <animate attributeName ="y1" dur="9s" from="-100%" to="100%" repeatCount = "indefinite"/>
                        <animate attributeName ="y2" dur="9s" from="0%" to="200%" repeatCount = "indefinite"/>
                        <stop offset="1%" stop-color="aqua" />
                        <stop offset="99%" stop-color="white" />
                </linearGradient>
        </defs>

        <!--water--> <!--C120,443 250,450 400,442 S520,442 730,441 S740,441 900,440 none straight-->
        <path class="gl1" d="M100,900 100,440 L900,440 900,900 100,900" stroke="black" fill="url(#myGradient1)" />
        <!--sand-->
        <path id="sand" stroke="none" d="M100,900 Q100,800 100,800 c24.59-19.56,59.89-13.23,91-9.06a460.24,460.24,0,0,0,118.83.43c19.93-2.53,40.22-6.36,59.94-2.47,14.42,2.85,27.72,9.69,41.77,14,66.9,20.49,139-18.41,208.14-7.74,31.82,4.91,64.51,20.16,94.8,9.24,6.94-2.51,13.49-6.35,20.79-7.49s16,1.43,18.8,8.25 Q900,810 900,800 L900,900 100,900" fill="beige"/>
        <!--suisou-->
        <polygon points="100,900 100,300 900,300 900,900 100,900" stroke="aqua" fill="none"/>
        <!--neon light-->
        <path d="M220,290 Q480,200 780,290" width="5" fill="url(#myGradient3)"/>
        <!--light cover-->
        <path d="M 200,280 800,280 Q 480,100 200,280" stroke="black" fill="url(#myGradient2)" />
        <!--line1-->
        <path id="line1" d="M680,680 Q 450,600 250,680 Q 450,750 680,680" fill="none"/>
        <!--line2-->
        <path id="line2" d="M780,580 Q550,500 200,580 Q550,650 780,580" fill="none"/>
        <!--line3-->
        <path id="line3" d="M795,520 Q560,450 200,520 Q580,650 795,520" fill="none"/>
        <!--kusa-->
        <path id="kusa" d="M720,850 C730,800 750,750 720,700 S690,630 650,600" stroke="green" fill="none" stroke-width="2"/>
        <path id="eda1" d="M720,700 C720,700 690,650 710,600" stroke="green" fill="none" stroke-width="2"/>
        
        <!--circle on the branch-->
        <circle id="light1" cx="650" cy="600" r="5" fill="url(#myGradient12)"/>
        <path id="eda3" d="M645,630 Q690,640 720,700" fill="none" stroke="green" stroke-width="2"/>
        <circle cx="645" cy="630" r="5" fill="url(#myGradient12)"/>
        <circle cx="710" cy="600" r="5" fill="url(#myGradient12)"/>
        
        <circle cx="650" cy="800" r="10" fill="url(#myGradient5)"/>
        <circle cx="600" cy="820" r="10" fill="url(#myGradient6)"/>
        <circle cx="280" cy="810" r="10" fill="url(#myGradient7)"/>
        <circle cx="480" cy="870" r="10" fill="url(#myGradient8)"/>
        <circle cx="180" cy="790" r="50" fill="url(#myGradient9)"/>
        
        <!--dog neon-->
        <g id="face1" transform="translate(500,700) scale(5) rotate(-10 30 80)">
        <!--dog face1-->
        
        <!--ears-->
        <path d="M -15 -13 Q -10 -35 -3 -20" stroke="greenyellow" fill="transparent" stroke-width="3"/>
        <path d="M 15 -13 Q 10 -35 3 -20" stroke="greenyellow" fill="transparent" stroke-width="3"/>
        <!--face shape-->
        <circle cx="0" cy="0" r="20" stroke="aqua" fill="transparent" stroke-width="3" />
        <circle cx="0" cy="0" r="20" stroke="url(#myGradient15)" fill="transparent" stroke-width="3" />
        <!--eyes-->
        <circle cx="-5.5" cy="-5" r="2.5" stroke="none" fill="url(#myGradient14)" stroke-width="1"/>
        <circle cx="5.5" cy="-5" r="2.5" stroke="none" fill="url(#myGradient14)" stroke-width="1"/>
        <!--mouth-->
        <path d="M 0,3 Q 3,8 5,4.5" stroke="deeppink" fill="transparent" stroke-width="2"/>
        <path d="M 0,3 Q -3,8 -5,4.5" stroke="deeppink" fill="transparent" stroke-width="2"/>
        <!--<path d="M-3,5.8 Q0,10 3,5.8" fill="none" stroke="deeppink" stroke-width="2"/>-->
        <!--<path d="M-3,5 Q-1.5,7 0,5 Q1.5,7 3,5" stroke="deeppink" fill="none" />-->
        <!--<path d="M-4.5,5 Q-1.5,7 0,5 Q1.5,7 4.5,5" stroke="deeppink" fill="none" stroke-width="2"/>-->
        <!--nose-->
        <circle cx="0" cy="2" r="2.5" stroke="none" fill="url(#myGradient14)" stroke-width="1"/>

        </g>

        <defs>
        <!--bubble-->
        <circle id="bubble1" cx="0" cy="0" r ="6" fill="url(#myGradient10)" />
        <!--bubble line1-->
        <path id="bline1" d="M200,770 C210,660 207,650 205,600 S205,480 207,455.66" fill="none"/>
        <!--bubble line2-->
        <path id="bline2" d="M160,770 C170,660 168,650 165,600 S165,480 168,455.66" fill="none"/>
        <!--bubble line3-->
        <path id="bline3" d="M188,770 C190,660 185,650 190,600 S190,480 188,455.66" fill="none"/>
        <!--bubble line4-->
        <path id="bline4" d="M150,770 C153,660 148,650 152,600 S152,480 150,455.66" fill="none"/>
        
        
        <!--fish1 closed mouth-->
        <g id="fish1">
                <path d="M0,0 Q 20,30 50,5 L65,13 Q72,0 65,-17 L50,-8 Q20,-30 0,0" stroke="gold" stroke-width="1" fill="url(#myGradient4)"/>
                <circle cx="11" cy="0" r="3" fill="chocolate"/>
                <path d="M20,10 Q25,-1 20,-10" stroke-width="1" fill="none" stroke="gold"/>
        
        </g>
        <!--fish2 open mouth-->
        <g id="fish2">
                <path d="M0,5 Q 20,30 50,5 L65,13 Q72,0 65,-17 L50,-8 Q20,-30 0,-5 L5,0 0,5" stroke="orange" stroke-width="1" fill="url(#myGradient5)"/>
                <circle cx="11" cy="0" r="3" fill="deeppink"/><!--eye-->
                <path d="M23,-12 Q30,-7 23,-3 Q30,2 23,5 Q30,10 23,13" stroke="orange" fill="none" stroke-width="1"/><!--uroko1-->
                <path d="M30,-9 Q37,-5 30,0 Q37,5 30,9" stroke="orange" fill="none" stroke-width="1"/><!--uroko2-->
                <path d="M37,-3 Q44,0 37,5" stroke="orange" fill="none" stroke-width="1"/><!--uroko3-->
        </g>
        <g id="fish3">
                <path d="M0,5 Q 20,30 50,5 L65,13 Q72,0 65,-17 L50,-8 Q20,-30 0,-5 L5,0 0,5" stroke="pink" stroke-width="1" fill="url(#myGradient11)"/>
                <circle cx="11" cy="0" r="3" fill="deeppink"/><!--eye-->
                <path d="M23,-12 Q30,-7 23,-3 Q30,2 23,5 Q30,10 23,13" stroke="pink" fill="none" stroke-width="1"/><!--uroko1-->
                <path d="M30,-9 Q37,-5 30,0 Q37,5 30,9" stroke="pink" fill="none" stroke-width="1"/><!--uroko2-->
                <path d="M37,-3 Q44,0 37,5" stroke="pink" fill="none" stroke-width="1"/><!--uroko3-->
                <path d="M55,-5 63,-9" stroke="pink" fill="none" stroke-width="1"/>
                <path d="M55,-2 64,-4" stroke="pink" fill="none" stroke-width="1"/>
                <path d="M55,1 64,1.5" stroke="pink" fill="none" stroke-width="1"/>
                <path d="M55,4 63,7" stroke="pink" fill="none" stroke-width="1"/>
        </g>
        </defs>
        <!--animation bubble1-->
        <use href="#bubble1"><!--bubble line1-->   
                <animateMotion begin="0s" dur="3s" repeatCount="indefinite">
                        <mpath href="#bline1"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.1s" dur="2.5s" repeatCount="indefinite">
                        <mpath href="#bline1"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.3s" dur="2.8s" repeatCount="indefinite">
                        <mpath href="#bline1"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.4s" dur="3.2s" repeatCount="indefinite">
                        <mpath href="#bline1"/>
                </animateMotion>
        </use>
        <use href="#bubble1"><!--bubble line2-->
                <animateMotion begin="0s" dur="2.5s" repeatCount="indefinite">
                        <mpath href="#bline2"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.1s" dur="2.7s" repeatCount="indefinite">
                        <mpath href="#bline2"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.2s" dur="2.8s" repeatCount="indefinite">
                        <mpath href="#bline2"/>
                </animateMotion>
        </use>
        <use href="#bubble1"><!--bubble line3-->
                <animateMotion begin="0s" dur="2.4s" repeatCount="indefinite">
                        <mpath href="#bline3"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.2s" dur="2.6s" repeatCount="indefinite">
                        <mpath href="#bline3"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.5s" dur="2.95s" repeatCount="indefinite">
                        <mpath href="#bline3"/>
                </animateMotion>
        </use>
        <use href="#bubble1"><!--bubble line4-->
                <animateMotion begin="0s" dur="2.8s" repeatCount="indefinite">
                        <mpath href="#bline4"/>
                </animateMotion>
        </use>
        <use href="#bubble1"><!--delay-->
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.1s" dur="2.92s" repeatCount="indefinite">
                        <mpath href="#bline4"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.2s" dur="3.15s" repeatCount="indefinite">
                        <mpath href="#bline4"/>
                </animateMotion>
        </use>
        <use href="#bubble1">
                <animateMotion  begin="0s" repeatCount="0" path="M -50,0"/><!--hide-->
                <animateMotion begin="0.4s" dur="3.2s" repeatCount="indefinite">
                        <mpath href="#bline4"/>
                </animateMotion>
        </use>
        <!--animation fish1-->
        <use href="#fish1">
                
                <animateMotion begin="0s" dur="10s" repeatCount="indefinite" rotate="auto-reverse">
                        <mpath href="#line1"/>
                </animateMotion>
        </use>

        <!--animation fish2-->
        <use href="#fish2">
                
                <animateMotion begin="0s" dur="12s" repeatCount="indefinite" rotate="auto-reverse">
                        <mpath href="#line2"/>
                </animateMotion>
        </use>
        
        <use href="#fish3">

                <animateMotion begin="0s" dur="16s" repeatCount="indefinite" rotate="auto-reverse">
                        <mpath href="#line3"/>
                </animateMotion>
        </use>


</svg>