-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
executable file
·283 lines (277 loc) · 19.9 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width , user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Zondicons">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@steveschoger" />
<meta name="twitter:title" content="Hero Patterns" />
<meta name="twitter:description" content="A collection of repeatable SVG background patterns for you to use on your digital projects." />
<meta name="twitter:image" content="http://www.heropatterns.com/img/twitter-preview.png" />
<title>Hero Patterns | Free repeatable SVG background patterns for your web projects</title>
<meta name="description=" content="A collection of free repeatable SVG background patterns for you to use on your digital projects.">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
<link href="/css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="/css/unslider.css">
<link rel="stylesheet" href="/css/unslider-dots.css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script>
document.createElement('nav');
document.createElement('section');
document.createElement('figure');
</script>
<![endif]-->
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,400italic' rel='stylesheet' type='text/css'>
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-84806922-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body data-spy="scroll" data-target="#appearance-settings">
<div id="app">
<header class="main-header mobile-banner">
<div class="main-headline">
<div class="container">
<div class="main-nav">
<nav class="navbar">
<a href="/">
<svg width="34" height="36" viewBox="0 0 34 36" xmlns="http://www.w3.org/2000/svg">
<path d="M20 12.5V16h-6V0h-4v16H6v.07c-3.392.486-6 3.404-6 6.93s2.608 6.444 6 6.93V30h8V20h6v16h4V20h3c3.866 0 7-3.134 7-7s-3.134-7-7-7h-7v6.5zM4 23c0-1.657 1.347-3 3-3h3v6H7c-1.657 0-3-1.347-3-3zm26-10c0 1.657-1.347 3-3 3h-3v-6h3c1.657 0 3 1.347 3 3z" fill="#9179BA" fill-rule="evenodd" />
</svg>
</a>
</nav>
</div>
<div class="headline">
<p class="introducing">Introducing</p>
<h1>Hero Patterns</h1>
<p class="lead">A collection of repeatable SVG background patterns for you to use on your web projects.</p>
<a class="browse-patterns" href="#appearance-settings">
<svg class="svg-icon" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M9.293 12.536L5.757 9l1.415-1.414L10 10.414l2.828-2.828L14.243 9 10 13.243l-.707-.707zM20 10c0-5.523-4.477-10-10-10S0 4.477 0 10s4.477 10 10 10 10-4.477 10-10zM10 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8z" fill="#9179BA" fill-rule="evenodd" />
</svg>Browse Patterns
</a>
</div>
</div>
</div>
</header>
<div id="appearance-settings" class="nav hidden-xs hidden-sm" data-spy="affix">
<div class="container">
<div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="form-control">
<label>
Foreground color
</label>
<div class="color-input">
<input type="text" v-el:fg-color>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="form-control">
<label>
Background color
</label>
<div class="color-input">
<input type="text" v-el:bg-color>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="form-control">
<label>
Foreground Opacity
<input type="range" min="0" max="1" step="0.01" v-model="opacity">
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<section id="patterns">
<div class="container">
<a href="http://www.heroicons.com">
<div class="heroicons-banner">
<div class="heroicons-logo">
<svg width="36px" height="44px" viewBox="0 0 36 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g fill-rule="evenodd">
<g transform="translate(-133.000000, -35.000000)" fill="#75C3B5">
<g transform="translate(130.000000, 32.000000)">
<path d="M39,28.9998243 C39,32.3136299 36.7566822,36.4955452 34.0099002,38.3267332 L21,47 L7.99009984,38.3267332 C5.2341438,36.4894292 3,32.3130221 3,28.9998243 L3,7.81615903 C8.29511286,4.75309936 14.4428273,3 21,3 C27.5571727,3 33.7048871,4.75309936 39.00001,7.81616483 L39,28.9998243 Z M21,6 C15.7045341,6 10.5966912,7.24680801 6,9.59744566 L6,28.9998243 C6,31.3103352 7.73315045,34.5498824 9.65420042,35.8305823 L21,43.3944487 L32.3457996,35.8305823 C34.2613541,34.553546 36,31.3065246 36,28.9998243 L36,9.59744615 C31.4033043,7.24680715 26.2954643,6 21,6 Z M18,9.14778753 L18,18 L24,18 L24,9.14778755 C27.1186237,9.45673163 30.1472137,10.2473612 33,11.4943267 L33,28.9998243 C33,30.3024986 31.7634615,32.6132564 30.681699,33.3344315 L24,37.7888974 L24,24 L18,24 L18,37.7888974 L11.318301,33.3344315 C10.2319399,32.6101907 9,30.3073871 9,28.9998243 L9,11.494326 C11.8527846,10.2473612 14.8813754,9.4567316 18,9.14778753 L18,9.14778753 Z"></path>
</g>
</g>
</g>
</svg>
</div>
<p class="heroicons-banner-text">If you like Hero Patterns then you’re going to love <em>Heroicons</em>.
<span class="heroicons-banner-cta">Check out Heroicons</span></p>
</div>
</a>
<div class="row">
<div class="col-xs-12 col-sm-6" v-for="pattern in patterns">
<div class="pattern-container" type="button" data-toggle="modal" data-target="#myModal" :style="style(pattern)" @click="selectPattern(pattern)">
<div class="pattern-info">
<button type="button" class="btn btn-link use-pattern-btn">Use Pattern</button>
<h3 class="pattern-title">{{ pattern.name }}</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<h2>About</h2>
<div class="row about-content">
<div class="col-sm-2">
<div class="avatar"></div>
</div>
<div class="col-sm-7 bio">
<p>Hello! I’m Steve Schoger, a UI designer and illustrator from Kitchener, Ontario. I draw and maintain Hero Patterns. Hero Patterns will always be updating and will always be free. Follow me on Twitter and Dribbble to find out when new updates are available. </p>
<p>Also, check out <a href="http://www.zondicons.com">Zondicons</a>: A set of free premium SVG icons for you to use on your digital products.</p>
</div>
<div class="col-sm-3 avatar-float">
<a href="https://twitter.com/steveschoger">
<button class="btn btn-twitter btn-full-width"><span class="svg-icon-social">
<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="social-icon" fill="#FFFFFF">
<path d="M19.9554745,3.91978102 C19.2212409,4.24540146 18.4321898,4.46547445 17.6040146,4.56445255 C18.4493431,4.05773723 19.0984672,3.25540146 19.4041606,2.29941606 C18.6131387,2.76854015 17.7369343,3.10927007 16.8043796,3.29291971 C16.0575182,2.49722628 14.9935036,2 13.8159854,2 C11.5548905,2 9.72175182,3.83306569 9.72175182,6.0940146 C9.72175182,6.41489051 9.7580292,6.72737226 9.82781022,7.0270073 C6.42518248,6.85627737 3.40846715,5.22635036 1.38919708,2.74941606 C1.03678832,3.35408759 0.834890511,4.05737226 0.834890511,4.80766423 C0.834890511,6.2280292 1.55773723,7.48116788 2.65627737,8.21532847 C1.98510949,8.19408759 1.35386861,8.00992701 0.801824818,7.70328467 C0.801532847,7.72036496 0.801532847,7.73751825 0.801532847,7.75474453 C0.801532847,9.73839416 2.21277372,11.3931387 4.08569343,11.7691971 C3.74211679,11.8627737 3.38043796,11.9127737 3.0070073,11.9127737 C2.74321168,11.9127737 2.48671533,11.8871533 2.23678832,11.8393431 C2.75773723,13.4659124 4.26970803,14.649562 6.06124088,14.6826277 C4.66007299,15.7806569 2.89474453,16.4351825 0.976642336,16.4351825 C0.64620438,16.4351825 0.320291971,16.4158394 0,16.3780292 C1.81182482,17.539635 3.96386861,18.2173723 6.27591241,18.2173723 C13.8064234,18.2173723 17.9243796,11.9789051 17.9243796,6.56875912 C17.9243796,6.39124088 17.920438,6.21467153 17.9125547,6.03912409 C18.7124088,5.46189781 19.4065693,4.74080292 19.9554745,3.91978102" id="Fill-1"></path>
</g>
</g>
</svg>Twitter</span>
</button>
</a>
<a href="https://dribbble.com/steveschoger">
<button class="btn btn-dribbble btn-full-width">
<span class="svg-icon-social">
<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="social-icon" fill="#FFFFFF">
<path d="M0,10 C0,8.18666 0.44668,6.51334 1.34,4.98 C2.23334,3.44666 3.44668,2.23334 4.98,1.34 C6.51334,0.44666 8.18668,0 10,0 C11.81334,0 13.48668,0.44666 15.02,1.34 C16.55334,2.23334 17.76668,3.44666 18.66,4.98 C19.55334,6.51334 20,8.18666 20,10 C20,11.81334 19.55334,13.48666 18.66,15.02 C17.76668,16.55334 16.55334,17.76666 15.02,18.66 C13.48668,19.55334 11.81334,20 10,20 C8.18668,20 6.51334,19.55334 4.98,18.66 C3.44668,17.76666 2.23334,16.55334 1.34,15.02 C0.44668,13.48666 0,11.81334 0,10 L0,10 Z M1.66,10 C1.66,12.08 2.36,13.91334 3.76,15.5 C4.4,14.24666 5.41334,13.05334 6.8,11.92 C8.18668,10.78666 9.54,10.07334 10.86,9.78 C10.66,9.31334 10.46668,8.89334 10.28,8.52 C7.98668,9.25334 5.50668,9.62 2.84,9.62 C2.32,9.62 1.93334,9.61334 1.68,9.6 C1.68,9.65334 1.67668,9.72 1.67,9.8 C1.66334,9.88 1.66,9.94666 1.66,10 L1.66,10 Z M1.92,7.94 C2.21334,7.96666 2.64668,7.98 3.22,7.98 C5.44668,7.98 7.56,7.68 9.56,7.08 C8.54668,5.28 7.43334,3.78 6.22,2.58 C5.16668,3.11334 4.26334,3.85334 3.51,4.8 C2.75668,5.74666 2.22668,6.79334 1.92,7.94 L1.92,7.94 Z M4.9,16.58 C6.40668,17.75334 8.10668,18.34 10,18.34 C10.98668,18.34 11.96668,18.15334 12.94,17.78 C12.67334,15.5 12.15334,13.29334 11.38,11.16 C10.15334,11.42666 8.91668,12.1 7.67,13.18 C6.42334,14.26 5.5,15.39334 4.9,16.58 L4.9,16.58 Z M7.96,1.94 C9.13334,3.15334 10.22,4.66666 11.22,6.48 C13.03334,5.72 14.4,4.75334 15.32,3.58 C13.77334,2.3 12,1.66 10,1.66 C9.32,1.66 8.64,1.75334 7.96,1.94 L7.96,1.94 Z M11.94,7.9 C12.14,8.32666 12.36668,8.86666 12.62,9.52 C13.60668,9.42666 14.68,9.38 15.84,9.38 C16.66668,9.38 17.48668,9.4 18.3,9.44 C18.19334,7.62666 17.54,6.01334 16.34,4.6 C15.47334,5.89334 14.00668,6.99334 11.94,7.9 L11.94,7.9 Z M13.12,10.92 C13.8,12.89334 14.26,14.92 14.5,17 C15.55334,16.32 16.41334,15.44666 17.08,14.38 C17.74668,13.31334 18.14668,12.16 18.28,10.92 C17.30668,10.85334 16.42,10.82 15.62,10.82 C14.88668,10.82 14.05334,10.85334 13.12,10.92 L13.12,10.92 Z" id="Shape"></path>
</g>
</g>
</svg>Dribbble</span>
</button>
</a>
</div>
</div>
</div>
</section>
<section class="footer">
<div class="container">
<div class="creative-commons"></div>
<a href="https://creativecommons.org/licenses/by/4.0/"><p class="aligned-center">CC BY 4.0</p></a>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>close</title><path d="M10 8.586l-7.07-7.07-1.415 1.413L8.585 10l-7.07 7.07 1.414 1.415 7.07-7.07 7.07 7.07 1.415-1.414-7.07-7.07 7.07-7.07-1.414-1.415L10 8.585" fill="#fff" fill-rule="evenodd"/></svg></span></button>
<h3 class="modal-title" id="myModalLabel">Selected Pattern</h3>
</div>
<div class="modal-body">
<div class="selected-pattern-header">
<div class="download-svg">
<a class="btn btn-link" href="{{ selectedPattern.download }}">
<span class="download-icon">
<svg class="svg-icon" width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" fill="#9179BA" fill-rule="evenodd"/></svg>Download unstyled SVG</span>
</a>
</div>
<h2 class="modal-title" id="myModalLabel">{{ selectedPattern.name }}</h2>
</div>
<form>
<h4>Generated CSS code</h4>
<label>Use the following CSS rules to apply this background pattern:</label>
<textarea class="form-control" rows="4" onclick="this.select()">{{ css }}</textarea>
</form>
<div class="row modal-appearance">
<div>
<div class="col-xs-12 col-sm-6">
<div class="modal-pattern-container" :style="modalStyle"></div>
</div>
<div class="col-xs-12 col-sm-6 appearance-settings">
<h4>Appearance Settings</h4>
<div class="form-control">
<label>
Foreground color
</label>
<div class="color-input">
<input type="text" v-el:modal-fg-color>
</div>
</div>
<div class="form-control">
<label>
Background color
</label>
<div class="color-input">
<input type="text" v-el:modal-bg-color>
</div>
</div>
<div class="form-control">
<label>
Foreground Opacity
</label>
<input type="range" min="0" max="1" step="0.01" v-model="modal.opacity">
</div>
<button type="button" class="btn btn-primary" @click="reset">Reset</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script src="/js/app.js"></script>
<script>
$('#appearance-settings').affix({
offset: {
top: $('#appearance-settings').offset().top,
}
});
$(document).on('affix.bs.affix', function() {
$('#patterns').css('padding-top', '120px');
});
$(document).on('affix-top.bs.affix', function() {
$('#patterns').css('padding-top', '');
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>