Atom Menu SVG Animation

Developer
Size
2,919 Kb
Views
42,504

How do I make an atom menu svg animation?

I'm creating an SVG nav-menu Icon that turns from an atom to a divided sign to close the menu.. What is a atom menu svg animation? How do you make a atom menu svg animation? This script and codes were developed by Alex Coven on 11 August 2022, Thursday.

Atom Menu SVG Animation Previews

Atom Menu SVG Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Atom Menu SVG Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="container">
<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" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<!--<g>	<circle fill="#F26451" cx="17.6" cy="3.3" r="1.4"/>
</g>
<g>	<circle fill="#F26451" cx="6.4" cy="23.1" r="1.4"/>
</g>-->
<line class="line" stroke-width="1.3" stroke-miterlimit="10" x1="3.7" y1="26.1" x2="26.2" y2="3.6"/>
<path class="vertical" d="M9.9,14.9a5,14 0 1,0 10,0a5,14 0 1,0 -10,0"/>
<ellipse class="neg" transform="matrix(0.5037 0.8639 -0.8639 0.5037 20.2917 -5.4991)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
<ellipse class="pos" transform="matrix(-0.5037 0.8639 -0.8639 -0.5037 35.3327 9.5202)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
<path class="circlet" d="M16.4,3.2a1.3,1.3 0 1,0 2.6,0a1.3,1.3 0 1,0 -2.6,0"/>
<path class="circleb" d="M5,23.2a1.4,1.4 0 1,0 2.8,0a1.4,1.4 0 1,0 -2.8,0"/>
</svg>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/tween.min_1.js'></script> <script src="js/index.js"></script>
</body>
</html>

Atom Menu SVG Animation - Script Codes CSS Codes

.wrapper { top:0; left:0; position:absolute; width:100%; height:100%; background:#F26451;
}
.container { width:100%; position:fixed; top:30%; bottom:70%;
}
svg { width:100px; height:auto; margin:10% auto; display:block;
}
line, .vertical, ellipse.neg, ellipse.pos { stroke:#fff; fill:none; stroke-width:1.3; stroke-miterlimit:10;
}
.circlet, .circleb { stroke:#fff; fill:#F26451; stroke-width:1.3; stroke-miterlimit:10;
}
.line { display:none;
}
/*.circlet { -webkit-animation: vertical 2s -5s linear infinite;
animation: vertical 2s -5s linear infinite;
}
@-webkit-keyframes vertical { 0% {transform: scale(1, 1)} 50% {transform: scale(1, 1.1)} 100% {transform: scale(1, 1)}
}*/
/* -ms-transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); transform: skew(30deg,20deg);*/

Atom Menu SVG Animation - Script Codes JS Codes

(function($){ $('[class^="circle-"]').animate({opacity:1},500);
// get the animation path node
var $path = $('.vertical'), path = $path[0];
var $path2 = $('.vertical'), path2 = $path2[0];
// get the animation object node
var $obj = $('.circlet');
var $obj2 = $('.cirlceb');
// get path's length
var pathLength = path.getTotalLength();
var pathLength2 = path2.getTotalLength();
// create new tween by initializing TWEEN.Tween object from 0
var tween = new TWEEN.Tween({ length: 0 }) // to path length // in 2000 milliseconds .to({ length: pathLength }, 1500) // on update callback fires on every tick .onUpdate(function(){ var point = path.getPointAtLength(this.length); $obj.css({ 'transform': 'translate('+ point.x + 'px,'+ point.y +'px)' }); }).repeat(999999999).start();
var tween2 = new TWEEN.Tween({ length: 0 })
// to path length
// in 2000 milliseconds
.to({ length: pathLength2 }, 1500)
// on update callback fires on every tick
.onUpdate(function(){ var point2 = path2.getPointAtLength(this.length); $obj2.css({ 'transform': 'translate('+ point2.x + 'px,'+ point2.y +'px)' });
}).repeat(999999999).start();
// animate loop
animate = function(){ requestAnimationFrame(animate) TWEEN.update()
}
//start the animation loop
animate() }(jQuery));
Atom Menu SVG Animation - Script Codes
Atom Menu SVG Animation - Script Codes
Home Page Home
Developer Alex Coven
Username alcoven
Uploaded August 11, 2022
Rating 3
Size 2,919 Kb
Views 42,504
Do you need developer help for Atom Menu 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
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!