Animated logo SVG, CSS3 and JS
How do I make an animated logo svg, css3 and js?
What is a animated logo svg, css3 and js? How do you make a animated logo svg, css3 and js? This script and codes were developed by Renaud Tertrais on 12 August 2022, Friday.
Animated logo SVG, CSS3 and JS - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated logo SVG, CSS3 and JS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Raleway:400,600,300' rel='stylesheet' type='text/css'>
<div class="container"> <div class="align-helper"></div> <div id="logo-container"> <svg id="logo"> <rect x="0" y="0" width="100%" height="100%" class="bg"/> <path d="M 80,34 L 160,110 L 160,160 L 80,160 L 30,122 L 80,34" class="tri-shadow"/> <path d="M 80,34 L 130,122 L 30,122 L 80,34" class="tri-fill"/> <rect x="30" y="34" width="100" height="88" class="mask"/> <path d="M 80,34 L 130,122 L 30,122 L 80,34" class="tri-stroke"/> </svg> <div class="percent">100 %</div> <h1>Bienvenue,</h1> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Animated logo SVG, CSS3 and JS - Script Codes CSS Codes
* { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: "Raleway", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
.container { position: absolute; width: 100%; height: 100%; background-color: #252935; text-align: center;
}
.container > * { display: inline-block; vertical-align: middle;
}
.align-helper { height: 100%; width: 0;
}
/* * * * * LOGO * * *
*/
#logo { width: 160px; height: 160px; position: relative;
}
#logo .bg { fill: #d5cb4a; display: none;
}
#logo .tri-stroke { fill: none; stroke: white;
}
#logo .tri-fill { fill: white; stroke: white;
}
#logo .tri-shadow { fill: #c8bd2e; display: none;
}
#logo .mask { stroke: none; fill: #252935;
}
.shadow { /*
$shadow : 0 0 0 transparent;
@for $i from 1 to 50{ $shadow : $shadow +","+ ($i+px $i+px 1px rgba(0,0,0, 0.1));
}
@include box-shadow(unquote($shadow));*/
}
#logo-container { position: relative; width: 160px; height: 160px;
}
#logo-container .percent { top: 130px; position: absolute; width: 100%; text-align: center; color: #d5cb4a; font-size: 14px; font-weight: 300;
}
#logo-container h1 { width: 100%; text-align: center; font-size: 26px; text-transform: uppercase; color: #FFF; font-weight: 400; margin-top: 10px; display: none;
}
Animated logo SVG, CSS3 and JS - Script Codes JS Codes
var maskInterval;
$(function(){ $mask = $("#logo .mask"); var time = 2000; var step = 2; var size = $mask.attr("height"); maskInterval = setInterval(function(){ var h = Math.max(0,$mask.attr("height") - step); $mask.attr("height", h ); $(".percent").text( Math.ceil((size-h)*100/size)+" %") if(h <= 0) loaded(); },100);
});
function loaded(){ clearInterval(maskInterval); $("#logo .mask").hide(); $(".percent").delay(200).fadeOut(500); $(".bg").delay(500).fadeIn(1000); $(".tri-shadow").delay(1000).fadeIn(1000); $("h1").delay(1000).fadeIn(1000);
}
Developer | Renaud Tertrais |
Username | renaudtertrais |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 3,432 Kb |
Views | 20,240 |
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!
Name | Size |
React-a11y-range | 7,029 Kb |
A Pen by Renaud Tertrais | 3,033 Kb |
Tiny CSS3 Round Breadcrumb | 2,921 Kb |
TCP Brut Force | 4,629 Kb |
React-draggable | 2,539 Kb |
Flat CSS3 rating system | 2,752 Kb |
Images gallery with CSS3 transitions | 2,356 Kb |
Animated logo SVG, CSS3 and JS | 3,432 Kb |
Flat Blog layout in CSS3 | 4,111 Kb |
Console | 3,320 Kb |
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!
Name | Username | Size |
Tab panels | Accessibility | 0 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
NeeilTimer | Neeilan | 2,836 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!