Strike Logo Animatiion | Html Css And JavaScript

Author - personCodeatnow

 


Follow Us On Telegram   Telegram link

This is The Small Project For Your Site And You Can Use It Freely In Your's As Well , As It Is Copyright Free You Can...

In This Project Technologies Are Used Is As Follows :-)

  • HTML
  • CSS
  • JAVASCRIPT

Download Code
HTML 
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow - Stroke Logo Animation</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<button id="logo" type="button">
	<svg class="logo" fill="none" stroke="#000" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" width="264px" height="48px" viewBox="0 0 264 48" role="img" aria-label="MuchStroke">
		<g class="logo__group" opacity="0.2">
			<path class="logo__letter logo__letter--M" d="M5.131,39V7l14.45,25.832a1,1,0,0,0,1.755-.036L35.131,7V39"/>
			<path class="logo__letter logo__letter--u1" d="M45.208,17.271V29s0,9.664,8.345,9.664C62.936,38.664,63,29,63,29V17.271"/>
			<line class="logo__letter logo__letter--u2" x1="63" y1="17.578" x2="63" y2="39"/>
			<path class="logo__letter logo__letter--c" d="M91.359,22.7s-1.7-5.28-9.537-5.279c-6.471,0-9.669,5.619-9.669,10.473,0,6.1,3.027,11.109,9.575,11.109,7.246,0,9.631-4.212,9.631-4.212"/>
			<line class="logo__letter logo__letter--h1" x1="101" y1="7.337" x2="101" y2="39.352"/>
			<path class="logo__letter logo__letter--h2" d="M118,39.045,117.839,25s.161-7.652-8.339-7.652S101,25,101,25"/>
			<path class="logo__letter logo__letter--S" d="M145.172,14.012s-1.362-5.62-8.259-5.62c-6.386,0-8.536,4.088-8.6,7.493-.171,9.026,18.051,4.939,18.051,16.008,0,3.321-1.618,7.152-9.452,7.152-7.918,0-9.451-7.663-9.451-7.663"/>
			<line class="logo__letter logo__letter--t1" x1="154" y1="18.236" x2="165.778" y2="18.236"/>
			<path class="logo__letter logo__letter--t2" d="M158.682,12.763l-.113,21a5.451,5.451,0,0,0,1.334,3.661c1.308,1.229,5.25,1.193,5.25,1.193"/>
			<line class="logo__letter logo__letter--r1" x1="174.293" y1="19" x2="174.293" y2="38.927"/>
			<path class="logo__letter logo__letter--r2" d="M174.293,27.38c0-8.685,9.962-9.111,9.962-9.111"/>
			<ellipse class="logo__letter logo__letter--o" cx="200" cy="28.8" rx="10.5" ry="9.912" transform="rotate(-90 200 28.8)"/>
			<line class="logo__letter logo__letter--k1" x1="219.5" y1="7.3" x2="219.5" y2="39.3"/>
			<polyline class="logo__letter logo__letter--k2" points="233.6 16.442 223.6 26.966 233.6 39.173"/>
			<path class="logo__letter logo__letter--e" d="M243.348,27.482l16.689-.019s-.511-10.292-9.286-10.292c-6.982,0-9.969,5.519-9.958,10.292.009,3.893,1.021,11.364,9.281,11.366,8.174,0,8.685-4.969,8.685-4.969"/>
		</g>
		<g class="logo__group" opacity="0.2">
			<path class="logo__letter logo__letter--M" d="M5.131,39V7l14.45,25.832a1,1,0,0,0,1.755-.036L35.131,7V39"/>
			<path class="logo__letter logo__letter--u1" d="M45.208,17.271V29s0,9.664,8.345,9.664C62.936,38.664,63,29,63,29V17.271"/>
			<line class="logo__letter logo__letter--u2" x1="63" y1="17.578" x2="63" y2="39"/>
			<path class="logo__letter logo__letter--c" d="M91.359,22.7s-1.7-5.28-9.537-5.279c-6.471,0-9.669,5.619-9.669,10.473,0,6.1,3.027,11.109,9.575,11.109,7.246,0,9.631-4.212,9.631-4.212"/>
			<line class="logo__letter logo__letter--h1" x1="101" y1="7.337" x2="101" y2="39.352"/>
			<path class="logo__letter logo__letter--h2" d="M118,39.045,117.839,25s.161-7.652-8.339-7.652S101,25,101,25"/>
			<path class="logo__letter logo__letter--S" d="M145.172,14.012s-1.362-5.62-8.259-5.62c-6.386,0-8.536,4.088-8.6,7.493-.171,9.026,18.051,4.939,18.051,16.008,0,3.321-1.618,7.152-9.452,7.152-7.918,0-9.451-7.663-9.451-7.663"/>
			<line class="logo__letter logo__letter--t1" x1="154" y1="18.236" x2="165.778" y2="18.236"/>
			<path class="logo__letter logo__letter--t2" d="M158.682,12.763l-.113,21a5.451,5.451,0,0,0,1.334,3.661c1.308,1.229,5.25,1.193,5.25,1.193"/>
			<line class="logo__letter logo__letter--r1" x1="174.293" y1="19" x2="174.293" y2="38.927"/>
			<path class="logo__letter logo__letter--r2" d="M174.293,27.38c0-8.685,9.962-9.111,9.962-9.111"/>
			<ellipse class="logo__letter logo__letter--o" cx="200" cy="28.8" rx="10.5" ry="9.912" transform="rotate(-90 200 28.8)"/>
			<line class="logo__letter logo__letter--k1" x1="219.5" y1="7.3" x2="219.5" y2="39.3"/>
			<polyline class="logo__letter logo__letter--k2" points="233.6 16.442 223.6 26.966 233.6 39.173"/>
			<path class="logo__letter logo__letter--e" d="M243.348,27.482l16.689-.019s-.511-10.292-9.286-10.292c-6.982,0-9.969,5.519-9.958,10.292.009,3.893,1.021,11.364,9.281,11.366,8.174,0,8.685-4.969,8.685-4.969"/>
		</g>
		<g class="logo__group">
			<path data-anim class="logo__letter logo__letter--M" d="M5.131,39V7l14.45,25.832a1,1,0,0,0,1.755-.036L35.131,7V39"/>
			<path class="logo__letter logo__letter--u1" d="M45.208,17.271V29s0,9.664,8.345,9.664C62.936,38.664,63,29,63,29V17.271"/>
			<line class="logo__letter logo__letter--u2" x1="63" y1="17.578" x2="63" y2="39"/>
			<path class="logo__letter logo__letter--c" d="M91.359,22.7s-1.7-5.28-9.537-5.279c-6.471,0-9.669,5.619-9.669,10.473,0,6.1,3.027,11.109,9.575,11.109,7.246,0,9.631-4.212,9.631-4.212"/>
			<line class="logo__letter logo__letter--h1" x1="101" y1="7.337" x2="101" y2="39.352"/>
			<path class="logo__letter logo__letter--h2" d="M118,39.045,117.839,25s.161-7.652-8.339-7.652S101,25,101,25"/>
			<path class="logo__letter logo__letter--S" d="M145.172,14.012s-1.362-5.62-8.259-5.62c-6.386,0-8.536,4.088-8.6,7.493-.171,9.026,18.051,4.939,18.051,16.008,0,3.321-1.618,7.152-9.452,7.152-7.918,0-9.451-7.663-9.451-7.663"/>
			<line class="logo__letter logo__letter--t1" x1="154" y1="18.236" x2="165.778" y2="18.236"/>
			<path class="logo__letter logo__letter--t2" d="M158.682,12.763l-.113,21a5.451,5.451,0,0,0,1.334,3.661c1.308,1.229,5.25,1.193,5.25,1.193"/>
			<line class="logo__letter logo__letter--r1" x1="174.293" y1="19" x2="174.293" y2="38.927"/>
			<path class="logo__letter logo__letter--r2" d="M174.293,27.38c0-8.685,9.962-9.111,9.962-9.111"/>
			<ellipse class="logo__letter logo__letter--o" cx="200" cy="28.8" rx="10.5" ry="9.912" transform="rotate(-90 200 28.8)"/>
			<line class="logo__letter logo__letter--k1" x1="219.5" y1="7.3" x2="219.5" y2="39.3"/>
			<polyline class="logo__letter logo__letter--k2" points="233.6 16.442 223.6 26.966 233.6 39.173"/>
			<path class="logo__letter logo__letter--e" d="M243.348,27.482l16.689-.019s-.511-10.292-9.286-10.292c-6.982,0-9.969,5.519-9.958,10.292.009,3.893,1.021,11.364,9.281,11.366,8.174,0,8.685-4.969,8.685-4.969"/>
		</g>
	</svg>
</button>
<!-- partial -->
  <script  src="./script.js"></script>

</body>
</html>
CSS 
* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: ;
	--bg: hsl(var(--hue),90%,10%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,55%);
	font-size: calc(16px + (32 - 16) * (100vw - 320px) / (1280 - 320));
}
body,
button {
	--transDur: 0.3s;
	/* color: var(--fg); */
	/* background-color: #11131e; */
	font: 1em/1.5 sans-serif;
	/* transition:
		background-color var(--transDur),
		color var(--transDur); */
}
body {
	background-color: var(--bg);
	height: 100vh;
	display: grid;
	place-items: center;
}
button {
	background-color: #0000;
	-webkit-tap-highlight-color: #0000;
}
button:focus {
	outline: transparent;
}
button:not(:disabled):focus,
button:not(:disabled):hover {
	color: var(--primary);
}
.logo {
	width: 13.2em;
	height: 2.4em;
}
.logo__letter {
	animation-duration: 2s;
	animation-timing-function: cubic-bezier(0.5,0,0.5,1);
	animation-fill-mode: forwards;
	stroke: currentColor;
}
.logo__letter--M { stroke-dasharray: 125 125; }
.logo__letter--u1 { stroke-dasharray: 53 53; }
.logo__letter--u2 { stroke-dasharray: 22 22; }
.logo__letter--c { stroke-dasharray: 55 55; }
.logo__letter--h1 { stroke-dasharray: 33 33; }
.logo__letter--h2 { stroke-dasharray: 40 40; }
.logo__letter--S { stroke-dasharray: 77 77; }
.logo__letter--t1 { stroke-dasharray: 12 12; }
.logo__letter--t2 { stroke-dasharray: 31 31; }
.logo__letter--r1 { stroke-dasharray: 31 31; }
.logo__letter--r2 { stroke-dasharray: 15 15; }
.logo__letter--o { stroke-dasharray: 64 64; }
.logo__letter--k1 { stroke-dasharray: 32 32; }
.logo__letter--k2 { stroke-dasharray: 31 31; }
.logo__letter--e { stroke-dasharray: 76 76; }

.logo--running .logo__letter--M {
	animation-name: M;
	stroke-dashoffset: 125;
}
.logo--running .logo__letter--u1 {
	animation-name: u1;
	stroke-dashoffset: -53;
}
.logo--running .logo__letter--u2 {
	animation-name: u2;
	stroke-dashoffset: 22;
}
.logo--running .logo__letter--c {
	animation-name: c;
	stroke-dashoffset: 55;
}
.logo--running .logo__letter--h1 {
	animation-name: h1;
	stroke-dashoffset: 33;
}
.logo--running .logo__letter--h2 {
	animation-name: h2;
	stroke-dashoffset: -40;
}
.logo--running .logo__letter--S {
	animation-name: S;
	stroke-dashoffset: 77;
}
.logo--running .logo__letter--t1 {
	animation-name: t1;
	stroke-dashoffset: 12;
}
.logo--running .logo__letter--t2 {
	animation-name: t2;
	stroke-dashoffset: 31;
}
.logo--running .logo__letter--r1 {
	animation-name: r1;
	stroke-dashoffset: 31;
}
.logo--running .logo__letter--r2 {
	animation-name: r2;
	stroke-dashoffset: 15;
}
.logo--running .logo__letter--o {
	animation-name: o;
	stroke-dashoffset: 64;
}
.logo--running .logo__letter--k1 {
	animation-name: k1;
	stroke-dashoffset: 32;
}
.logo--running .logo__letter--k2 {
	animation-name: k2;
	stroke-dashoffset: 31;
}
.logo--running .logo__letter--e {
	animation-name: e;
	stroke-dashoffset: 76;
}
.logo--running .logo__group:nth-child(2) .logo__letter {
	animation-delay: 0.33s;
}
.logo--running .logo__group:nth-child(3) .logo__letter {
	animation-delay: 0.67s;
}

@supports selector(:focus-visible) {
	button:not(:disabled):focus {
		color: currentColor;
	}
	button:not(:disabled):focus-visible,
	button:not(:disabled):hover {
		color: var(--primary);
	}
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
		--primary: hsl(var(--hue),90%,65%);
	}
}

/* Animations */
@keyframes M {
	from { stroke-dashoffset: 125; }
	to { stroke-dashoffset: 0; }
}
@keyframes u1 {
	from { stroke-dashoffset: -53; }
	to { stroke-dashoffset: 0; }
}
@keyframes u2 {
	from { stroke-dashoffset: 22; }
	to { stroke-dashoffset: 0; }
}
@keyframes c {
	from { stroke-dashoffset: 55; }
	to { stroke-dashoffset: 0; }
}
@keyframes h1 {
	from { stroke-dashoffset: 33; }
	50%, to { stroke-dashoffset: 0; }
}
@keyframes h2 {
	from, 50% { stroke-dashoffset: -40; }
	to { stroke-dashoffset: 0; }
}
@keyframes S {
	from { stroke-dashoffset: 77; }
	to { stroke-dashoffset: 0; }
}
@keyframes t1 {
	from, 50% { stroke-dashoffset: 12; }
	to { stroke-dashoffset: 0; }
}
@keyframes t2 {
	from { stroke-dashoffset: 31; }
	50%, to { stroke-dashoffset: 0; }
}
@keyframes r1 {
	from { stroke-dashoffset: 31; }
	80%, to { stroke-dashoffset: 0; }
}
@keyframes r2 {
	from, 50% { stroke-dashoffset: 15; }
	to { stroke-dashoffset: 0; }
}
@keyframes o {
	from { stroke-dashoffset: 64; }
	to { stroke-dashoffset: 0; }
}
@keyframes k1 {
	from { stroke-dashoffset: 32; }
	50%, to { stroke-dashoffset: 0; }
}
@keyframes k2 {
	from, 50% { stroke-dashoffset: 31; }
	to { stroke-dashoffset: 0; }
}
@keyframes e {
	from { stroke-dashoffset: 76; }
	to { stroke-dashoffset: 0; }
}
JS 
window.addEventListener("DOMContentLoaded",() => {
	const ms = new LogoAnimation("#logo",".logo");
});

class LogoAnimation {
	constructor(buttonQS,svgQS) {
		this.button = document.querySelector(buttonQS);
		this.svg = document.querySelector(svgQS);
		this.lastAnimPart = this.svg?.querySelector(`${svgQS} [data-anim]`);
		this.playClass = "logo--running";

		this.button?.addEventListener("click",this.replay.bind(this));
		this.lastAnimPart?.addEventListener("animationend",this.stop.bind(this));

		this.replay();
	}
	replay() {
		if (!this.button.disabled) {
			this.button.disabled = true;
			this.svg?.classList.add(this.playClass);
		}
	}
	stop() {
		this.button.disabled = false;
		this.svg?.classList.remove(this.playClass);
	}
}

You may like these posts

Post a Comment

0Comments
Post a Comment (0)
Share to other apps
Copy Post Link