Animate a paper plane along an SVG path, looking ahead

Developer
PotatoDie
Size
3,734 Kb
Views
48,576
  1. Animate a paper plane along an SVG path, looking ahead Previews
  2. Animate a paper plane along an SVG path, looking ahead HTML Codes
  3. Animate a paper plane along an SVG path, looking ahead CSS Codes
  4. Animate a paper plane along an SVG path, looking ahead JS Codes

How do I make an animate a paper plane along an svg path, looking ahead?

To move a plane or racecar along an svg path is incredibly simple. Based on http://codepen.io/chris-creditdesign/pen/blJty, I wanted the arrow to head the way it's going.. What is a animate a paper plane along an svg path, looking ahead? How do you make a animate a paper plane along an svg path, looking ahead? This script and codes were developed by PotatoDie on 15 September 2022, Thursday.

Animate a paper plane along an SVG path, looking ahead Previews
IQ Test

Animate a paper plane along an SVG path, looking ahead - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animate a paper plane along an SVG path, looking ahead</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="global-container"> <div id="content" class="square_wrapper"> <div class="padder"> <p>Move object along path. Rotate it so it faces front <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve"> <path id="curve" d="m 98.741117,236.04954 c -21.050685,115.22409 4.726463,256.82583 77.840823,341.96949 84.61604,98.53765 237.09135,166.62678 352.09389,119.16529 99.50928,-41.06745 169.71107,-298.88367 169.71107,-298.88367 0,0 -292.20624,185.65505 -312.72094,-23.28961 C 360.32245,116.88426 262.97301,105.38029 186.53831,107.18027 c -76.43469,1.79997 -78.15768,76.10598 -87.797193,128.86927 z"/> <path id="arrow" d="m -24.094296,40.145487 45.772337,0 -22.8312844,-111.436901 z"/> </svg> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Animate a paper plane along an SVG path, looking ahead - Script Codes CSS Codes

/* Web Fonts @import */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,500);
body { margin: 0;
}
p { font: 400 normal 0.8em/1 "Open Sans",sans-serif; margin-left: 1em;
}
#global-container { width: 100%; max-width: 800px; margin: 0 auto; padding: 0; position: relative;
}
.square_wrapper { width: 100%; padding-bottom: 100%; position: relative; background: #335;
}
.square_wrapper .padder { margin: 1px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #292;
}
.square_wrapper svg { width: 100%; height: 100%; margin-top: -50px;
}
.square_wrapper svg path#curve { fill: none; stroke: #222; stroke-width: 2; stroke-dasharray: 5,5;
}
.square_wrapper svg #arrow { fill: #d21; stroke: #000; stroke-width: 1;
}

Animate a paper plane along an SVG path, looking ahead - Script Codes JS Codes

var arrow, curve, D;
window.onload = function() {	arrow = document.getElementById('arrow');	curve = document.getElementById('curve');	D = curve.getTotalLength();	requestAnimationFrame(run);
}
var t = 0.7, // parameter 0->1 to parametrize position on curve	dt = 0.003,// step size	vision = 10;	// how many steps to look ahead for rotation
function run () {	t = (t + dt) % 1;	var p = curve.getPointAtLength(t * D);	// To calculate angle get one point ahead, and one you just passed	var p0 = curve.getPointAtLength(((1+t - 0.5 * vision * dt) % 1) * D);	var p1 = curve.getPointAtLength(((t + vision * dt) % 1) * D);	var angle = 90 + Math.atan2 ( p1.y - p0.y, p1.x - p0.x ) * (180 / Math.PI);	arrow.setAttribute("transform",	"translate("+p.x+","+p.y+") rotate("+angle+")"	);	requestAnimationFrame(run);
}
Animate a paper plane along an SVG path, looking ahead - Script Codes
Animate a paper plane along an SVG path, looking ahead - Script Codes
Home Page Home
Developer PotatoDie
Username potatoDie
Uploaded September 15, 2022
Rating 3
Size 3,734 Kb
Views 48,576
Do you need developer help for Animate a paper plane along an SVG path, looking ahead?

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!

PotatoDie (potatoDie) Script Codes
Name
Emerging star
Spirograph Animated
Spirograph
Just in time
Markov race
Drivetrain
Flex hover transitions
Drawing clouds
Curvature_04
Jingle Jangle Bitcracker
Create amazing art & images 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!