Faces SVG animation

Developer
Anna The Scavenger
Size
2,957 Kb
Views
8,096
  1. Faces SVG animation Previews
  2. Faces SVG animation HTML Codes
  3. Faces SVG animation CSS Codes
  4. Faces SVG animation JS Codes

How do I make an faces svg animation?

Making SVGs with js in a loop via CreateElementNS. What is a faces svg animation? How do you make a faces svg animation? This script and codes were developed by Anna The Scavenger on 14 December 2022, Wednesday.

Faces SVG animation Previews
IQ Test

Faces SVG animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Faces SVG animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svg-container">
<svg width="640" height="500" viewBox="-140 0 640 300">
<circle id="sun" cx="-85" cy="0" r="37" stroke="none" fill="#251586" />
</svg>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Faces SVG animation - Script Codes CSS Codes

body { background: black;
}
.svg-container { height: 100vh; width: 100vw; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-start; justify-content: center;
}

Faces SVG animation - Script Codes JS Codes

var distance = 169.878;
var colors = ['#ffe700', '#ffb937', '#FFA500', '#ff5033', '#e32f11','#a31c04', '#e22467','#861576', '#251586'];
function createFaces(){
for(var x=1; x<10; x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute("id", 'pattern_' + x);
pathEl.setAttribute('d','M' + distance + '26.318006 c 29.3,24.77 29.07,40.97 19.24,85.749994 -0.53,10.83 14.07,-3.14 18.13,7.25 10.24,9.01 4.88,9.33 5,16.38 5.9,9.29 -5.01,16.41 -1.87,20.75 -0.93,13.28 -8.42,20.29 -19.5,33 -8.41,14.51 -38.2,-1.28 -38.38,-1.25 -2.68,1.13 9.3,18.36 21.62,28.88 20.4,13.44 39.98,56.17 48.13,79.37 0,0 -221.25000843,-0.37 -221.25000843,-0.87 17.12000043,-31.59 35.20000043,-79.82 75.00000043,-69.63 2.4,-24.69 0.51,-35.26 -26.62,-60 -5.88,-3.37 -18,-5.75 -29.13,-5.75 -31.090001,-3.55 -8.73,-21.27 -15.2500004,-29.25 -2,-5.25 -0.88,-8.25 3,-8.25 3.7500004,0 3.8800004,-1.5 0.25,-3.13 -8.98000023,-4.56 0.76,-11.59 2.0000004,-14.87 0,-0.62 -2.7500004,-2.38 -5.5000004,-5.499996 -16.9500006,-22.589998 21.9600004,-9.39 25.8700004,-39.999998 0.63,-6.13 2,-9 9.88,-20.88 38.52,-64.8 117.690008,-22.07 129.380008,-12' + 'z' + distance);
pathEl.style.fill = 'none';
pathEl.style.stroke = colors[x-1];
pathEl.style.strokeWidth = '1.2';
pathEl.style.opacity = 1;
document.querySelector('svg').appendChild(pathEl);
distance +=20;
}
}
createFaces();
function fillPattern(){
var tl = new TimelineMax();
for (var i=9; i>0; i--){ tl .fromTo('#pattern_'+i,0.07,{css:{fill:'none'}},{css:{fill:colors[i-1]}, yoyo:true, ease: Power1.easeInOut}) .fromTo('#pattern_'+i,0.07,{css:{autoAlpha:'0.3'}},{css:{autoAlpha:'0.5'}, yoyo:true, ease: Power0.easeInOut},'-=0.02')
} tl .fromTo('#sun',1.2,{attr:{fill:'red'}},{attr:{fill:'#251586'}, yoyo:true, ease: Power1.easeInOut},'-=1') .fromTo('#sun',1.2,{css:{autoAlpha:0.6}},{css:{autoAlpha:0.9}, yoyo:true, ease: Power1.easeInOut},'-=1.5') return tl;
}
function outlinesPatternRight(){
var tl = new TimelineMax();
for (var i=1; i<10; i++){ tl .from('#pattern_'+i, 0.3, {css:{autoAlpha:0}, yoyo:true, ease: Power0.easeInOut},'-=0.2')
} tl .fromTo('#sun',1.2,{css:{autoAlpha:1}},{css:{autoAlpha:0.4}, yoyo:true, ease: Power1.easeInOut},'-=1.5') .fromTo('#sun',1.2,{attr:{fill:'#251586'}},{attr:{fill:'red'}, yoyo:true, ease: Power1.easeInOut},'-=1') .fromTo('#sun',1.4,{css:{scale:0.6}},{scale:1, yoyo:true, ease: Power1.easeInOut},'-=1.5') .fromTo('#pattern_7',1.2,{attr:{fill:'none'}},{attr:{fill:'red'}, yoyo:true, ease: Power1.easeInOut},'-=1.5') return tl;
}
function squeezeToOne(){
var tl = new TimelineMax();
for (var i=8; i>0; i--){ tl .fromTo('#pattern_'+i,0.4,{css:{autoAlpha:1}},{css:{autoAlpha:0},ease: Power1.easeInOut},'-=0.2')
}
tl
.fromTo('#pattern_9',1,{x:0},{x:-150,ease: Power1.easeInOut},'-=0.2')
.fromTo('#pattern_9',1,{css:{autoAlpha:'0.5'}},{css:{autoAlpha:'1'},ease: Power1.easeInOut},'-=1')
return tl;
}
var masterTL = new TimelineMax();
masterTL .add(outlinesPatternRight()) .add(fillPattern()) .add(squeezeToOne());
Faces SVG animation - Script Codes
Faces SVG animation - Script Codes
Home Page Home
Developer Anna The Scavenger
Username ScavengerFrontend
Uploaded December 14, 2022
Rating 4
Size 2,957 Kb
Views 8,096
Do you need developer help for Faces 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!

Anna The Scavenger (ScavengerFrontend) Script Codes
Name
SVG Dia de Los Muertos tattoo hands
React Game - SVG Princess Mononoke
Move the SVG eye
Move the binoculars
Elegant SVG geometric art
Hover over SVG
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!