Animated SVG Worm

Developer
Christian Östman
Size
4,161 Kb
Views
32,384
  1. Animated SVG Worm Previews
  2. Animated SVG Worm HTML Codes
  3. Animated SVG Worm CSS Codes
  4. Animated SVG Worm JS Codes

How do I make an animated svg worm?

A snail walking on terrain - part1... Using TweenMax and some SVG. . What is a animated svg worm? How do you make a animated svg worm? This script and codes were developed by Christian Östman on 11 September 2022, Sunday.

Animated SVG Worm Previews
IQ Test

Animated SVG Worm - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated SVG Worm</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg height="640" width="1136" style="background: red"> <path transform="" d="M 478.85949,896.79868 C 475.92315,851.99939 481.28183,818.98908 490.15422,777.60068 473.00683,808.12974 471.93763,848.29431 468.48055,896.79868 z" id="path2985" style="fill:#000000;fill-opacity:1;stroke:red" /> <circle id="c0" cx="0" cy="0" r="18" fill="black" /> <circle id="c1" cx="0" cy="0" r="20" fill="black" /> <circle id="c2" cx="0" cy="0" r="20" fill="black" /> <circle id="c3" cx="0" cy="0" r="20" fill="black" /> <circle id="c4" cx="0" cy="0" r="20" fill="black" /> <circle id="c5" cx="0" cy="0" r="20" fill="#000000" /> <circle id="c6" cx="0" cy="0" r="20" fill="#000000" /> <circle id="c7" cx="0" cy="0" r="20" fill="#000000" /> <circle id="c8" cx="0" cy="0" r="20" fill="#000000" /> <g id="c9" > <circle cx="0" cy="0" r="18" fill="#000000" /> <g id="antenna1"> <ellipse cx="10" cy="-16" rx="2" ry="20" fill="#000000"/> <circle cx=10 cy=0 fill=#000000 r="4" /> </g> <g id="antenna2"> <ellipse cx="10" cy="-16" rx="2" ry="20" fill="#000000"/> <circle cx=10 cy=0 fill=#000000 r="4" /> </g> </g> <circle id="shell" cx="0" cy="0" r="65" fill="none" /> <path id="anim_path" class="st458" d="M0 593 126 590 412 574 611 496 753 435 900 500 1250 557 1255 558 1511 574 1514 687 99 691 0 689 0 587" fill="black" stroke="black"/> <!-- <rect width="1000" height="200" y="425" x=-10 style="fill:rgb(0,0,0);stroke-width:1;stroke:rgb(0,0,0)" />--> <circle id="target" r="25" fill="none"/> <g transform="translate(0,0)" id="layer1"> <g id="grass"> <path id="grass1" d="M 10.379098,120 C 7.4427133,75.2007 12.801475,42.19037 21.674,0.80197 4.5263489,31.33103 3.4571326,71.4956 0,120 z" id="path2985" style="fill:#000000;fill-opacity:1;stroke:none" /> </g> </g>
</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/DrawSVGPlugin.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?v=0.6.0'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/8076/keyboardjs.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/BezierPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated SVG Worm - Script Codes CSS Codes

body
{ background:black; text-align:center;
}
svg
{ margin-left:auto; margin-right:auto; width:1136px; border: 20px solid white;
}

Animated SVG Worm - Script Codes JS Codes

var body = [];
var shell = document.getElementById("shell");
var antenna1 = document.getElementById("antenna1");
var antenna2 = document.getElementById("antenna2");
var target = document.getElementById("target");
var position = {x:0, y:0,rotation:0};
var grass = document.getElementById("grass");
var straw = document.getElementById("grass1");
var grassData = [];
var x = 0;
var startX = -220;
var startY = 530;
var progress = 100;
var allPositions = [];
var state = 0;
// 0 = walking
// 1 == safe
for(var i=0; i < 10; i++)
{ body.push(document.getElementById("c" + i)) TweenMax.set(body[i],{x:i*20 + startX,y:startY,scaleX:1.2,scaleY:1.1}); body[i].x = i*20 + startX; TweenMax.set(shell,{x:body.length/2*20 + startX - 15,y:startY - 50}); // TweenMax.to(body[i],.4,{ease:Sine.easeInOut,delay:i/20,y:140,yoyo:true,repeat:-1});
}
TweenMax.set(antenna1,{x:10,y:36,rotation:-180 - 10});
TweenMax.set(antenna2,{x:10,y:36,rotation:-180 + 10});
var bezierData = MorphSVGPlugin.pathDataToBezier("#anim_path");
var tween = TweenMax.to([target,position], 1136*2.79 , {bezier: {autoRotate:true,values:bezierData, type:"cubic"}, ease:Linear.easeNone, repeat:-1, yoyo:true,onUpdate:onUpdateTarget});
// POSITION GRASS:
for(var i=0; i <400; i++)
{ var copy = straw.cloneNode(false); grass.appendChild(copy);	tween.time(i*3); TweenMax.set(copy,{scaleX:Math.random() * .2 + .7,scaleY:Math.random() * .5 + .5,rotation:Math.random() * 20 - 10}); var x = i*3 - 20 + Math.random()*8; if(position.y < 200) x = -1000; TweenMax.set(copy,{x:x,y:position.y - Math.random() * 10-20,rotation:position.rotation*.4 + Math.random() * 10 -5}); var windPower = Math.random() * 3 - 1.5; TweenMax.to(copy,Math.random()*1 + .3,{rotation:"-=" + windPower,repeat:-1,yoyo:true,transformOrigin:"50% 100%",ease:Sine.easeInOut}); copy.x = x; grassData.push(copy)
}
TweenMax.set(straw,{alpha:0});
function onUpdateTarget(e)
{ //startY = target._gsTransform.y - 30 ;
}
/*function updateProgress()
{ progress += 10; tween.pause(progress); startY = target._gsTransform.y - 30 ;
}*/
animateIn();
function animateIn()
{ for(var i=0; i < 10; i++) { var xTarget = 20 - i * 2; TweenMax.to(body[i],1,{x:"+=" + xTarget}); body[i].x += xTarget; tween.time(body[i].x); startY = position.y - 18; if(i == 3) { TweenMax.to(shell,2,{x:"+=" + xTarget,ease:Elastic.easeOut.config(.5, .3),y:startY - 70})} TweenMax.to(body[i],1.5 + i*.1,{y:Math.sin(i*.8+1) * 22 -22 + startY,ease:Elastic.easeOut.config(.5, .3)}) } TweenMax.to(antenna1,Math.random() + .6 * 3,{ease:Elastic.easeOut,rotation:Math.random() * 15 - 180 + 5}); TweenMax.to(antenna2,Math.random() + .6 * 3,{ease:Elastic.easeOut,rotation:Math.random() * -15 - 180 - 5}); //TweenMax.to(antenna1,1,{delay:1,rotation:Math.random() * 10 - 180,yoyo:true,repeat:-1,ease:Elastic.easeOut}); TweenMax.delayedCall(Math.random() * .5 + 1,animateOut);
}
function animateOut()
{ for(var i=0; i < 10; i++) { var xTarget = 10 + i * 2; body[i].x += xTarget; tween.time(body[i].x); startY = position.y - 18; // xTarget = 0; TweenMax.to(body[i],2,{x:"+=" + xTarget,ease:Elastic.easeOut.config(.5,.3)}); if(i == 3) { TweenMax.to(shell,2,{x:"+=" + xTarget,ease:Elastic.easeOut.config(.5,.3),y:startY - 50})} TweenMax.to(body[i],2 + i*.1,{y:startY,ease:Elastic.easeOut.config(.6, .3)}) for(var j=0; j < grassData.length; j++) { var g = grassData[j]; if(Math.abs((body[i].x -10) - g.x) < 10 ) { if(g.isDown != true) { TweenMax.to(g,1 + Math.random() * .2 - .1,{delay:0,rotation:Math.random() * 15 + 25,ease:Back.easeOut}); TweenMax.to(g,20+Math.random() * 15,{delay:14,rotation:Math.random() * 5 - 2.5,onComplete:windInGrass,onCompleteParams:[g]}); g.isDown = true; } } } } TweenMax.to(antenna1,Math.random() + .6 * 3,{ease:Elastic.easeOut,rotation:Math.random() * 15 - 180 + 5}); TweenMax.to(antenna2,Math.random() + .6 * 3,{ease:Elastic.easeOut,rotation:Math.random() * -15 - 180 - 5 }); TweenMax.delayedCall(Math.random() * .5 + 1,animateIn);
}
function windInGrass(grass)
{ grass.isDown = false; var windPower = Math.random() * 3 - 1.5; TweenMax.to(grass,Math.random()*1 + .3,{rotation:"-=" + windPower,repeat:-1,yoyo:true,transformOrigin:"50% 100%",ease:Sine.easeInOut});
}
function goSafe()
{ if(state == 1) return; TweenMax.killAll(); state = 1; tween.time(body[4].x); startY = position.y - 22; for(var i=0; i < 10; i++) { TweenMax.to(body[i],.5,{delay:i/1000,x:body[4].x,ease:Back.easeIn,y:startY-30}); } TweenMax.to(shell,.8,{delay:.2,y:startY - 37,ease:Bounce.easeOut}); TweenMax.to(antenna1, 1,{delay:1,ease:Elastic.easeOut,rotation:-130}); TweenMax.to(antenna2,1 ,{ease:Elastic.easeOut,rotation:-150 });
}
function goOut()
{ if(state == 0 || state == -1 ) return; state = 0; TweenMax.killAll(); for(var i=0; i < 10; i++) { TweenMax.to(body[i],.4,{y:startY,x:i*20 + body[0].x,ease:Back.easeOut}); } TweenMax.to(shell,.5,{x:23 + body[4].x,y:startY - 50}); TweenMax.to(antenna1, 1,{delay:1,ease:Elastic.easeOut,rotation:Math.random() * 15 - 180 + 5}); TweenMax.to(antenna2,1 ,{ease:Elastic.easeOut,rotation:Math.random() * -15 - 180 - 5 }); TweenMax.delayedCall(.6,animateIn);
}
var self = this;
keyboardJS.bind('spacebar', function(e) { goSafe();
}, function(e) { goOut();
});
//TweenMax.to(body,1,{x:100,y:100,scale:1});
Animated SVG Worm - Script Codes
Animated SVG Worm - Script Codes
Home Page Home
Developer Christian Östman
Username chribbe
Uploaded September 11, 2022
Rating 4
Size 4,161 Kb
Views 32,384
Do you need developer help for Animated SVG Worm?

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!

Christian Östman (chribbe) Script Codes
Name
The Elevator Ball Pit
Random 3D Landscape - camping trip
Workshop Start
A Small Island
Lounge Weather
Water Ripples - HtmlGL
The Fish
Animated SVG Snail 1
Fire particles PIXI
The pigs
Create amazing Facebook ads 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!