Swarm

Developer
Elliot Geno
Size
2,384 Kb
Views
36,432
  1. Swarm Previews
  2. Swarm HTML Codes
  3. Swarm CSS Codes
  4. Swarm JS Codes

How do I make an swarm?

Circles are animated along the same path inside a group. The group rotates giving the illusion of extremely dynamic and complex motion.. What is a swarm? How do you make a swarm? This script and codes were developed by Elliot Geno on 11 September 2022, Sunday.

Swarm Previews
IQ Test

Swarm - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Swarm</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 980 700">
<!--	give this path a stroke to reveal the secret! stroke="black" --> <path class="path" fill="none" d="M373.6 317.6c15.9-37.7 59.9-44.2 66-45 34-4.5 77 10.4 85.5 39 3.4 11.5 1.6 26.6-7.5 36-13.6 14-39.6 11.9-55.5 0-17.4-12.9-22.5-37.1-16.5-54 12.1-34.1 72.7-48.2 97.5-28.5 32.7 26-5.6 104.1 28.5 124.5 7.9 4.7 22.2 7.8 31.5 1.5 8.1-5.4 11.1-16.9 10.5-25.5-1.8-26.6-38.4-31.1-79.5-70.5-20.9-20-47-45-42-72 4.9-26.4 38.3-48.7 66-45 35.1 4.6 66 51.5 63 90-7.9 102.6-255.1 127.8-252 208.5 1 25.6 26.9 49.8 49.5 52.5 39.9 4.8 84.4-54.2 73.5-82.5-11.1-28.7-72.7-7.7-106.5-51-14.6-18.8-24-49.6-12-78z"/>	<circle r="5"/>	<circle r="5"/>	<circle r="5"/>	<circle r="5"/>	<circle r="5"/>	<circle r="5"/>	<circle r="5"/>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Swarm - Script Codes CSS Codes

body{	margin:0;
}
svg{	width:100%;	height:100%;	position:fixed;
}

Swarm - Script Codes JS Codes

var path = MorphSVGPlugin.pathDataToBezier(".path");
var timeline = new TimelineMax();
// move circles along path
timeline.staggerTo("circle", 4.5, {	force3D: true,	bezier: {	type: "cubic",	values: path	},	ease: Linear.easeNone,	repeat: -1
}, .57);
timeline.time(9);
// rotate svg (not needed but make look random)
TweenMax.to("svg", 3.2, {	rotation: -360,	repeat: -1,	transformOrigin: "center",	ease: Linear.easeNone
})
Swarm - Script Codes
Swarm - Script Codes
Home Page Home
Developer Elliot Geno
Username pyrografix
Uploaded September 11, 2022
Rating 4.5
Size 2,384 Kb
Views 36,432
Do you need developer help for Swarm?

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!

Elliot Geno (pyrografix) Script Codes
Name
Iris
Following a Path
Calendar
Crash Loader
Gnat Attack
Dot Hopper - Pagination
Clock
Eye Bee M
TweenMax animating array object
Alternate Tween Properties - TweenMax
Create amazing web content 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!