-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcinchsack.html
362 lines (312 loc) · 17.3 KB
/
cinchsack.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
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>LearnMYOG Cinch Sack</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="images/site.webmanifest">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="Learn to Make Your Own Gear (MYOG). DIY sewing patterns for ultralight backpacks, technical apparel, and outdoor adventurers.">
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script defer src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<script defer src="assets/js/colorswitcher.js"></script>
<script defer src="assets/js/header.js" type="text/javascript"></script>
<script defer src="assets/js/nav.js" type="text/javascript"></script>
<script defer src="assets/js/footer.js" type="text/javascript"></script>
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WP4C42S5VW"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-WP4C42S5VW');
</script>
<!-- Global site tag (gtag.js) - Google Analytics GA4 -->
</head>
<body class="is-preload">
<!-- Wrapper -->
<div id="wrapper" class="divided">
<!-- Banner -->
<header-template></header-template>
<!-- Nav -->
<div class="spotlight-color invert align-center">
<nav-template></nav-template>
</div>
<!-- Zip Pouch Generator -->
<section class="wrapper style2 align-center">
<div id="main" class="inner">
<header>
<h2>Cinch Sack Pattern Generator</h2>
<p>Ultralight Stuff Sack with Drawstring Channel and a Boxed Bottom</p>
</header>
<div class="gallery style1 small">
<article>
<a href="images\cinchsack\cinch.jpg" class="image">
<img src="images\cinchsack\cinch.jpg" title="Dimension for generator input" />
</a>
</article>
<article>
<a href="images\cinchsack\sample.jpg" class="image">
<img src="images\cinchsack\sample.jpg" title="Small stuff sack made with this generator" />
</a>
</article>
</div>
<div class="index align-left">
<section>
<header>
<h3>Pattern Generator</h3>
</header>
<div class="content">
<p>Create custom-sized stuff sacks effortlessly without complex calculations or 3D modeling. Simply input your desired finished 3D stuff sack dimensions, and our generator will calculate precise 2D pattern panels. Say goodbye to fabric waste and guesswork, especially if it's your first MYOG (Make Your Own Gear) project!
</p>
<form method="post" action="#">
<div class="fields">
<!-- Set Units -->
<div class="field third">
<label>Measurement Units</label>
</div>
<div class="field third">
<input type="radio" name="units" class="dimension" id="imperial" value="0" checked>
<label for="imperial">Inches (in)</label>
</div>
<div class="field third">
<input type="radio" name="units" class="dimension" id="metric" value="1">
<label for="metric">Centimeters (cm)</label>
</div>
<!-- Set Dimensions -->
<div class="field third">
<label for="bottomLength">Bottom Length</label>
<input type="number" name="bottomLength" class="dimension" id="bottomLength" min="1" value="" />
</div>
<div class="field third">
<label for="bottomWidth">Bottom Width</label>
<input type="number" name="bottomWidth" class="dimension" id="bottomWidth" min="1" value="" />
</div>
<div class="field third">
<label for="height">Height when Cinched</label>
<input type="number" name="height" class="dimension" id="height" min="1" value="" />
</div>
</div>
<!-- Button used for tab and force change -->
<div class="actions small">
<button class="button small" type="button">Generate</button>
</div>
</form>
<span class="image right"><img src="images\cinchsack\cinch1.jpg" alt="stuff sack pattern" /></span>
<p>Our provided panel dimensions already include the seam allowances. Additionally, note that the drawstring casing, also known as the cord channel, is consistently 1.5 inches (4cm) tall.
<ul class="alt">
<li><strong>Body Panel Length: <span class="patternLength"></span></strong></li>
<li><strong>Body Panel Height: <span class="patternHeight"></span></strong></li><br>
<li><strong>Cord Channel Length: <span class="channelLength"></span></strong></li>
<li><strong>Cord Channel Height: <span class="channelHeight"></span></strong></li>
</ul>
</p>
</div>
</section>
</div>
</div>
</section>
<!-- stuff sack instructions -->
<section id="stuffSackIstructions" class="wrapper style1 align-center">
<div class="inner">
<header>
<h2>Assembly Instructions</h2>
<p>A Beginner's Journey: Your Gateway to Sewing Success!</p>
</header>
<div class="index align-left">
<section>
<header>
<h3>Materials</h3>
</header>
<div class="content">
<span class="image right"><img src="images/cinchsack/materials.jpg" alt="stuff sack materials"/></span>
<p>For guidance on suitable technical fabrics, recommendations, and trusted vendors, refer to our <a href="fabrics.html">Fabrics Guide</a>. Please note that this is a beginner-friendly project, and it is intended for non-fray technical fabrics. Therefore, seam binding or seam finishing techniques are not included in the instructions.
</p>
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Materials</th>
<th>Links</th>
</tr>
</thead>
<tr>
<td>Lightweight Coated Nylon such as<br>1.9oz PU Coated Nylon or 2.2oz Hex 70</td>
<td><a href="https://ripstopbytheroll.com/collections/waterproof-nylon-fabric?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Drawstring Cord</td>
<td><a href="https://ripstopbytheroll.com/collections/non-spliceable-cordage/products/1-5-mm-mini-cord?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Cord Lock</td>
<td><a href="https://ripstopbytheroll.com/collections/plastic-cordlocks/products/micro-cordlock?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Grosgrain Ribbon<br>1/2"-3/4" (13-20mm) wide, 4" (10cm) long</td>
<td><a href="https://ripstopbytheroll.com/collections/grosgrain-ribbon/products/mil-spec-nylon-grosgrain-ribbon?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Polyester Thread such as<br>Gutermann Sew-All or Gutermann MARA 70</td>
<td><a href="https://ripstopbytheroll.com/collections/thread-tools-repair/products/gutermann-mara-70?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
<tr>
<td>Machine Needles such as<br>Schmetz Universal size 90/14</td>
<td><a href="https://ripstopbytheroll.com/collections/thread-tools-repair/products/schmetz-universal-machine-needle?rfsn=4608557.2d546b9" target="_blank"><img class="partner icon" src="/images/shared/partners/48/rbtr.png" alt="Ripstop by the Roll logo"></a></td>
</tr>
</table>
</div>
<p class="disclosure">Qualified purchases support LearnMYOG.com at no additional cost to you. See <a href="/about.html#disclosures">Disclosures</a> for more information.</p>
</div>
</section>
<section class="spotlight style1 content-align-center">
<div class="content">
<h3>Ultimate Beginner Guide</h3>
<p>From Day 1 to Gear Making Guru <br>
Detailed MYOG Guide and Essential Tools</p>
<a href="/zerotohero.html" class="button primary"><span class="icon solid fa-forward"></span> Zero to Hero Guide</a>
</div>
<div class="image">
<img src="images/index/zero2hero.jpg" alt="sewist" />
</div>
</section>
<section>
<header>
<h3>Fabric Panels</h3>
</header>
<div class="content">
<span class="image right"><img src="images/cinchsack/cinch1.jpg" alt="Body panel pattern"/></span>
<p><strong><span class="sA">Based on units selected</span></strong> seam allowances are already included in the pattern. Not seeing measurements? Generate pattern dimensions above.</p>
<ol>
<li>Cut one Body Panel from your fabric.<br> <strong>Length: <span class="patternLength"></span></strong> and <strong>Height: <span class="patternHeight"></span></strong></li>
<li>Cut one Cord Channel panel from your fabric.<br> <strong>Length: <span class="channelLength"></span></strong> and <strong>Height: <span class="channelHeight"></span></strong></li>
<li>Cut one drawstring cord. <strong>Length: <span class="cordLength"></span></strong></li>
<li>On the wrong side, mark the mid point of Body Panel along top and bottom edges. <br>📌 Lightly fold the fabric panel in half to quickly find the midpoint.</li>
</ol>
<img src="images/cinchsack/cinch3.jpg" class="image left" alt="Body Panel pattern"/>
<p>To enhance clarity, we use light grey to represent the wrong side of the fabric and white to depict the right side in the illustrations. The <span style="color:red">red</span> dashed line illustrates the seam being sewn.</p>
</div>
</section>
<section>
<header>
<h3>Drawstring Channel</h3>
</header>
<div class="content">
<span class="image right"><img src="images/cinchsack/cinch4.jpg" alt="Prep cord channel"/></span>
<ol>
<li>Fold one end of Cord Channel <strong><span class="sA"></span></strong> to the wrong side and crease flat. Sew the single fold hem.</li>
<li>Repeat on the opposite end of Cord Channel.</li>
<li>Fold the Cord Channel in half along the long edge, with the wrong sides touching. Stitch close to the raw edge to create a channel, making sure to sew within the <strong><span class="sA"></span></strong> seam allowance.</li>
<li>Fold the short length of ribbon in half and place at the center of Cord Channel. Ensure the raw edges are touching. Sew a webbing pull loop at the midpoint of Cord Channel, stitching within the <strong><span class="sA"></span></strong> seam allowance.</li>
</ol>
</div>
</section>
<section>
<header>
<h3>Attach Cord Channel</h3>
</header>
<div class="content">
<span class="image right"><img src="images/cinchsack/cinch5.jpg" alt="Sew channel to body"/><br>
<img src="images/cinchsack/cinch6.jpg" alt="Topstitch channel"/></span>
<ol>
<li>With right sides together, center align Cord Channel to top edge of Body Panel.<br>
📌 The Cord Channel should be inset <strong><span class="sA">1/2"</span></strong> from the sides of Body Panel. Ensure the webbing loop is sandwiched between Body and Cord Channel.</li>
<li> Sew Cord Channel to Body Panel using a <strong><span class="sA">1/2"</span></strong> seam allowance.</li>
<li>Flip the Cord Channel up and finger press the seam to the Body Panel.</li>
<li>Along top edge of Body Panel just below Cord Channel, topstitch through Body Panel and seam allowances.</li>
</ol>
</div>
</section>
<section>
<header>
<h3>Body Seams</h3>
</header>
<div class="content">
<ol>
<li>Fold the Body Panel in half so right sides are together.</li>
<li>Sew the side seam with a <strong><span class="sA">1/2"</span></strong> seam allowance. Stitch close to but not overlapping the Cord Channel openings.</li>
<li>Open and align the side seam in the middle of Body Panel. Finger press the seam to one side.</li>
<li>Stitch the bottom closed with a <strong><span class="sA">1/2"</span></strong> seam allowance.</li>
</ol>
<img src="images/cinchsack/cinch7.jpg" class="image small" alt="Stitch side seam"/>
<img src="images/cinchsack/cinch8.jpg" class="image small" alt="Stitch bottom seam"/></span>
</div>
</section>
<section>
<header>
<h3>Squaring the Bottom</h3>
</header>
<div class="content">
<ol>
<li>Blow a little air into the stuff sack and press the sides inwards to form crisp boxed corners along the bottom seam.</li>
<li>With the bottom seam finger pressed flat and straight, draw two marks from the left side:
<ul style="margin:0;">
<li>1/2 Bottom Width = <strong><span class="halfBottomWidth">input measurements</span></strong></li>
<li>Bottom Length = <strong><span class="bottomLength">input measurements</span></strong></li>
<li>1/2 Bottom Width <strong><span class="halfBottomWidth">input measurements</span></strong> should remain.</li>
</ul>
</li>
<li>At first mark, draw a <strong><span class="bottomWidth">[Bottom Width]</span></strong> line perpendicular and square to bottom seam.</li>
<li>Repeat again at the next mark. The bottom should look like the image.</li>
<li>Stitch along the vertical lines forming the rectangular bottom.</li>
<li>Before trimming off the corners, turn your bag right side out to check for overall symmetry.</li>
<li>Trim the corners off about <strong><span class="sA">1/2"</span></strong> from the seam.</li>
</ol>
<img src="images/cinchsack/cinch9.jpg" class="image small" alt="Sew squared corners"/>
<img src="images/cinchsack/cinch10.jpg" class="image small" alt="Trim squared corners"/>
</div>
</section>
<section>
<header>
<h3>Finishing Cinch Sack</h3>
</header>
<div class="content">
<span class="image right"><img src="images/cinchsack/sample.jpg" alt="sample stuff sack"/></span>
<ol>
<li>Turn your cinch sack right side out one final time!</li>
<li>To reinforce the Cord Channel opening where it meets Body Panel, sew a small bartack about <strong><span class="sA">1/2"</span></strong> long.</li>
<li>Attach a safety pin to one end of the drawstring cord and thread it through the opening in the cord channel.</li>
<li>Once the cord is all the way through, add the cord lock and tie the free ends of the drawstring together to secure.</li>
<li>Your Cinch Sack is now ready to use! Simply pull the drawstring to close the sack and carry your belongings with ease.</li>
</ol>
<h4>👏 Congrats on making your own custom Cinch Sack!</h4>
<p>If you want to try another style, check out the <a href="rolltopsack.html">Roll Top Stuff Sack</a> next!</p>
</div>
</section>
</div>
</div>
</section>
</div>
<!-- Footer -->
<footer-template></footer-template>
<!-- HTML Template Scripts -->
<script defer src="assets/js/jquery.scrollex.min.js"></script>
<script defer src="assets/js/jquery.scrolly.min.js"></script>
<script defer src="assets/js/jquery.poptrox.min.js"></script>
<script defer src="assets/js/browser.min.js"></script>
<script defer src="assets/js/breakpoints.min.js"></script>
<script defer src="assets/js/util.js"></script>
<script defer src="assets/js/main.js"></script>
<script defer>
window.addEventListener('load', function () {
const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
try {
document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
console.log(pgtitle,"is a nav element. Set active.")
} catch (TypeError) {
console.log(pgtitle,"not a nav element.")
}
}, false);
</script>
<!-- MYOG Pattern Scripts -->
<script defer src="assets/js/cinchsack.js"></script>
</body>
<!--
Story by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
</html>