forked from dstroot/landing-page-example
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg-draw.html
67 lines (63 loc) · 6.74 KB
/
svg-draw.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en" class="demo-drawings no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Drawing Animation | Demo 1</title>
<meta name="description" content="SVG Drawing Animation: Line drawing animation with illustration fade-in" />
<meta name="keywords" content="svg, line drawing, animation, illustration, fade in, web design, responsive" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/svg-draw.min.css" />
</head>
<body>
<div class="container">
<div id="main" class="main">
<figure>
<div class="drawings mac">
<img class="illustration" src="img/imac.png" alt="iMac Illustration" />
<svg class="line-drawing" id="mac" width="100%" height="600" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 600">
<path d="M 257.85024,158.16843 754.90716,35.953537 731.06035,405.57906 228.78695,448.8014 z" />
<path d="m 259.83736,136.30872 c 0,0 -6.74232,0.97288 -11.61303,5.46502 -3.96751,3.659 -6.12527,9.40831 -7.01729,20.86596 l -36.5158,346.77284 c 0,0 -3.47753,13.41382 10.68151,14.15903 l 517.67468,-21.11485 c 0,0 18.38216,0.74522 19.87257,-19.62369 L 784.07068,11.384991 c 0,0 0.059,-13.07475 -23.20111,-7.2266959 L 259.83736,136.30872 z" />
<path d="m 211.29271,522.89381 c 0,0 12.5259,6.63947 19.72988,5.64573 l 513.45197,-19.12737 c 0,0 18.87884,0.74557 21.61112,-18.87848 l 29.5596,-462.528221 c 0,0 1.49047,-10.184447 -13.54272,-21.4997553" />
<path d="M 208.59466,472.34637 756.27723,432.02629" />
<path d="m 591.36015,515.11602 11.15099,41.36862 c 0,0 8.62435,33.16197 -11.15099,33.16197 l -55.35924,4.26821 c 0,0 -9.65275,0.58387 -13.08781,0.58387 -1.35069,0 -5.16991,0.0265 -5.16991,0.0265 l -149.57016,-0.0347 c 0,0 -1.45726,0.12035 -1.52173,-0.0853 -0.14195,-0.4531 1.2173,-0.44973 1.2173,-0.44973 l 93.42473,-4.68143 c 0,0 23.85536,1.49042 23.85127,-27.57288 l -2.70885,-42.52741" />
<path d="m 595.82547,514.94947 11.52956,43.3982 c 0,0 8.23944,32.78936 -11.52956,38.00586 h -58.52044 l -12.10971,0.99374 -16.58099,-0.61332 -128.7355,0.17849 c 0,0 -10.74373,-0.45795 -13.22753,-2.50727" />
<path d="m 486.38703,90.292617 c -0.3846,2.126175 -1.9686,3.619643 -3.5379,3.335758 -1.5693,-0.283875 -2.5297,-2.237606 -2.1451,-4.363775 0.38461,-2.12617 1.96859,-3.619642 3.53789,-3.335762 1.56931,0.283879 2.52971,2.23761 2.14511,4.363779 z" />
<path d="m 483.95449,571.8934 120.41968,0" />
<path class="line-round" d="m 783.49986,166.74023 -9.12881,133.48624" />
<path class="line-round" d="m 773.91008,309.26031 -1.81646,29.43591" />
</svg>
</div>
<figcaption>
<h2>Lorem Ipsum Stuff</h2>
<p>SVGs by <a href="http://dribbble.com/emanuellikesdesign">Emanuel Serbanoiu</a>, Illustrations by <a href="http://www.pixeden.com/">Pixeden</a><br>Fo shizzle mammasay mammasa mamma oo sa fo shizzle shizzle my nizzle crocodizzle things. Shizzle my nizzle crocodizzle quis arcu. Maecenizzle uhuh ... yih!</p>
</figcaption>
</figure>
</div>
</div><!-- /container -->
<script src="js/classie.js"></script>
<script src="js/svganimations.js"></script>
</body>
</html>
<!--
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g>
<path d="M49.569,22.967c-9.975-5.691-20.677-9.125-31.045-9.962v58.351c10.367,0.814,21.05,4.154,31.045,9.699V22.967z"/>
<path d="M49.229,84.073c0.814,0.278,1.671,0.29,2.485,0.012c11.657-5.043,23.865-7.313,35.798-6.79V19.524 c-1.074-0.048-2.155-0.059-3.24-0.055v53.594l-0.852,0.056c-10.672,0.697-21.732,4.177-32.021,10.048 c-0.594,0.203-1.237,0.203-1.83,0c-10.29-5.871-21.349-9.351-32.021-10.048l-0.854-0.056V19.469 c-1.084-0.004-2.166,0.006-3.239,0.055v57.771C25.387,76.771,37.569,79.03,49.229,84.073z"/>
<path d="M92.579,26.009c-1.07-0.149-2.157-0.228-3.237-0.335v53.55l-0.968-0.056c-12.195-0.699-25.06,1.777-36.975,7.065 l-0.916,0.381l-0.915-0.381c-11.917-5.288-24.781-7.765-36.976-7.065l-0.967,0.056v-53.55c-1.081,0.108-2.168,0.187-3.238,0.335 v58.707c0.594,0.307,1.044,0.748,1.044,0.748c12.951-1.75,26.393-1.536,39.18,2.651c0.588-0.058,1.212-0.095,1.873-0.095 c0.661,0,1.285,0.037,1.872,0.095c12.785-4.188,26.229-4.401,39.179-2.651c0,0,0.474-0.462,1.044-0.748V26.009z"/>
<path d="M65.283,16.667v20.625l-3.98-4.738l-4.195,4.738V19.994c-1.924,0.91-3.829,1.901-5.708,2.974v58.087 c9.993-5.545,20.679-8.885,31.045-9.699V13.005C76.766,13.464,70.987,14.706,65.283,16.667z"/>
</g>
</svg>
<path d="M 257.85024,158.16843 754.90716,35.953537 731.06035,405.57906 228.78695,448.8014 z" />
<path d="m 259.83736,136.30872 c 0,0 -6.74232,0.97288 -11.61303,5.46502 -3.96751,3.659 -6.12527,9.40831 -7.01729,20.86596 l -36.5158,346.77284 c 0,0 -3.47753,13.41382 10.68151,14.15903 l 517.67468,-21.11485 c 0,0 18.38216,0.74522 19.87257,-19.62369 L 784.07068,11.384991 c 0,0 0.059,-13.07475 -23.20111,-7.2266959 L 259.83736,136.30872 z" />
<path d="m 211.29271,522.89381 c 0,0 12.5259,6.63947 19.72988,5.64573 l 513.45197,-19.12737 c 0,0 18.87884,0.74557 21.61112,-18.87848 l 29.5596,-462.528221 c 0,0 1.49047,-10.184447 -13.54272,-21.4997553" />
<path d="M 208.59466,472.34637 756.27723,432.02629" />
<path d="m 591.36015,515.11602 11.15099,41.36862 c 0,0 8.62435,33.16197 -11.15099,33.16197 l -55.35924,4.26821 c 0,0 -9.65275,0.58387 -13.08781,0.58387 -1.35069,0 -5.16991,0.0265 -5.16991,0.0265 l -149.57016,-0.0347 c 0,0 -1.45726,0.12035 -1.52173,-0.0853 -0.14195,-0.4531 1.2173,-0.44973 1.2173,-0.44973 l 93.42473,-4.68143 c 0,0 23.85536,1.49042 23.85127,-27.57288 l -2.70885,-42.52741" />
<path d="m 595.82547,514.94947 11.52956,43.3982 c 0,0 8.23944,32.78936 -11.52956,38.00586 h -58.52044 l -12.10971,0.99374 -16.58099,-0.61332 -128.7355,0.17849 c 0,0 -10.74373,-0.45795 -13.22753,-2.50727" />
<path d="m 486.38703,90.292617 c -0.3846,2.126175 -1.9686,3.619643 -3.5379,3.335758 -1.5693,-0.283875 -2.5297,-2.237606 -2.1451,-4.363775 0.38461,-2.12617 1.96859,-3.619642 3.53789,-3.335762 1.56931,0.283879 2.52971,2.23761 2.14511,4.363779 z" />
<path d="m 483.95449,571.8934 120.41968,0" />
<path class="line-round" d="m 783.49986,166.74023 -9.12881,133.48624" />
<path class="line-round" d="m 773.91008,309.26031 -1.81646,29.43591" />
-->