Анимация акулы на SVG
Анимация нарисованной на SVG акулы плывущей в океане HTML
<section>
<div id="bg">
<div class="wave">
<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" height="100%" width="100%" preserveAspectRatio="none">
<defs>
<path id="gentle-wave"
d="M-160 44c30 0
58-18 88-18s
58 18 88 18
58-18 88-18s
58 18 88 18
v44h-352z" />
</defs>
<g class="parallax" transform="translateX(50)">
<use xlink:href="#gentle-wave" x="15" y="-10" fill="#0052BF"/>
<use xlink:href="#gentle-wave" x="15" y="10" fill="#0048B6"/>
</g>
</svg>
</div>
</div>
<div id="shark-container">
<div id="sharky">
<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="svg3713" width="100%" height="644" viewBox="0 0 1000 644"
sodipodi:docname="sharky.svg" inkscape:version="0.92.3 (2405546, 2018-03-11)" enable-background="new">
<metadata
id="metadata3719">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3717">
<linearGradient
inkscape:collect="always"
id="linearGradient2175">
<stop
style="stop-color:#deebeb;stop-opacity:1;"
offset="0"
id="stop2171" />
<stop
style="stop-color:#deebeb;stop-opacity:0;"
offset="1"
id="stop2173" />
</linearGradient>
<marker
inkscape:stockid="Arrow1Lstart"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Lstart"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1554"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
transform="scale(0.8) translate(12.5,0)" />
</marker>
<marker
inkscape:stockid="Arrow1Sstart"
orient="auto"
refY="0.0"
refX="0.0"
id="Arrow1Sstart"
style="overflow:visible"
inkscape:isstock="true">
<path
id="path1566"
d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
transform="scale(0.2) translate(6,0)" />
</marker>
<linearGradient
id="linearGradient4835"
osb:paint="solid">
<stop
style="stop-color:#009deb;stop-opacity:1;"
offset="0"
id="stop4833" />
</linearGradient>
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2177"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578"
gradientUnits="userSpaceOnUse" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072-0"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074-2" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2208"
gradientUnits="userSpaceOnUse"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072-2"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074-7" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2224"
gradientUnits="userSpaceOnUse"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072-8"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074-5" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2240"
gradientUnits="userSpaceOnUse"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072-02"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074-3" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2256"
gradientUnits="userSpaceOnUse"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072-24"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074-33" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2272"
gradientUnits="userSpaceOnUse"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578" />
<filter
inkscape:collect="always"
style="color-interpolation-filters:sRGB"
id="filter2072-1"
x="-0.012448598"
width="1.0248972"
y="-0.333"
height="1.666">
<feGaussianBlur
inkscape:collect="always"
stdDeviation="0.84297166"
id="feGaussianBlur2074-71" />
</filter>
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient2175"
id="linearGradient2288"
gradientUnits="userSpaceOnUse"
x1="95.943848"
y1="79.740578"
x2="262.50898"
y2="79.740578" />
</defs>
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview3715"
showgrid="false"
inkscape:zoom="1.3167702"
inkscape:cx="218.91196"
inkscape:cy="312.3513"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer8"
showguides="true"
inkscape:object-paths="true"
inkscape:snap-smooth-nodes="true" />
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="fon"
style="display:inline;opacity:1" />
<g
inkscape:groupmode="layer"
id="layer12"
inkscape:label="tail">
<g
style="display:inline;opacity:1"
id="g6447"
transform="translate(-966.49691,250.85113)">
<path
sodipodi:nodetypes="ccscccscscc"
inkscape:connector-curvature="0"
id="path6440"
d="m 1248.8891,46.325478 c -31.2107,-24.59472 -56.1938,-1.604553 -85.4363,22.023584 -4.9679,3.7004 -6.5607,1.043768 -7.1086,-3.206187 -3.1721,-24.604388 14.0179,-45.389826 29.8916,-63.2442834 -13.7127,-52.5286296 -19.7856,-94.4634496 -18.1612,-138.5276016 1.987,-1.30125 4.2724,-1.84302 8.5058,1.96403 14.6206,26.19002 30.8925,46.938636 38.1718,67.103643 8.9126,24.689619 25.88,51.691212 38.5932,47.790997 24.3268,8.366659 61.961,-0.399789 70.4293,15.4146249 9.5872,17.9037471 -6.4877,72.8018641 -14.1872,99.6573401 z"
style="fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="cscsccccc"
inkscape:connector-curvature="0"
id="path6442"
d="m 1253.974,12.295934 c -51.9972,-10.6739789 -76.8616,-112.108481 -85.8994,-148.924944 -0.3459,-1.40889 5.1359,-1.31659 6.0822,0.20038 -1.1513,-0.73385 1.3403,0.43966 2.5772,2.03867 16.0628,20.76396 25.8327,42.437667 38.0182,66.828623 12.2988,20.754979 20.3714,49.759983 38.5932,47.790997 76.0669,6.603019 119.5016,3.280546 125.0092,11.9878337 L 1325.168,13.014343 c -8.6797,1.570911 -46.3234,4.602766 -71.194,-0.718409 z"
style="fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer6"
inkscape:label="spinefin">
<g
id="g890"
transform="translate(-837.52372,-2.093098)">
<path
sodipodi:nodetypes="ccscc"
inkscape:connector-curvature="0"
id="path854"
d="m 1227.8526,227.2873 c 0.4474,-46.89705 1.7496,-78.12816 -34.3681,-114.91819 -3.5809,-7.69805 -3.1911,-16.490321 10.203,-16.378526 51.8323,0.432623 120.6243,52.247226 158.4153,114.381186 z"
style="fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="cccc"
inkscape:connector-curvature="0"
id="path856"
d="m 1226.6972,180.00941 c 28.502,0.88405 59.653,2.77247 107.077,33.93176 -34.3779,4.33162 -68.74,8.66125 -105.9216,13.34613 0.4684,-15.56509 0.4996,-31.67816 -1.1554,-47.27789 z"
style="display:inline;opacity:1;fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="body"
style="display:inline;opacity:1">
<g
id="g6381"
transform="translate(93.488295,75.269549)">
<path
sodipodi:nodetypes="cccscccccccssccc"
inkscape:connector-curvature="0"
id="path4585"
d="m 469.28,123.11098 c 79.5093,-4.9539 158.9761,-9.01033 230.0532,4.74271 14.6526,5.14375 53.412,6.09218 57.9961,32.75705 0.09,3.7937 0.2151,6.79562 -0.7243,9.22502 -21.3713,55.26399 -42.2799,59.38542 -62.8288,88.00192 -15.6446,9.116 -24.0866,24.1973 -27.1675,37.59007 -1.5213,7.35138 -4.0244,11.72563 -3.3197,20.88067 -18.0232,7.58431 -37.3174,14.24055 -57.3614,17.78339 3.8869,19.3835 16.88477,27.8421 27.69614,43.43751 0.3839,4.10453 -1.13715,11.90182 -3.13405,15.05404 -77.59503,75.97706 -239.77503,63.88906 -288.76649,5.41156 -44.1141,-41.74341 -76.62008,-105.84563 -127.9635,-153.39799 -4.40536,-4.08008 -5.5387,2.39899 -21.3767,-0.40671 -7.21908,-1.27886 -26.6872,-52.4542 17.1458,-102.56716 10.5787,3.62097 17.6493,7.94353 23.1832,12.57345 167.8114,-30.1297 177.9428,-25.21943 236.568,-31.08553 z"
style="opacity:1;fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;image-rendering:optimizeQuality" />
<path
sodipodi:nodetypes="ccsccccsc"
inkscape:connector-curvature="0"
id="path4587"
d="m 185.2535,185.15175 c 38.271,14.48697 207.4724,14.97566 567.6835,-6.3085 7.2332,-15.9604 4.42272,-24.21508 -1.1828,-30.44958 -9.92632,-11.04013 -30.3479,-16.30658 -52.421,-20.53998 -11.4268,-2.22038 -21.7796,-3.38561 -32.3149,-4.73014 -86.5756,-9.42185 -171.9215,-2.4009 -258.8861,4.86296 -61.318,5.20509 -116.9895,17.42032 -175.4202,26.21 -5.0998,-5.36008 -13.55061,-15.15103 -23.1832,-12.57345 -16.06593,4.29907 -18.7286,22.97925 -24.2753,43.52869 z"
style="opacity:1;fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;image-rendering:optimizeQuality" />
<path
sodipodi:nodetypes="cccccssccc"
inkscape:connector-curvature="0"
id="path4603"
d="m 693.77624,257.83768 c -53.537,6.41361 -107.7145,13.43571 -181.0785,38.68496 l -42.1486,15.94812 c -54.3486,27.10267 -108.99077,53.09904 -176.21563,31.66824 9.7708,12.33477 26.72362,34.81191 47.38969,53.85592 59.18457,73.09742 242.62382,59.80399 291.39604,-8.81445 3.34924,-4.7121 2.56373,-8.40639 0.5045,-11.65115 -15.6877,-24.71939 -24.77728,-28.67257 -27.6961,-43.43751 20.90462,-3.74125 39.9328,-10.19309 57.3614,-17.78339 1.0719,-29.18415 18.6392,-40.778 30.4872,-58.47074 z"
style="opacity:1;fill:#deebeb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;image-rendering:optimizeQuality" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer7"
inkscape:label="gills">
<g
style="display:inline;opacity:1"
id="g923"
transform="translate(-960.69981,-20.699836)">
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path897"
d="m 1485.076,264.34036 c -5.7188,21.48017 -6.1384,46.27236 -0.4027,74.91163 l 5.3699,-1.74525 c -3.954,-23.28788 -5.9314,-46.84841 0.4028,-71.55537 z"
style="fill:#008ae0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path897-7"
d="m 1467.0035,264.73207 c -5.7188,21.48017 -6.1384,46.27236 -0.4027,74.91163 l 5.3699,-1.74525 c -3.954,-23.28788 -5.9314,-46.84841 0.4028,-71.55537 z"
style="display:inline;opacity:1;fill:#008ae0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path897-1"
d="m 1504.1908,264.59783 c -5.7188,21.48017 -6.1384,46.27236 -0.4027,74.91163 l 5.3699,-1.74525 c -3.954,-23.28788 -5.9314,-46.84841 0.4028,-71.55537 z"
style="display:inline;opacity:1;fill:#008ae0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="eye"
style="display:inline">
<g
id="g4575"
transform="translate(-493.02389,44.623131)">
<ellipse
ry="55.438675"
rx="53.729954"
cy="224.03302"
cx="1153.0104"
id="path4559"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.15914166;stroke-opacity:1" />
<ellipse
ry="40.157127"
rx="39.967266"
cy="218.33727"
cx="1160.6049"
id="path4561"
style="fill:#ffde39;fill-opacity:1;stroke:none;stroke-width:1.18575025;stroke-opacity:1" />
<ellipse
ry="28.151949"
rx="28.127871"
cy="217.49199"
cx="1165.2455"
id="path4567"
style="fill:#443e74;fill-opacity:1;stroke:none;stroke-width:0.99343288;stroke-opacity:1" />
<ellipse
ry="8.9528923"
rx="9.0686188"
cy="221.95604"
cx="1150.6288"
id="path4569"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.88806164;stroke-opacity:1" />
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer1"
inkscape:label="fin"
style="display:inline">
<g
id="g3747"
transform="translate(2.8309148,-133.74858)">
<g
id="g3729" />
<g
id="g4552">
<path
sodipodi:nodetypes="cssscc"
inkscape:connector-curvature="0"
id="path3724"
d="m 388.07075,528.94575 c -1.72947,-8.77404 53.00919,-20.39692 58.6233,22.51334 2.69459,20.59553 -8.34034,34.90859 -25.86514,44.2145 -2.48545,1.31981 -5.10144,2.5389 -7.82732,3.66092 -53.59378,22.06009 -149.66531,6.59415 -131.25158,-18.74725 41.90812,-10.0601 83.08977,-20.6673 106.98981,-53.84341"
style="fill:#009deb;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
style="fill:#00b3f7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 386.9491,530.46853 c 114.94367,39.5159 -60.24611,85.52555 -103.91865,51.41839 -1.22495,-0.95665 -2.00946,-0.72826 -1.28044,-1.29966 5.5284,-4.33315 65.36742,-6.0669 104.40758,-50.4294"
id="path3726"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssc" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer5"
inkscape:label="jaws">
<g
inkscape:groupmode="layer"
id="layer9"
inkscape:label="jaws 1" />
<g
inkscape:groupmode="layer"
id="layer10"
inkscape:label="jaws 2" />
<g
inkscape:groupmode="layer"
id="layer11"
inkscape:label="jaws 3">
<g
id="g6438"
transform="translate(-907.91491,-109.82297)">
<path
sodipodi:nodetypes="cccccc"
inkscape:connector-curvature="0"
id="path6398"
d="m 1600.8868,519.45283 c 5.9715,14.91295 11.8765,29.89239 22.783,39.87028 5.6611,5.53706 10.5535,9.88173 -0.7594,18.22642 -100.3008,38.00175 -158.9937,-40.34714 -149.6085,-114.67453 3.1819,-8.03678 10.2286,-14.14487 21.2642,-4.17688 15.9327,25.93872 40.8688,61.00402 106.3207,60.75471 z"
style="fill:#fb90c5;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccc"
inkscape:connector-curvature="0"
id="path6387"
d="m 1477.9469,515.43559 c 43.7356,11.70371 87.1739,26.38052 127.9184,67.99481 -72.2317,15.88002 -112.5717,-20.5648 -127.9184,-67.99481 z"
style="display:inline;opacity:1;fill:#eb64a7;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path6385"
d="m 1484.1168,531.06331 c 26.1798,-13.03623 20.968,5.62749 21.0552,19.65025 18.0448,-8.36021 31.4779,-10.1871 25.441,15.56839 22.8135,-11.5331 31.2275,-10.48255 27.2135,20.12797 -56.2044,-8.81867 -70.5113,-49.80257 -73.7097,-55.34661 z"
style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
</g>
</g>
<g
inkscape:groupmode="layer"
id="layer8"
inkscape:label="lines">
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2208);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-0)"
id="rect1552-8"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,492.33442,344.26572)" />
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2256);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-02)"
id="rect1552-6"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,718.82293,131.46389)" />
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2288);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-1)"
id="rect1552-83"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,531.33429,179.02648)" />
</g>
<g
inkscape:groupmode="layer"
id="layer13"
inkscape:label="lines 2">
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2177);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072)"
id="rect1552"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,439.66879,23.524771)" />
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2224);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-2)"
id="rect1552-4"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,626.26758,268.05022)" />
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2240);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-8)"
id="rect1552-1"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,408.92167,251.34409)" />
<rect
style="display:inline;opacity:0.5;fill:url(#linearGradient2272);fill-opacity:1;stroke:none;stroke-opacity:1;paint-order:stroke fill markers;filter:url(#filter2072-24)"
id="rect1552-5"
width="162.51886"
height="6.0754714"
x="97.96698"
y="76.702843"
ry="3.0377357"
transform="matrix(-0.85445125,0,0,1.0479948,635.298,433.4407)" />
</g>
</svg>
</div>
<div id="link">
<a target="_blank" href="http://webstripe.studio/">
<h1>Made at Webstripe Studio</h1>
</a>
<a target="_blank" href="https://www.digitalocean.com/">
<h2>DigitalOcean © Sammy Mascot</h2>
</a>
</div>
</div>
</section>CSS
body {
padding: 0;
margin: 0;
font-family: "Fira Sans", sans-serif;
max-height: 100%;
height: 100%;
overflow: hidden;
}
#bg {
background-color: #005ec7;
min-height: 100%;
width: 100%;
position: absolute;
}
h1,
h2 {
margin: 5px;
}
h1 {
font-size: 20px;
}
h2 {
font-size: 16px;
}
@media (max-width: 980px) {
h1 {
font-size: 16px;
}
h2 {
font-size: 12px;
}
}
#link {
display: flex;
align-self: flex-end;
justify-self: flex-end;
margin-left: auto;
flex-flow: column;
z-index: 100;
}
#link a {
text-decoration: none;
color: #fff;
}
.wave {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
overflow: hidden;
}
.parallax > use {
/*performance issues*/
perspective: 1000;
will-change: transform;
backface-visibility: hidden;
animation: flow 2s linear infinite;
}
@keyframes flow {
0% {
transform: translate(140px, 0%);
}
100% {
transform: translate(-35px, 0%);
}
}
.vawes {
display: block;
width: 100%;
height: 10em;
max-height: 100vh;
margin: 0;
}
#shark-container {
position: absolute;
height: 100%;
width: 100%;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
}
#sharky {
display: flex;
position: absolute;
width: 100%;
}
#layer12 {p
perspective: 1000;
will-change: transform;
backface-visibility: hidden;
transform-origin: right;
animation: tail-swim 2s ease-in-out infinite;
}
@keyframes tail-swim {
0% {
transform: rotateY(-10deg);
}
50% {
transform: rotateY(10deg);
}
100% {
transform: rotateY(-10deg);
}
}
#layer1 {
perspective: 1000;
will-change: transform;
transform-origin: center;
backface-visibility: hidden;
animation: fin-swim 2s ease-in-out infinite;
}
@keyframes fin-swim {
0% {
transform: rotateZ(5deg);
}
50% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(5deg);
}
}
#path4561,
#path4567 {
perspective: 1000;
backface-visibility: hidden;
will-change: transform;
animation: eye-move 2s ease-in-out infinite;
}
@keyframes eye-move {
50% {
transform: translateX(-10px);
}
}
#path4569 {
perspective: 1000;
backface-visibility: hidden;
will-change: transform;
animation: eye-move-2 2s ease-in-out infinite;
}
@keyframes eye-move-2 {
50% {
transform: translateX(-5px);
}
}
#layer7 {
perspective: 1000;
backface-visibility: hidden;
will-change: transform;
transform-origin: center;
animation: gills-move 2s linear infinite;
}
@keyframes gills-move {
50% {
transform: translateX(-3px) scale(1.01);
}
}
#layer8 {
perspective: 1000;
backface-visibility: hidden;
will-change: transform;
transform-origin: right center;
animation: lines-move 1s ease infinite;
}
#layer13 {
perspective: 1000;
backface-visibility: hidden;
opacity: 0;
will-change: transform;
transform-origin: right center;
animation: lines-move 1s ease infinite 0.5s;
}
@keyframes lines-move {
0% {
opacity: 1;
}
100% {
transform: scaleX(1.2) translateX(20px);
opacity: 0;
}
}
