Animated text on bezier curve

Developer
André Michelle
Size
2,252 Kb
Views
16,192
  1. Animated text on bezier curve Previews
  2. Animated text on bezier curve HTML Codes
  3. Animated text on bezier curve CSS Codes
  4. Animated text on bezier curve JS Codes

How do I make an animated text on bezier curve?

What is a animated text on bezier curve? How do you make a animated text on bezier curve? This script and codes were developed by André Michelle on 18 October 2022, Tuesday.

Animated text on bezier curve Previews
IQ Test

Animated text on bezier curve - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated text on bezier curve</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas width="512" height="512"></canvas> <script src="js/index.js"></script>
</body>
</html>

Animated text on bezier curve - Script Codes CSS Codes

html, body {	background-color: #111;
}
canvas { top: 50%; left: 50%;	position: absolute; transform: translateX(-50%) translateY(-50%);	background-color: #333;
}

Animated text on bezier curve - Script Codes JS Codes

var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
var text = "Hello curvey text on a bezier curve ... I follow your footprints ...♥︎";
var p0 = {	x: 16,	y: 0
};
var p1 = {	x: 256,	y: 0
};
var p2 = {	x: 496,	y: 0
};
var phase = 0.0;
(function() {	p0.y = Math.sin(phase*0.013) * 240 + 256;	p1.x = Math.sin(phase*0.031) * 64 + 256;	p1.y = Math.sin(phase*0.027) * 240 + 256;	p2.y = Math.sin(phase*0.022) * 240 + 256;	phase += 1.0;	context.clearRect(0, 0, canvas.width, canvas.height);	context.font = "18px Open Sans";	context.textBaseline = "alphabetic";	context.fillStyle = "#FFF";	var t = 0.0;	var i = 0;	var px, py, vx, vy, vl;	var letterSpacing = 1.0;	var char = text.charAt(0);	var charWidth = context.measureText(char).width + letterSpacing;	while (true) {	px = (1 - t) * (1 - t) * p0.x + 2 * t * (1 - t) * p1.x + t * t * p2.x;	py = (1 - t) * (1 - t) * p0.y + 2 * t * (1 - t) * p1.y + t * t * p2.y;	vx = 2 * t * (p0.x - 2 * p1.x + p2.x) - 2 * p0.x + 2 * p1.x;	vy = 2 * t * (p0.y - 2 * p1.y + p2.y) - 2 * p0.y + 2 * p1.y;	vl = Math.sqrt(vx * vx + vy * vy);	context.save();	context.translate(px, py);	context.rotate(Math.atan2(vy, vx));	context.fillText(char, -charWidth * 0.5, 0);	context.restore();	if (i < text.length) {	t += charWidth * 0.5 / vl;	char = text.charAt(++i);	charWidth = context.measureText(char).width + letterSpacing;	t += charWidth * 0.5 / vl;	} else {	break;	}	}	window.requestAnimationFrame(arguments.callee);
})();
Animated text on bezier curve - Script Codes
Animated text on bezier curve - Script Codes
Home Page Home
Developer André Michelle
Username andremichelle
Uploaded October 18, 2022
Rating 3
Size 2,252 Kb
Views 16,192
Do you need developer help for Animated text on bezier curve?

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!

André Michelle (andremichelle) Script Codes
Name
Battery Api
Happy PI Day
Sonic Brain Food
Web Audio Api MultiBandCompressor
Time Displacement
Web Audio Api Convolver
Stern-Brocot Sequence
Loop Mixing
X0X Clap
Fourier series
Create amazing blog posts 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!