Evolve Logo SVG animation

Developer
Alyssa
Size
4,280 Kb
Views
24,288
  1. Evolve Logo SVG animation Previews
  2. Evolve Logo SVG animation HTML Codes
  3. Evolve Logo SVG animation CSS Codes
  4. Evolve Logo SVG animation JS Codes

How do I make an evolve logo svg animation?

Made with SnapSVGDON'T FORGET: when using fonts in SVG, Firefox needs the units to be specified.might try GreenSock, and/or VelocityJS. What is a evolve logo svg animation? How do you make a evolve logo svg animation? This script and codes were developed by Alyssa on 08 September 2022, Thursday.

Evolve Logo SVG animation Previews
IQ Test

Evolve Logo SVG animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Evolve Logo SVG animation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link href='https://fonts.googleapis.com/css?family=Syncopate:400,700' rel='stylesheet' type='text/css'>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script>
(function() { var path = '//easy.myfonts.net/v2/js?sid=190735(font-family=UNicod+Sans+Light)&key=6Awq4mOJ4H', protocol = ('https:' == document.location.protocol ? 'https:' : 'http:'), trial = document.createElement('script'); trial.type = 'text/javascript'; trial.async = true; trial.src = protocol + path; var head = document.getElementsByTagName("head")[0]; head.appendChild(trial);
})();
</script>
<h1>#4v1</h1>
<svg id="Evolve">
</svg>
<span id="replay" style="display:none"><i class="fa fa-refresh fa-2x"></i></span> <script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.2.0/snap.svg-min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Evolve Logo SVG animation - Script Codes CSS Codes

body { background: #1a1a1a; font-family: "Syncopate", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; font-weight: 500;
}
h1 { margin: 0 auto; width: 50%; text-align: center; font-family: 'UNicod Sans Light'; color: #ededed; text-transform: uppercase; padding: 1em 1em 0em 1em;
}
#Evolve { position: relative; display: block; margin: auto; width: 650px; height: 180px; /* border: 1px solid $blood; */
}
#Evolve + #replay { display: block; position: relative; margin: auto; width: 650px; color: #555; cursor: pointer; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;
}
#Evolve + #replay:hover { color: #ededed;
}
.fa-refresh { position: absolute; top: -2.1em; right: .5em;
}

Evolve Logo SVG animation - Script Codes JS Codes

var blood = '#ff3c1f', fire = '#ffc342', dirt = '#1a1a1a', w = 500, h = 65, gutter = 10, offset = 35, baseline = .78*h + offset, timeoutID;
var s = Snap("#Evolve"), assault = s.rect( w/2, 0, h*2, h*2).attr({opacity:0}), trapper = s.rect( w/2, 0, h*2, h*2).attr({opacity:0}), medic = s.rect( w/2, 0, h*2, h*2).attr({opacity:0}) support = s.rect( w/2, 0, h*2, h*2).attr({opacity:0}), hunters = s.group(assault, trapper, medic, support), vs = s.text( 345, baseline, "V").attr({ opacity: 0, fill: blood, 'font-weight': 700, 'font-size': '300px', //firefox needs unit specified 'text-anchor': 'middle' }); monster = s.rect( w/2, 0, h*2, h*2).attr({ opacity: 0, fill: "r()"+fire+"-"+blood //fill: blood, }), e = s.text( 22, baseline, "E"), //s.circle( 30, 25, 15), //duplicate, x:305 v = s.text( 96, baseline, "V"), //s.circle( 342, h/2, h*.40), //duplicate, x:45 o = s.rect( 160, 35, 65, 65), //o = s.text( 167, baseline-2, "[]"), //s.circle( 140, 25, 15), l = s.text( 248, baseline, "L"), //s.circle( 195, 25, 15) e2 = s.text( 395, baseline, "E"), letters = s.group(e, v, o, l, e2); hunters.attr({ fill: "r()"+fire+"-"+blood //fill: blood, }); letters.attr({ 'font-size': h*.8+'px', //firefox needs unit specified fill: dirt, opacity: 0, stroke: dirt, strokeWidth: 3 }); o.attr({ mask: s.rect(177,51,30,34).attr({stroke: "#fff", strokeWidth: 6}) });
var animateVS = function(value) { vs.attr({ 'font-size': value * 300 + 'px' }) }, animateSupport = function(value){ // 2. L square comes in on left support.animate({ opacity: 1, width: h, height: h, x: (h*3 + gutter*4), y: offset }, 500, mina.easeout, animateMonster); //hunters.select("rect:nth-child(4)") }, animateMonster = function(value){ // 3. E square comes in on right monster.animate({ opacity:1, width: h, height: h, x: 385, y: offset }, 500, mina.easeout, animateMedic); //, width: (h*4) }, animateMedic = function(value) { // 3.5 monster grows monster.animate({width: 250}, 1400, mina.easeinout) // 4. O square comes in on left medic.animate({ opacity: 1, width: h, height: h, x: (h*2 + gutter*3), y: offset }, 500, mina.easeout, animateTrapper); }, animateTrapper = function(value) { // 5. V square comes in on left trapper.animate({ opacity: 1, width: h, height: h, x: (h + gutter*2), y: offset }, 500, mina.easeout, animateAssault); }, animateAssault = function(value) { // 6. E square comes in on left assault.animate({ opacity: 1, width: h, height: h, x: gutter, y: offset }, 500, mina.easeout, wait); }, wait = function(value) { // 7. wait timeoutID = window.setTimeout(animateLetters, 1200); }, animateLetters = function() { // 8. letters fade in, inside blocks letters.animate({opacity:1}, 1000, mina.backin, function(value){ //$('#replay').show() //document.querySelector('#replay').style.display = ''; }) window.clearTimeout(timeoutID); }, replay = function() { // hide replay button so we can't click again until the animation has finished //$('#replay').hide(); //document.querySelector('#replay').style.display = 'none'; // 1. V flys in large from center, pulses and slowly comes up to normal size Snap.animate( 1, .2, animateVS, 700, mina.backin, animateSupport ) //backin vs.animate({opacity:1}, 800); }
// init
replay();
//document.querySelector('#replay').onclick = function(){
// replay();
//}
Evolve Logo SVG animation - Script Codes
Evolve Logo SVG animation - Script Codes
Home Page Home
Developer Alyssa
Username alyda
Uploaded September 08, 2022
Rating 3
Size 4,280 Kb
Views 24,288
Do you need developer help for Evolve Logo 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!

Alyssa (alyda) Script Codes
Name
Evolve Error Pages
Evolve Patterns
Recommendation slider
Shadow Dom with Polymer
Evolve JS
Huddle Grid-Detail View
Evolve Media Gallery
360 Image Slider
CSS Patterns
Wire up a Backend
Create amazing marketing copy 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!