Strike Logo Animatiion | Html Css And JavaScript

Codeatnow May 13, 2023

 


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);
	}
}
Codeatnow

Posted by Codeatnow

Post a Comment

0 Comments