Squid Swimming Spinning SVG Animation

Developer
Alex Coven
Size
4,005 Kb
Views
36,432
  1. Squid Swimming Spinning SVG Animation Previews
  2. Squid Swimming Spinning SVG Animation HTML Codes
  3. Squid Swimming Spinning SVG Animation CSS Codes

How do I make an squid swimming spinning svg animation?

What is a squid swimming spinning svg animation? How do you make a squid swimming spinning svg animation? This script and codes were developed by Alex Coven on 14 August 2022, Sunday.

Squid Swimming Spinning SVG Animation Previews
IQ Test

Squid Swimming Spinning SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Squid Swimming Spinning SVG Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg id="squid" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="180px" height="192.8px" viewBox="0 0 130 225" xml:space="preserve" preserveAspectRatio="xMidyMax meet"> <defs> </defs>
<g class="squid">
<path id="left-arm" class="left-arm" d="M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9"/>
<path id="right-arm" class="right-arm" d="M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9"/>
<path id="left-mid-arm" class="left-mid-arm" d="M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6"/>
<path id="right-mid-arm" class="right-mid-arm" d="M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6"/>	<g id="right-limb">	<path id="right-leg" class="right-leg" d="M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1"/>	<path id="right-foot" class="right-foot" d="M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5"/>	</g>
<path id="left-leg" class="left-leg" d="M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18"/>
<g class="body">	<path id="squid-body" d="M84.7,62.6c0.1-0.1,5.1-1.5,5-5.1V5c0-2.8-2.2-5-5-5h-42c-2.8,0-5,2.2-5,5v52.4c0,2.4,1.7,4.4,3.9,4.9	c0.2,0,1.1,0.2,1.2,0.3c2,0.8,3.5,2.7,3.5,5c0,2.2-1.4,4.1-3.3,4.9c-0.1,0.1-5.4,1.2-5.3,5.3v0.4c0,2.8,2.2,5,5,5h1.5	c2.2,0,7.3,2.2,8.6,4.2c-1.1,1.9-1.7,4-1.7,6.4c0,6.9,5.6,12.5,12.5,12.5S76,100.6,76,93.7c0-2.2-0.5-4.2-1.5-6	c3.1-2.2,7.6-4.5,8.8-4.5h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3c-2-0.8-3.4-2.7-3.4-5C81.1,65.3,82.6,63.3,84.7,62.6z"/>
</g> <path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/> <animate xlink:href="#left-arm" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" filter="url(#blur)" values=" M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9; M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M95,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-8.7-75.2-24.9-118.5; M32,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9,8.5-75.2,24.7-118.5; M95,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-8.7-75.2-24.9-118.5;
M32,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9,8.5-75.2,24.7-118.5;
M32,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9,8.5-75.2,24.7-118.5;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9; Z;" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.8; 0.85; 0.9; 0.95; 1"/> <animate xlink:href="#left-mid-arm" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" values=" M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6; M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6;
M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M68.8,106.4c11.4,0,12.2,56.3,12.2,78.4c0,15.8,0,5.1,0,15.8;
M61.9,106.4c-12.4,0-11.8,56.3-11.8,78.4c0,15.8,0,5.1,0,15.8;
M68.8,106.4c11.4,0,12.2,56.3,12.2,78.4c0,15.8,0,5.1,0,15.8;
M61.9,106.4c-12.4,0-11.8,56.3-11.8,78.4c0,15.8,0,5.1,0,15.8;
M65.9,106.4c-12.4,0-11.8,56.3-11.8,78.4c0,15.8,0,5.1,0,15.8;
M61.9,106.4c-12.4,0-11.8,56.3-11.8,78.4c0,15.8,0,5.1,0,15.8;
M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8; M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6; M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6; Z;" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.8; 0.85; 0.95; 1"/> <animate xlink:href="#right-mid-arm" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" values=" M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6;
M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6;
M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M61.9,106.4c-12.4,0-11.8,56.3-11.8,78.4c0,15.8,0,5.1,0,15.8;
M68.8,106.4c11.4,0,12.2,56.3,12.2,78.4c0,15.8,0,5.1,0,15.8; M61.9,106.4c-12.4,0-11.8,56.3-11.8,78.4c0,15.8,0,5.1,0,15.8;
M68.8,106.4c11.4,0,12.2,56.3,12.2,78.4c0,15.8,0,5.1,0,15.8;
M64.8,106.4c11.4,0,12.2,56.3,12.2,78.4c0,15.8,0,5.1,0,15.8;
M68.8,106.4c11.4,0,12.2,56.3,12.2,78.4c0,15.8,0,5.1,0,15.8; M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8; M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6;
M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6; Z;" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.8; 0.85; 0.95; 1"/> <animate xlink:href="#right-arm" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" values=" M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9; M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2; M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5; M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M32,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9,8.5-75.2,24.7-118.5; M93,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-8.7-75.2-24.9-118.5;
M32,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9,8.5-75.2,24.7-118.5;
M93,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-8.7-75.2-24.9-118.5;
M95,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-8.7-75.2-24.9-118.5;
M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5; M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5; M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2; M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9; Z;" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.35; 0.4; 0.8; 0.85; 0.9; 0.95; 1"/> <animate xlink:href="#right-foot" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" values="
M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5; M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9; M52.5,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9; M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9; M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5; Z;" keyTimes="0; 0.2; 0.25; 0.3; 0.4; 1"/> <animate xlink:href="#left-leg" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" values="
M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18;
M70.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M60.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M57.6,112.9c0,0,0-2,0,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3; M61.6,112.9c0,0,5.7-2,5.7,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M57.6,112.9c0,0,0-2,0,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M65.6,112.9c0,0,5.7-2,5.7,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18; Z;" keyTimes="0; 0.05; 0.1; 0.2; 0.25; 0.30; 0.5; 0.8; 0.9; 1"/> <animate xlink:href="#right-leg" attributeName="d" dur="2.25s" begin="squid.mouseenter" end="squid.mouseleave" repeatCount="indefinite" values=" M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1;
M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18;
M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M57.6,112.9c0,0,0-2,0,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M61.6,112.9c0,0,5.7-2,5.7,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M57.6,112.9c0,0,0-2,0,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M65.6,112.9c0,0,5.7-2,5.7,18.5c0,17.6-0.5,30.2-0.5,40.2c0,4,0,10.3,0,10.3;
M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18; M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1; Z;" keyTimes="0; 0.05; 0.1; 0.15; 0.2; 0.25; 0.3; 0.8; 0.85; 0.9; 1"/> </g>
</svg>
</body>
</html>

Squid Swimming Spinning SVG Animation - Script Codes CSS Codes

svg { display:block; margin: 0 auto; margin-top:36vh;
}
.left-arm,
.right-arm,
.right-leg,
.left-leg,
.right-foot,
.left-mid-arm,
.right-mid-arm{ fill:none; stroke:#000000; stroke-width:12; stroke-linecap:round; stroke-miterlimit:10;
}
g.squid { margin-left:20px;
}
#lightning { fill:white; -webkit-transform-origin:65px 100px 10px; transform-origin:65px 100px 10px;
}
svg#squid:hover #lightning { -webkit-animation: lightning 2.25s infinite; animation: lightning 2.25s infinite;
}
svg#squid:hover #right-foot { -webkit-animation: right-foot 2.25s infinite linear; animation: right-foot 2.25s infinite linear;
}
g.body { fill:black;
}
svg#squid:hover { -webkit-animation: squid 2.25s infinite linear; animation: squid 2.25s infinite linear;
}
svg#squid:hover #squid-body { -webkit-animation: blup 2.25s infinite linear; animation: blup 2.25s infinite linear;
}
@-webkit-keyframes squid { 0% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px)} 35% {-webkit-transform: translate(0px,-25px);transform: translate(0px,-25px)} 40% {-webkit-transform: translate(0px,-25px);transform: translate(0px,-25px)} 55% {-webkit-transform: translate(0px,-20px);transform: translate(0px,-20px)} 100% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px)}
}
@keyframes squid { 0% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px)} 35% {-webkit-transform: translate(0px,-25px);transform: translate(0px,-25px)} 40% {-webkit-transform: translate(0px,-25px);transform: translate(0px,-25px)} 55% {-webkit-transform: translate(0px,-20px);transform: translate(0px,-20px)} 100% {-webkit-transform: translate(0px,0px);transform: translate(0px,0px)}
}
@-webkit-keyframes lightning { 0% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 12% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 14% {-webkit-transform: rotateY(-270deg) translate(60px,0px);transform: rotateY(-270deg) translate(60px,0px);opacity:0;} 16% {-webkit-transform: rotateY(-300deg) translate(-30px,0px);transform: rotateY(-300deg) translate(-30px,0px);opacity:0;} 18% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 20% {-webkit-transform: rotateY(-270deg) translate(60px,0px);transform: rotateY(-270deg) translate(60px,0px);opacity:0;} 22% {-webkit-transform: rotateY(-300deg) translate(-30px,0px);transform: rotateY(-300deg) translate(-30px,0px);opacity:0;} 24% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 26% {-webkit-transform: rotateY(-270deg) translate(60px,0px);transform: rotateY(-270deg) translate(60px,0px);opacity:0;} 30% {-webkit-transform: rotateY(-300deg) translate(-30px,0px);transform: rotateY(-300deg) translate(-30px,0px);opacity:0;} 35% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 100% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;}
}
@keyframes lightning { 0% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 12% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 14% {-webkit-transform: rotateY(-270deg) translate(60px,0px);transform: rotateY(-270deg) translate(60px,0px);opacity:0;} 16% {-webkit-transform: rotateY(-300deg) translate(-30px,0px);transform: rotateY(-300deg) translate(-30px,0px);opacity:0;} 18% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 20% {-webkit-transform: rotateY(-270deg) translate(60px,0px);transform: rotateY(-270deg) translate(60px,0px);opacity:0;} 22% {-webkit-transform: rotateY(-300deg) translate(-30px,0px);transform: rotateY(-300deg) translate(-30px,0px);opacity:0;} 24% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 26% {-webkit-transform: rotateY(-270deg) translate(60px,0px);transform: rotateY(-270deg) translate(60px,0px);opacity:0;} 30% {-webkit-transform: rotateY(-300deg) translate(-30px,0px);transform: rotateY(-300deg) translate(-30px,0px);opacity:0;} 35% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;} 100% {-webkit-transform: rotateY(-360deg) translate(0px,0px);transform: rotateY(-360deg) translate(0px,0px);opacity:1;}
}
@-webkit-keyframes right-foot { 0% {stroke-width:12;} 8% {stroke-width:12;} 12% {stroke-width:0;} 80% {stroke-width:0;} 85% {stroke-width:12;} 100% {stroke-width:12;}
}
@keyframes right-foot { 0% {stroke-width:12;} 8% {stroke-width:12;} 12% {stroke-width:0;} 80% {stroke-width:0;} 85% {stroke-width:12;} 100% {stroke-width:12;}
}
@-webkit-keyframes blup { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, .8, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, .8, 0, 0, 0, 1); } 36% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 3, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 3, 0, 1); } 80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0.75, 0, 0, 0, 21, 1, 0, 3, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0.75, 0, 0, 0, 21, 1, 0, 3, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 0, 0, 1); }
}
@keyframes blup { 0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, .8, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, .8, 0, 0, 0, 1); } 36% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 3, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 3, 0, 1); } 80% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0.75, 0, 0, 0, 21, 1, 0, 3, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0.75, 0, 0, 0, 21, 1, 0, 3, 0, 1); } 100% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 21, 1, 0, 0, 0, 1); }
}
Squid Swimming Spinning SVG Animation - Script Codes
Squid Swimming Spinning SVG Animation - Script Codes
Home Page Home
Developer Alex Coven
Username alcoven
Uploaded August 14, 2022
Rating 3
Size 4,005 Kb
Views 36,432
Do you need developer help for Squid Swimming Spinning SVG Animation?

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!

Alex Coven (alcoven) Script Codes
Name
Buildings Menu
Stackoverflow nth-child answer
Lucro Assets
Alex Coven .COM
Gooey Menu CSS no SVG
Material More Button CSS
SVG Squid Swimming WIP Hover
Hamburger to atom menu CSS
Atom Menu SVG Animation
Atomic Hamburger Menu CSS
Create amazing love letters with AI!

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!