Swimming fish
How do I make an swimming fish?
SVG Fish on a wave pattern, animated. What is a swimming fish? How do you make a swimming fish? This script and codes were developed by Benedikte Vanderweeën on 21 January 2023, Saturday.
Swimming fish - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swimming fish</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container-fish"> <svg version="1.1" viewBox="0 0 100 100" class="svg-fish" preserveAspectRatio="xMinYMin meet"> <path d="M98.5,47.5C96.5,45.5,81,35,62,35c-2.123,0-4.188,0.126-6.212,0.326L39,26c0,4.506,1.269,9.012,2.377,12.088 C31.669,40.694,23.278,44,16,44c0,0-16-10-16-10c0,8,4,16,4,16s-4,8-4,16l16-10c7.278,0,15.669,3.307,25.377,5.912 C40.269,64.988,39,69.494,39,74l16.787-9.326C57.812,64.873,59.877,65,62,65c19,0,34.5-10.5,36.5-12.5S100.492,49.492,98.5,47.5z M85.5,50c-1.381,0-2.5-1.119-2.5-2.5c0-1.381,1.119-2.5,2.5-2.5s2.5,1.119,2.5,2.5C88,48.88,86.881,50,85.5,50z"/> </svg>
</div>
<div class="container-wave"> <svg class="svg-wave" version="1.1" viewBox="0 0 900 200" preserveAspectRatio="xMinYMin meet"> <defs> <!-- Geometry --> <g> <rect id="square" x="0" y="0" width="100%" height="100%" /> </g> <!-- Patterns --> <pattern id="wave" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse"> <path d="M 0 7.5 Q 2.5 7.5 2.5 5 Q 2.5 2.5 5 2.5 Q 7.5 2.5 7.5 5 Q 7.5 7.5 10 7.5" /></pattern> </defs> <!-- Graphics --> <use xlink:href="#square" transform="translate(000, 000)" fill="url(#wave)"/> </svg>
</div>
</body>
</html>
Swimming fish - Script Codes CSS Codes
body{ background:#16a085;
}
.container-wave{z-index:100;}
.container-fish{z-index:500;}
.container-wave,
.container-fish{ position:relative; height:0; width:100%; padding-top:0;
}
.svg-wave{ width:100%; height:300px;
}
#wave{ stroke:#76d7c4; fill:transparent; stroke-width:1.5; stroke-linecap:square; stroke-linejoin:miter;
}
.svg-fish{ position:absolute; left:-10px; top: -10px; width:100%; height:100px; fill: #e67e22; stroke: #fff; overflow-x: hidden; -webkit-animation:move 10s 1s infinite ease-in-out; -moz-animation:move 10s 1s infinite ease-in-out; -o-animation:move 10s 1s infinite ease-in-out; -ms-animation:move 10s 1s infinite ease-in-out; animation:move 10s 1s infinite ease-in-out; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; -ms-transform-origin:center center; transform-origin:center center;
}
@-webkit-keyframes move { 0%{-webkit-transform: translateX(-500px) scale(0.5);} 25%{-webkit-transform: translateY(100px) scale(1.2);} 50%{-webkit-transform: translateY(100px) scale(1.5);} 75%{-webkit-transform: translateY(100px) scale(1.2);} 100%{-webkit-transform: translateX(100%) scale(0.5); }
}
@-moz-keyframes move { 0%{-moz-transform: translateX(-500px) scale(0.5);} 25%{-moz-transform: translateY(100px) scale(1.2);} 50%{-moz-transform: translateY(100px) scale(1.5);} 75%{-moz-transform: translateY(100px) scale(1.2);} 100%{-moz-transform: translateX(100%) scale(0.5);}
}
@-o-keyframes move { 0%{-o-transform: translateX(-500px) scale(0.5);} 25%{-o-transform: translateY(100px) scale(1.2);} 50%{-o-transform: translateY(100px) scale(1.5);} 75%{-o-transform: translateY(100px) scale(1.2);} 100%{-o-transform: translateX(100%) scale(0.5);}
}
@-ms-keyframes move { 0%{-ms-transform: translateX(-500px) scale(0.5);} 25%{-ms-transform: translateY(100px) scale(1.2);} 50%{-ms-transform: translateY(100px) scale(1.5);} 75%{-ms-transform: translateY(100px) scale(1.2);} 100%{-ms-transform: translateX(100%) scale(0.5);}
}
@keyframes move { 0%{transform: translateX(-500px) scale(0.5);} 25%{transform: translateY(100px) scale(1.2);} 50%{transform: translateY(100px) scale(1.5);} 75%{transform: translateY(100px) scale(1.2);} 100%{transform: translateX(100%) scale(0.5);}
}
Developer | Benedikte Vanderweeën |
Username | Benedikte |
Uploaded | January 21, 2023 |
Rating | 3 |
Size | 2,446 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Illustrio interface | 22,962 Kb |
Scaled Paper icon | 2,995 Kb |
Linear Gradients with SVG | 2,011 Kb |
Europe | 15,962 Kb |
Donut graph animation | 2,333 Kb |
SVG Logo | 2,374 Kb |
Sun Animation | 1,879 Kb |
Transparent SVG pattern | 1,453 Kb |
Rotating earth with people | 5,790 Kb |
Background SVG Gradients | 1,748 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Eunice A | Ejbronze | 2,203 Kb |
Shopping List | Markmurray | 6,015 Kb |
Collapsing Widget | Er40 | 4,279 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
Base64 SVG Me | MrBambule | 44,786 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!