-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
134 lines (117 loc) · 6.95 KB
/
index.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html>
<head>
<title>DMLOOYFG</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="assets/stylesheets/application.css" type="text/css" />
<!-- Javascripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="assets/javascripts/jquery.form.js"></script>
<script type="text/javascript" src="assets/javascripts/application.js"></script>
</head>
<body>
<a href="https://github.com/MyXoToD/Draw-me-like-one-of-your-french-girls">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" />
</a>
<!-- <h1>Draw Me Like One Of Your French Girls</h1> -->
<div class="wrapper">
<div class="content">
<h1>Draw Me Like One Of Your French Girls</h1>
<!-- <h1>Animate Me Like One Of Your SVGs</h1> -->
<p>Hello Sir. You are not satisfied with your current SVG? We may solve your problem right now. What about a cool "self-drawing" effect? Maybe triggert at a certain scroll possition? Check out the demo. I know you are going to love it and you know that you want that too.</p>
<h2>Bullgit Logo Demo</h2>
<div class="demo">
<svg
class="bullgit" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="561.321px" height="562.627px" viewBox="20.249 18.977 561.321 562.627" enable-background="new 20.249 18.977 561.321 562.627"
xml:space="preserve" stroke="#000000" stroke-width="1.629">
<path class="nose" stroke="inherit" stroke-width="inherit" d="
M203.727,480.078c2.713-16.838,31.478-26.248,47.349-20.857c36.09,12.258,80.817,14.025,111.291,1.629
c16.27-6.618,46.629,6.25,50.121,25.199c5.509,29.901-1.847,46.911-10.909,62.209c-4.398,7.426-77.699-5.081-94.089-5.059
c-15.965,0.023-87.706,13.996-93.005,4.192C204.965,529.782,197.677,517.629,203.727,480.078z"/>
<path class="shit" stroke="inherit" stroke-width="inherit" d="
M332.311,20.56C250.765,61.764,152.1,176.132,270.98,216.458c-2.842-1.073-59.517-3.177-65.165-54.165
c-100.396,14.777-89.617,148.402-61.105,170.128c-18.451-17.134-29.814-34.14-30.271-58.178
c-86.353,125.15-13.511,186.03,83.866,193.415c8.241-15.344,37.606-23.045,53.382-17.621c32.325,11.114,76.566,15.505,109.508,1.372
c18.963-8.137,53.046,8.941,57.617,22.609c111.87-24.938,163.267-99.481,73.34-210.878c-4.887,40.028-36.059,60.271-44.395,68.154
C584.337,172.169,287.388,169.912,332.311,20.56z"/>
<path class="horn horn--left" stroke="inherit" stroke-width="inherit" d="
M163.593,51.085C-31.21,73.302-5.29,220.82,115.577,246.632c2.458-23.272,14.011-46.847,23.209-57.353
C1.961,148.605,96.737,89.853,163.593,51.085z"/>
<path class="chin" stroke="inherit" stroke-width="inherit" d="
M232.935,560.17c40.806-1.995,56.545-8.152,74.252-8.077c13.8,0.058,45.789,6.855,78.81,7.878
c-4.058,6.416-7.341,12.438-13.673,15.638c-13.279,6.709-109.569,6.633-123.317,1.323
C241.529,574.043,236.861,565.321,232.935,560.17L232.935,560.17z"/>
<path class="horn horn--right" stroke="inherit" stroke-width="inherit" d="
M428.595,47.566c222.534,24.864,162.918,163.763,60.93,185.506c-9.076-22.949-26.966-41.285-40.847-51.846
C610.92,141.896,509.336,86.641,428.595,47.566L428.595,47.566z"/>
</svg>
</div>
<form action="upload.php" method="post" enctype="multipart/form-data">
<hr />
<label for="file">SHUT UP AND TAKE MY SVG!</label>
<input type="file" name="file" class="file" id="file" />
<input type="submit" name="submit" value="Beam it up Scotty" class="submit" />
</form>
<hr />
<div class="result-box" id="result">
<div class="result" id="refresh">
</div>
<div class="controls-box">
<div class="controls">
<table>
<tr>
<th>Stroke-Width</th>
<td><input type="range" min="1" max="10" value="2" class="control-width" /> <span class="width-info">2</span></td>
</tr>
<tr>
<th>Stroke-Color</th>
<td><input type="color" value="#1abc9c" class="control-color" /> <span class="color-info">#1abc9c</span></td>
</tr>
<tr>
<th>Duration</th>
<td><input type="range" min="1" max="20" value="10" class="control-duration" /> <span class="time-info">5s</span></td>
</tr>
<tr>
<th>Loop</th>
<td><input type="checkbox" value="yes" class="control-loop" checked="checked" /></td>
</tr>
<tr>
<th>Rounded Lines</th>
<td><input type="checkbox" value="yes" class="control-rounded" checked="checked" /></td>
</tr>
</table>
</div>
<br />
<br />
<h2>SASS Code</h2>
<div class="code">
</div>
</div>
<hr />
</div>
<h2>FAQ</h2>
<p>
<strong>My SVG is still not animated in the preview</strong><br />
That might happen if your don't have IDs for your paths, polygons, rects, etc... Make sure to add IDs!
</p>
<p>
<strong>I can't upload my SVG</strong><br />
This may happen if your paths don't have IDs. I'm trying to implement a solution which doesn't require the IDs. Until then your need to give every path/polygon/etc an ID.
</p>
<p>
<strong>How does it work?</strong><br />
This animation is made with <u>stroke-dasharray</u> and <u>stroke-dashoffset</u>. You can read a <a href="http://myxotod.com/draw-me-like-one-of-your-french-girls">tutorial on my website</a>.
</p>
<p>
<strong>I added the SASS to my website but the SVG doesn't appear/isn't animated</strong><br />
It is very important, that you add the SVG code to your HTML. It must be inline. Doesn't work if the SVG is inserted as an IMG-tag.
</p>
<hr />
<h2>About</h2>
<p>This tool is made with <span style="color: red;">♥</span> by <a href="http://myxotod.com">Max Boll aka MyXoToD</a>.</p>
<p>Feel free to ask questions or follow me on <a href="http://twitter.com/MyXoToD">Twitter (@MyXoToD)</a>.</p>
<p>Find the <a href="https://github.com/MyXoToD/Draw-me-like-one-of-your-french-girls">source code</a> on GitHub.</p>
</div>
</div>
</body>
</html>