Skip to content

Instantly share code, notes, and snippets.

@bovan
Last active September 4, 2025 09:40
Show Gist options
  • Select an option

  • Save bovan/d3a8020aefa5ec6db433934ded2b0a1f to your computer and use it in GitHub Desktop.

Select an option

Save bovan/d3a8020aefa5ec6db433934ded2b0a1f to your computer and use it in GitHub Desktop.
akva fish svg
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 128 128" fill="none">
<style>
@keyframes wiggle {
0% {
stroke-dasharray: 68 52;
stroke-width: 9px;
stroke-dashoffset: 33;
}
50% {
stroke-dasharray: 52 68;
stroke-dashoffset: 23;
stroke-width: 10px;
}
100% {
stroke-dasharray: 68 52;
stroke-width: 9px;
stroke-dashoffset: 33;
}
}
@keyframes eyebob {
0% { transform: translateY(0); }
50% { transform: translateY(1px) }
100% { transform: translateY(0) }
}
#tail {
animation: wiggle 1000ms linear infinite,
bobbing 2000ms ease-in-out infinite;
}
#eye {
animation: eyebob 1000ms ease-in-out infinite,
bobbing 1000ms ease-in-out infinite;
}
@keyframes bubble {
0% {
r: 0;
cy: 50;
}
100% {
r: 5;
cy: -50;
}
}
@keyframes bubble2 {
0% {
r: 0;
cy: 50;
}
100% {
r: 3;
cy: -100;
}
}
#bubble {
animation: bubble 1200ms ease-out infinite;
}
#bubble2 {
animation: bubble2 800ms ease-in infinite;
}
@keyframes bobbing {
0% {
transform: translateY(0);
}
50% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
#body {
animation: bobbing 2000ms ease-in-out infinite;
}
</style>
<rect width="100%" height="100%" fill="white"/>
<circle id="body" cx="64" cy="64" r="20" fill="none" stroke="black" stroke-width="10"/>
<circle id="eye" cx="70" cy="60" r="5" fill="black" />
<circle id="tail" cx="24" cy="64" r="20" fill="none" stroke="black" stroke-width="10" stroke-dasharray="50 70" stroke-dashoffset="23"/>
<circle id="bubble" cx="90" cy="50" r="0" stroke="black" stroke-width="2" />
<circle id="bubble2" cx="95" cy="50" r="0" stroke="black" stroke-width="1" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment