omniosi · February 1, 2016 06:22
diff --git a/logo-anim-test.html b/logo-anim-test.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>logo animation test</title>
 </head>
 <body>
 <svg version="1.1" id="odc-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="600px" height="90px" viewBox="0.5 792.5 600 90" enable-background="new 0.5 792.5 600 90" xml:space="preserve">
 	 <defs>
 	 	<clipPath id="myClip">
 <path d="M600.5,817.139V792.5h-55.752c-0.064,0-0.139,0.006-0.221,0.006h-0.475c-7.232,0-13.738,3.119-18.23,8.072
 	c-3.93,4.331-6.324,10.059-6.324,16.333v2.164c0.383,4.587,2.023,8.809,4.617,12.327c0.041,0.062,0.082,0.132,0.125,0.193
 	c0.32,0.414,0.645,0.823,0.986,1.221c3.055,3.6,7.15,6.312,11.814,7.682c2.195,0.632,4.527,0.981,6.93,0.981h31.963
 	c3.818,0,6.92,3.034,7.021,6.79c-0.102,3.476-2.758,6.333-6.188,6.746h-32.727c-2.875,0-5.346-1.73-6.43-4.209
 	c-0.055-0.109-0.109-0.233-0.139-0.356c-0.027-0.058-0.055-0.127-0.078-0.196c-0.199-0.626-0.334-1.287-0.348-1.984
 	c0,0.04,0,0.095-0.006,0.123c0-0.123-0.012-0.248-0.012-0.36v-0.233h-17.537v24.652h22.979c0.52,0.034,1.055,0.049,1.582,0.049
 	h31.881c12.262,0,22.467-8.988,24.271-20.686c0.193-1.151,0.289-2.346,0.289-3.545c0-1.662-0.188-3.286-0.539-4.849
 	c-0.834-4.03-2.693-7.688-5.275-10.7c-4.5-5.295-11.223-8.67-18.746-8.67h-0.043h-31.838h-0.068h-0.014
 	c-3.514,0-6.414-2.58-6.93-5.916v-1.224c0-3.843,3.141-6.978,7.012-6.978h31.881c0.639,0,1.266,0.092,1.848,0.254
 	c0.027,0,0.041,0.006,0.068,0.014c0.186,0.052,0.359,0.109,0.52,0.176c0.037,0.006,0.055,0.017,0.092,0.026
 	c0.172,0.066,0.324,0.136,0.486,0.214c0.033,0.015,0.055,0.023,0.09,0.043c0.16,0.075,0.324,0.161,0.467,0.254
 	c0.018,0.015,0.041,0.028,0.068,0.043c0.158,0.09,0.324,0.191,0.459,0.301c0.014,0.012,0.014,0.014,0.027,0.016
 	c1.477,1.069,2.525,2.704,2.803,4.576c0.055,0.346,0.094,0.695,0.094,1.053v0.236H600.5 M506.219,821.942v-4.919v-0.025
 	c0-3.831,3.152-6.95,7.004-6.95h0.4v-17.332h-7.404h-17.545h-7.393v17.332h0.375c3.859,0,7.012,3.119,7.018,6.95v31.006
 	c-0.006,3.852-3.158,6.964-7.018,6.964H457.76c-3.869,0-7.01-3.141-7.01-6.978v-30.967c0-3.852,3.141-6.976,7.01-6.976h0.395
 	v-17.332h-24.941v55.274c0,13.463,11.002,24.406,24.547,24.406h23.674v0.032h32.033v-17.434h-0.244c-3.84,0-7.004-3.125-7.004-6.95
 	v-0.055V821.942 M423.644,868.262c-1.524,1.535-1.524,4.031,0,5.567l3.541,3.519c1.527,1.536,4.018,1.536,5.548,0l3.609-3.607
 	c1.545-1.522,1.545-4.018,0-5.553l-3.522-3.535c-1.532-1.536-4.04-1.536-5.561,0L423.644,868.262 M370.299,792.676
 	c-13.537,0-24.564,10.952-24.564,24.405v30.997c0,13.451,11.027,24.406,24.564,24.406h31.887c13.531,0,24.549-10.955,24.549-24.406
 	v-30.997c0-13.453-11.018-24.405-24.549-24.405H370.299 M363.273,848.078v-30.997c0-3.843,3.154-6.969,7.025-6.969h31.887
 	c3.879,0,7.006,3.126,7.006,6.969v30.997c0,3.846-3.127,6.976-7.006,6.976h-31.887C366.428,855.054,363.273,851.924,363.273,848.078
 	 M314.721,792.687v17.432h0.234c3.875,0,7.025,3.134,7.025,6.974v30.999c0,3.848-3.15,6.971-7.025,6.971h-0.389v17.437h24.951
 	v-24.407v-55.404H314.721 M283.762,792.813h-23.671v-0.026h-7.252H235.3h-7.251v17.434h0.238c3.855,0,7,3.105,7.013,6.941V848.2
 	c-0.013,3.848-3.155,6.963-7.013,6.963h-0.396V872.5h32.356v-17.337h-0.398c-3.852,0-6.998-3.115-7.009-6.963v-0.015v-30.988
 	c0.012-3.832,3.157-6.944,7.009-6.944h23.914c3.861,0,7.018,3.121,7.018,6.965v30.968h-0.014c0,3.849-3.142,6.978-7.003,6.978
 	h-0.399V872.5h24.942v-0.131h0.006v-55.151C308.311,803.76,297.299,792.813,283.762,792.813 M222.216,848.186v-30.968
 	c0-13.46-11.027-24.404-24.555-24.404h-23.906c-6.001,0-11.515,2.162-15.791,5.729c-4.261-3.567-9.771-5.729-15.778-5.729h-23.664
 	v-0.026h-7.252h-17.54h-7.257v17.434h0.239c3.865,0,7.006,3.116,7.018,6.95v0.04l-0.003,0.007v26.049h0.003v4.934
 	c-0.012,3.848-3.153,6.963-7.018,6.963h-0.389v17.335h32.345v-17.335h-0.387c-3.855,0-7.003-3.115-7.012-6.963v-0.015v-30.988
 	c0.008-3.834,3.157-6.944,7.012-6.944h23.905c3.862,0,6.998,3.11,7.012,6.944v31.911c-0.453,3.409-3.386,6.055-6.94,6.055h-0.398
 	v17.335h24.948v-24.312h-0.064v-30.968v-0.028c0.009-3.832,3.157-6.937,7.011-6.937h23.906c3.867,0,7.018,3.121,7.018,6.965v31.891
 	c-0.456,3.409-3.399,6.055-6.962,6.055h-0.382v17.335h24.95v-24.312H222.216 M25.056,792.687c-13.538,0-24.556,10.952-24.556,24.405
 	v30.999c0,13.447,11.019,24.407,24.556,24.407h31.889c13.538,0,24.558-10.96,24.558-24.407v-30.999
 	c0-13.453-11.02-24.405-24.558-24.405H25.056 M18.041,848.091v-30.999c0-3.84,3.146-6.974,7.015-6.974h31.889
 	c3.864,0,7.017,3.134,7.017,6.974v30.999c0,3.848-3.153,6.971-7.017,6.971H25.056C21.187,855.062,18.041,851.938,18.041,848.091"/>
 		</clipPath>
 		</defs>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M26.75,864.5H25C7.5,862,9.5,850,9.5,850
 	s0-20.5,0-33.5s16-16,16-16s18.5-0.5,33,0s14.5,16,14.5,16c0,21.594,0,20.051,0,33.5c0,12.5-12.5,14.5-12.5,14.5H26"/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M84.5,864.5 106.5,864.5 106.5,861.5
 	101.5,861.5 101.5,802.5 96.5,802.5 96.5,800.277 156,800.277 156,862.5 151.5,862.5 151.5,864.5 158.5,864.5 158.5,800.277
 	211.5,800.277 211.5,864.5 193.5,864.5 "/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M227.5,864.5 249.5,864.5 249.5,861.5
 	244.5,861.5 244.5,802.5 239.5,802.5 239.5,800.277 299,800.277 299,862.5 281.5,862.5 "/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M313,864.5 330.75,864.5 330.75,800.277
 	313,800.277 "/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M371.75,864.5H370c-17.5-2.5-15.5-14.5-15.5-14.5
 	s0-20.5,0-33.5s16-16,16-16s18.5-0.5,33,0s14.5,16,14.5,16c0,21.594,0,20.051,0,33.5c0,12.5-12.5,14.5-12.5,14.5H371"/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M421,871.25 439.486,871.25 "/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M514,799.277 492,799.277 492,802.277
 	497,802.277 497,861.277 502,861.277 502,863.5 442.5,863.5 442.5,801.277 460,801.277 "/>
 <path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M528.25,846v17.5h47.25c0,0,16.75,0.546,16.75-16
 	s-16.306-16.306-16.306-16.306L545,831.389c0,0-15.819,2.592-15.819-15.819s16.069-15.292,16.069-15.292h47v17.861"/>
 </svg>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>

 <script>
 	// Store a reference to our paths, excluding our clip path
 	var paths = $('path:not(defs path)');

 	// For each path, set the stroke-dasharray and stroke-dashoffset
   // equal to the path's total length, hence rendering it invisible
   paths.each(function(i,e){
 		e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
 	});

   // Create a timeline for ease of manipulation and the possibility
   // to play the animation back and forth at the requested speed.
   var t1 = new TimelineMax();

   // Add each separate line animation to the timeline, animating the
   // stroke-dashoffset to 0. Use the duration, delay and easing to
   // achieve the perfect animation.
   t1.add([
   	TweenLite.to(paths.eq(0),1,{strokeDashoffset: 0, delay:0.0}),
   	TweenLite.to(paths.eq(1),1,{strokeDashoffset: 0, delay:0.5}),
   	TweenLite.to(paths.eq(2),1,{strokeDashoffset: 0, delay:1.0}),
   	TweenLite.to(paths.eq(3),1,{strokeDashoffset: 0, delay:1.5}),
   	TweenLite.to(paths.eq(4),1,{strokeDashoffset: 0, delay:2.0}),
   	TweenLite.to(paths.eq(5),1,{strokeDashoffset: 0, delay:2.5}),
   	TweenLite.to(paths.eq(6),1,{strokeDashoffset: 0, delay:3.0}),
   	TweenLite.to(paths.eq(7),1,{strokeDashoffset: 0, delay:3.5})
  	]);
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>logo animation test</title>
	</head>
	<body>
	<svg version="1.1" id="odc-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	width="600px" height="90px" viewBox="0.5 792.5 600 90" enable-background="new 0.5 792.5 600 90" xml:space="preserve">
	<defs>
	<clipPath id="myClip">
	<path d="M600.5,817.139V792.5h-55.752c-0.064,0-0.139,0.006-0.221,0.006h-0.475c-7.232,0-13.738,3.119-18.23,8.072
	c-3.93,4.331-6.324,10.059-6.324,16.333v2.164c0.383,4.587,2.023,8.809,4.617,12.327c0.041,0.062,0.082,0.132,0.125,0.193
	c0.32,0.414,0.645,0.823,0.986,1.221c3.055,3.6,7.15,6.312,11.814,7.682c2.195,0.632,4.527,0.981,6.93,0.981h31.963
	c3.818,0,6.92,3.034,7.021,6.79c-0.102,3.476-2.758,6.333-6.188,6.746h-32.727c-2.875,0-5.346-1.73-6.43-4.209
	c-0.055-0.109-0.109-0.233-0.139-0.356c-0.027-0.058-0.055-0.127-0.078-0.196c-0.199-0.626-0.334-1.287-0.348-1.984
	c0,0.04,0,0.095-0.006,0.123c0-0.123-0.012-0.248-0.012-0.36v-0.233h-17.537v24.652h22.979c0.52,0.034,1.055,0.049,1.582,0.049
	h31.881c12.262,0,22.467-8.988,24.271-20.686c0.193-1.151,0.289-2.346,0.289-3.545c0-1.662-0.188-3.286-0.539-4.849
	c-0.834-4.03-2.693-7.688-5.275-10.7c-4.5-5.295-11.223-8.67-18.746-8.67h-0.043h-31.838h-0.068h-0.014
	c-3.514,0-6.414-2.58-6.93-5.916v-1.224c0-3.843,3.141-6.978,7.012-6.978h31.881c0.639,0,1.266,0.092,1.848,0.254
	c0.027,0,0.041,0.006,0.068,0.014c0.186,0.052,0.359,0.109,0.52,0.176c0.037,0.006,0.055,0.017,0.092,0.026
	c0.172,0.066,0.324,0.136,0.486,0.214c0.033,0.015,0.055,0.023,0.09,0.043c0.16,0.075,0.324,0.161,0.467,0.254
	c0.018,0.015,0.041,0.028,0.068,0.043c0.158,0.09,0.324,0.191,0.459,0.301c0.014,0.012,0.014,0.014,0.027,0.016
	c1.477,1.069,2.525,2.704,2.803,4.576c0.055,0.346,0.094,0.695,0.094,1.053v0.236H600.5 M506.219,821.942v-4.919v-0.025
	c0-3.831,3.152-6.95,7.004-6.95h0.4v-17.332h-7.404h-17.545h-7.393v17.332h0.375c3.859,0,7.012,3.119,7.018,6.95v31.006
	c-0.006,3.852-3.158,6.964-7.018,6.964H457.76c-3.869,0-7.01-3.141-7.01-6.978v-30.967c0-3.852,3.141-6.976,7.01-6.976h0.395
	v-17.332h-24.941v55.274c0,13.463,11.002,24.406,24.547,24.406h23.674v0.032h32.033v-17.434h-0.244c-3.84,0-7.004-3.125-7.004-6.95
	v-0.055V821.942 M423.644,868.262c-1.524,1.535-1.524,4.031,0,5.567l3.541,3.519c1.527,1.536,4.018,1.536,5.548,0l3.609-3.607
	c1.545-1.522,1.545-4.018,0-5.553l-3.522-3.535c-1.532-1.536-4.04-1.536-5.561,0L423.644,868.262 M370.299,792.676
	c-13.537,0-24.564,10.952-24.564,24.405v30.997c0,13.451,11.027,24.406,24.564,24.406h31.887c13.531,0,24.549-10.955,24.549-24.406
	v-30.997c0-13.453-11.018-24.405-24.549-24.405H370.299 M363.273,848.078v-30.997c0-3.843,3.154-6.969,7.025-6.969h31.887
	c3.879,0,7.006,3.126,7.006,6.969v30.997c0,3.846-3.127,6.976-7.006,6.976h-31.887C366.428,855.054,363.273,851.924,363.273,848.078
	M314.721,792.687v17.432h0.234c3.875,0,7.025,3.134,7.025,6.974v30.999c0,3.848-3.15,6.971-7.025,6.971h-0.389v17.437h24.951
	v-24.407v-55.404H314.721 M283.762,792.813h-23.671v-0.026h-7.252H235.3h-7.251v17.434h0.238c3.855,0,7,3.105,7.013,6.941V848.2
	c-0.013,3.848-3.155,6.963-7.013,6.963h-0.396V872.5h32.356v-17.337h-0.398c-3.852,0-6.998-3.115-7.009-6.963v-0.015v-30.988
	c0.012-3.832,3.157-6.944,7.009-6.944h23.914c3.861,0,7.018,3.121,7.018,6.965v30.968h-0.014c0,3.849-3.142,6.978-7.003,6.978
	h-0.399V872.5h24.942v-0.131h0.006v-55.151C308.311,803.76,297.299,792.813,283.762,792.813 M222.216,848.186v-30.968
	c0-13.46-11.027-24.404-24.555-24.404h-23.906c-6.001,0-11.515,2.162-15.791,5.729c-4.261-3.567-9.771-5.729-15.778-5.729h-23.664
	v-0.026h-7.252h-17.54h-7.257v17.434h0.239c3.865,0,7.006,3.116,7.018,6.95v0.04l-0.003,0.007v26.049h0.003v4.934
	c-0.012,3.848-3.153,6.963-7.018,6.963h-0.389v17.335h32.345v-17.335h-0.387c-3.855,0-7.003-3.115-7.012-6.963v-0.015v-30.988
	c0.008-3.834,3.157-6.944,7.012-6.944h23.905c3.862,0,6.998,3.11,7.012,6.944v31.911c-0.453,3.409-3.386,6.055-6.94,6.055h-0.398
	v17.335h24.948v-24.312h-0.064v-30.968v-0.028c0.009-3.832,3.157-6.937,7.011-6.937h23.906c3.867,0,7.018,3.121,7.018,6.965v31.891
	c-0.456,3.409-3.399,6.055-6.962,6.055h-0.382v17.335h24.95v-24.312H222.216 M25.056,792.687c-13.538,0-24.556,10.952-24.556,24.405
	v30.999c0,13.447,11.019,24.407,24.556,24.407h31.889c13.538,0,24.558-10.96,24.558-24.407v-30.999
	c0-13.453-11.02-24.405-24.558-24.405H25.056 M18.041,848.091v-30.999c0-3.84,3.146-6.974,7.015-6.974h31.889
	c3.864,0,7.017,3.134,7.017,6.974v30.999c0,3.848-3.153,6.971-7.017,6.971H25.056C21.187,855.062,18.041,851.938,18.041,848.091"/>
	</clipPath>
	</defs>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M26.75,864.5H25C7.5,862,9.5,850,9.5,850
	s0-20.5,0-33.5s16-16,16-16s18.5-0.5,33,0s14.5,16,14.5,16c0,21.594,0,20.051,0,33.5c0,12.5-12.5,14.5-12.5,14.5H26"/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M84.5,864.5 106.5,864.5 106.5,861.5
	101.5,861.5 101.5,802.5 96.5,802.5 96.5,800.277 156,800.277 156,862.5 151.5,862.5 151.5,864.5 158.5,864.5 158.5,800.277
	211.5,800.277 211.5,864.5 193.5,864.5 "/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M227.5,864.5 249.5,864.5 249.5,861.5
	244.5,861.5 244.5,802.5 239.5,802.5 239.5,800.277 299,800.277 299,862.5 281.5,862.5 "/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M313,864.5 330.75,864.5 330.75,800.277
	313,800.277 "/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M371.75,864.5H370c-17.5-2.5-15.5-14.5-15.5-14.5
	s0-20.5,0-33.5s16-16,16-16s18.5-0.5,33,0s14.5,16,14.5,16c0,21.594,0,20.051,0,33.5c0,12.5-12.5,14.5-12.5,14.5H371"/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M421,871.25 439.486,871.25 "/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M514,799.277 492,799.277 492,802.277
	497,802.277 497,861.277 502,861.277 502,863.5 442.5,863.5 442.5,801.277 460,801.277 "/>
	<path clip-path="url(#myClip)" fill="none" stroke="#A1C2D9" stroke-width="24" stroke-miterlimit="10" d="M528.25,846v17.5h47.25c0,0,16.75,0.546,16.75-16
	s-16.306-16.306-16.306-16.306L545,831.389c0,0-15.819,2.592-15.819-15.819s16.069-15.292,16.069-15.292h47v17.861"/>
	</svg>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/TweenMax.min.js"></script>

	<script>
	// Store a reference to our paths, excluding our clip path
	var paths = $('path:not(defs path)');

	// For each path, set the stroke-dasharray and stroke-dashoffset
	// equal to the path's total length, hence rendering it invisible
	paths.each(function(i,e){
	e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
	});

	// Create a timeline for ease of manipulation and the possibility
	// to play the animation back and forth at the requested speed.
	var t1 = new TimelineMax();

	// Add each separate line animation to the timeline, animating the
	// stroke-dashoffset to 0. Use the duration, delay and easing to
	// achieve the perfect animation.
	t1.add([
	TweenLite.to(paths.eq(0),1,{strokeDashoffset: 0, delay:0.0}),
	TweenLite.to(paths.eq(1),1,{strokeDashoffset: 0, delay:0.5}),
	TweenLite.to(paths.eq(2),1,{strokeDashoffset: 0, delay:1.0}),
	TweenLite.to(paths.eq(3),1,{strokeDashoffset: 0, delay:1.5}),
	TweenLite.to(paths.eq(4),1,{strokeDashoffset: 0, delay:2.0}),
	TweenLite.to(paths.eq(5),1,{strokeDashoffset: 0, delay:2.5}),
	TweenLite.to(paths.eq(6),1,{strokeDashoffset: 0, delay:3.0}),
	TweenLite.to(paths.eq(7),1,{strokeDashoffset: 0, delay:3.5})
	]);
	</script>
	</body>
	</html>