WebTechs Animated Logo

In this example below you will see how to do a WebTechs Animated Logo with some HTML / CSS and Javascript

webtechs.fr

Thumbnail
This awesome code was written by fchazal, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fchazal ©

Technologies

  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>WebTechs Animated Logo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <svg width="545px" height="240px" viewBox="0 0 1090 240" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<defs>

	<mask id="mask_1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="0" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_2" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" width="1" fill="white">
			<animate attributeName="height" begin="200ms" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="400ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_4" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="1" width="1" fill="white">
			<animate attributeName="height" begin="600ms" dur="200ms" from="0" to="1" fill="freeze" />      
			<animate attributeName="y" begin="600ms" dur="200ms" from="1" to="0" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_5" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="800ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_6" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="1" width="1" fill="white">
			<animate attributeName="height" begin="1000ms" dur="200ms" from="0" to="1" fill="freeze" />      
			<animate attributeName="y" begin="1000ms" dur="200ms" from="1" to="0" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_7" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="1200ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_8" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" width="1" fill="white">
			<animate attributeName="height" begin="1400ms" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_9" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="1600ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_10" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" width="1" fill="white">
			<animate attributeName="height" begin="1800ms" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_11" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="1" y="0" height="1" fill="white">
			<animate attributeName="width" begin="2000ms" dur="200ms" from="0" to="1" fill="freeze" />        
			<animate attributeName="x" begin="2000ms" dur="200ms" from="1" to="0" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_12" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="1" width="1" fill="white">
			<animate attributeName="height" begin="2200ms" dur="200ms" from="0" to="1" fill="freeze" />      
			<animate attributeName="y" begin="2200ms" dur="200ms" from="1" to="0" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_13" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" height="1" fill="white">
			<animate attributeName="width" begin="2400ms" dur="200ms" from="0" to="1" fill="freeze" />        
		</rect>
	</mask>
	<mask id="mask_14" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="0" y="0" width="1" fill="white">
			<animate attributeName="height" begin="2600ms" dur="200ms" from="0" to="1" fill="freeze" />      
		</rect>
	</mask>
	<mask id="mask_15" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
		<rect x="1" y="0" height="1" fill="white">
			<animate attributeName="width" begin="2800ms" dur="200ms" from="0" to="1" fill="freeze" />        
			<animate attributeName="x" begin="2800ms" dur="200ms" from="1" to="0" fill="freeze" />        
		</rect>
	</mask>
</defs>

<g id="logo">
	<path d="M0,0 L0,40 L400,40 L440,40 L440,40 L400,0 L0,0 Z M0,0" fill="#7A0000" mask="url(#mask_1)"></path>
	<path d="M400,0 L400,200 L440,240 L440,40 L400,0 Z M400,0" fill="#D30B00" mask="url(#mask_2)"></path>
	<path d="M400,200 L440,240 L480,240 L520,200 L400,200 Z M400,200" fill="#7A0000" mask="url(#mask_3)"></path>
	<path d="M480,40 L480,240 L520,200 L520,40 L480,40 Z M480,40" fill="#D30B00" mask="url(#mask_4)"></path>
	<path d="M520,200 L500,220 L520,240 L560,240 L600,200 L480,200 Z M480,200" fill="#7A0000" mask="url(#mask_5)"></path>
	<path d="M560,40 L560,240 L600,200 L600,0 L560,40 Z M560,40" fill="#D30B00" mask="url(#mask_6)"></path>
	<path d="M600,0 L560,40 L840,40 L800,0 L600,0 Z M600,0" fill="#7A0000" mask="url(#mask_7)"></path>
	<path d="M800,0 L800,80 L840,120 L840,40 L800,0 Z M800,0" fill="#D30B00" mask="url(#mask_8)"></path>
	<path d="M800,80 L840,120 L920,120 L880,80 L800,80 Z M800,80" fill="#7A0000" mask="url(#mask_9)"></path>
	<path d="M880,80 L880,240 L920,200 L920,120 L880,80 Z M880,80" fill="#D30B00" mask="url(#mask_10)"></path>
	<path d="M640,200 L680,240 L880,240 L920,200 L640,200 Z M640,200" fill="#7A0000" mask="url(#mask_11)"></path>
	<path d="M680,80 L680,240 L640,200 L640,120 L680,80 Z M680,80" fill="#D30B00" mask="url(#mask_12)"></path>
	<path d="M680,80 L640,120 L760,120 L720,80 L680,80 Z M680,80" fill="#7A0000" mask="url(#mask_13)"></path>
	<path d="M720,80 L720,180 L760,140 L760,120 L720,80 Z M720,80" fill="#D30B00" mask="url(#mask_14)"></path>
	<path d="M680,140 L680,180 L720,180 L760,140 L680,140 Z M680,140" fill="#7A0000" mask="url(#mask_15)"></path>
</g>
</svg>
  
  

</body>

</html>

Comments