Webpack logo

Developer
João Victor
Size
3,472 Kb
Views
20,240
  1. Webpack logo Previews
  2. Webpack logo HTML Codes
  3. Webpack logo CSS Codes
  4. Webpack logo JS Codes

How do I make an webpack logo?

Webpack logo SVG version.The css version is here: http://codepen.io/jotavejv/pen/JbeqVj. What is a webpack logo? How do you make a webpack logo? This script and codes were developed by João Victor on 06 November 2022, Sunday.

Webpack logo Previews
IQ Test

Webpack logo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>webpack logo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div>	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200"><title>webpack logo</title>	<g>	<path id="st1" d="M1035.6 879.3l-418.1 236.5V931.6L878 788.3l157.6 91zm28.6-25.9V358.8l-153 88.3V765l153 88.4zm-901.5 25.9l418.1 236.5V931.6L320.3 788.3l-157.6 91zm-28.6-25.9V358.8l153 88.3V765l-153 88.4zM152 326.8L580.8 84.2v178.1L306.1 413.4l-2.1 1.2-152-87.8zm894.3 0L617.5 84.2v178.1l274.7 151.1 2.1 1.2 152-87.8z"/>	</g>
<g>	<path id="st2" d="M580.8 889.7l-257-141.3v-280l257 148.4v272.9zm36.7 0l257-141.3v-280l-257 148.4v272.9zm-18.3-283.6zM341.2 436l258-141.9 258 141.9-258 149-258-149z"/>	</g>
</svg>
</div>
<form action="">	<button type="submit">Replay</button>
</form> <script src="js/index.js"></script>
</body>
</html>

Webpack logo - Script Codes CSS Codes

body { overflow: hidden;
}
div { width: 300px; margin: auto; left: 0; right: 0; -webkit-transform: translateY(-60%); transform: translateY(-60%); top: 50%; position: absolute;
}
#st1 { stroke-dasharray: 6943.89208984375 6943.89208984375; stroke-dashoffset: 6943.89208984375; stroke-width: 3; stroke: gray; fill: rgba(255, 255, 255, 0); -webkit-animation: anim 3s ease-in forwards; animation: anim 3s ease-in forwards;
}
#st2 { stroke-dasharray: 3470.66748046875 3470.66748046875; stroke-dashoffset: 3470.66748046875; stroke-width: 3; stroke: gray; fill: rgba(255, 255, 255, 0); -webkit-animation: anim2 5s 2s ease-out forwards; animation: anim2 5s 2s ease-out forwards;
}
@-webkit-keyframes anim { 85% { stroke-dashoffset: 0; stroke-width: 3; fill: rgba(255, 255, 255, 0); } 100% { stroke-dashoffset: 0; stroke-width: 0; fill: #8ED6FB; }
}
@keyframes anim { 85% { stroke-dashoffset: 0; stroke-width: 3; fill: rgba(255, 255, 255, 0); } 100% { stroke-dashoffset: 0; stroke-width: 0; fill: #8ED6FB; }
}
@-webkit-keyframes anim2 { 50% { stroke-dashoffset: 0; stroke-width: 3; fill: rgba(255, 255, 255, 0); } 75%,100% { stroke-dashoffset: 0; stroke-width: 0; fill: #1C78C0; }
}
@keyframes anim2 { 50% { stroke-dashoffset: 0; stroke-width: 3; fill: rgba(255, 255, 255, 0); } 75%,100% { stroke-dashoffset: 0; stroke-width: 0; fill: #1C78C0; }
}
button { position: absolute; bottom: 50px; left: 0; right: 0; margin: auto; width: 80px; padding: 8px 0; color: #1C78C0; font-size: 12px; border-radius: 4px; background: transparent; border: solid 1px lightgray; cursor: pointer; outline: none; -webkit-transform: translateY(300%); transform: translateY(300%); -webkit-animation: replay .3s 5s ease forwards; animation: replay .3s 5s ease forwards;
}
@-webkit-keyframes replay { to { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes replay { to { -webkit-transform: translateY(0); transform: translateY(0); }
}

Webpack logo - Script Codes JS Codes

'use strict';
/*
***
Webpack logo SVG version.
The css version is here: https://codepen.io/jotavejv/pen/JbeqVj
***
*/
document.getElementById('st1').getTotalLength(); //6943.89208984375
document.getElementById('st2').getTotalLength(); //3470.66748046875
Webpack logo - Script Codes
Webpack logo - Script Codes
Home Page Home
Developer João Victor
Username jotavejv
Uploaded November 06, 2022
Rating 4
Size 3,472 Kb
Views 20,240
Do you need developer help for Webpack logo?

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!

João Victor (jotavejv) Script Codes
Name
Envelope CSS3 custom
Aku Aku CSS art
React logo CSS
Compass CSS
Palette-js
BackboneJS pure CSS logo
SandClock loader
Typeset a Poem - Rodeo 005
Sweet loader
Css wave simulation
Create amazing SEO 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!