-
Notifications
You must be signed in to change notification settings - Fork 2
/
stuffsack.html
360 lines (312 loc) · 17.3 KB
/
stuffsack.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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>LearnMYOG Stuff 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). Sewing patterns and tutorials for 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>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/canvg/3.0.0/canvg.min.js"></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>
<!-- Pattern Generator -->
<section class="wrapper style2 align-center">
<div id="main" class="inner">
<header>
<h1>Stuff Sack Pattern Generator</h1>
<p>Skill Building Round Bottom Stuff Sack with Cinch Cord</p>
</header>
<div class="gallery style1 small">
<article>
<a href="images\stuffsack\roundstuff.jpg" class="image">
<img src="images\stuffsack\roundstuff.jpg" title="Small stuff sack made with this generator" />
</a>
</article>
<article>
<a href="images\stuffsack\stuffsack2.jpg" class="image">
<img src="images\stuffsack\stuffsack2.jpg" title="Small stuff sack made with this generator" />
</a>
</article>
<article>
<a href="images\stuffsack\stuffsack3.jpg" class="image">
<img src="images\stuffsack\stuffsack3.jpg" title="Measured cook kit for a perfect storage bag." />
</a>
</article>
</div>
<div class="index align-left">
<section>
<header>
<h3>Pattern Generator</h3>
</header>
<div class="content">
<span class="image left"><img src="images/stuffsack/round.jpg" alt="stuff sack plan" /></span>
<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.
If this is your very first time sewing, I recommend starting with <a href="cinchsack.html">Cinch Sack</a> as sewing the round bottom of this stuff sack can be challenging for beginners.
</p>
<form method="post" action="#">
<div class="fields">
<!-- Set Units -->
<div class="field third">
<label>Pattern 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 half">
<label for="diameter">Diameter</label>
<input type="number" name="diameter" class="dimension" id="diameter" value="" />
</div>
<div class="field half">
<label for="height">Height when Cinched</label>
<input type="number" name="height" class="dimension" id="height" 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/stuffsack/round0.jpg" alt="stuff sack pattern" /></span>
<p>Our provided panel dimensions already include the seam allowances and an integrated drawstring Cord Channel allowance of 1.5" (4 cm).</p>
<ul class="alt">
<li><strong>Body Panel Length: <span class="patternWidth"></span></strong></li>
<li><strong>Body Panel Height: <span class="patternHeight"></span></strong></li>
<li><strong>Bottom Panel Radius: <span class="patternRadius"></span></strong></li>
</ul>
<p>For Stuff Sacks with a 6.5 in. (16.5 cm) diameter or less, you can now download a PDF paper pattern generated to the exact Bottom Panel Radius. Give it a try!</p>
<button class="button small" onclick="exportToPDF()">Download</button>
</div>
</section>
</div>
</div>
</section>
<!-- Stuff sack materials -->
<section id="stuffSackInstructions" class="wrapper style1 align-center">
<div class="inner">
<header>
<h2>Assembly Instructions</h2>
<p>Sew Smart, Start Simple: Embark on Your Sewing Adventure</p>
</header>
<div class="index align-left">
<section>
<header>
<h3>Materials</h3>
</header>
<div class="content">
<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>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>Bottom Pattern</h3>
</header>
<div class="content">
<span class="image right"><img src="images/stuffsack/round1.jpg" alt="Pattern"/></span>
<p>For Stuff Sacks larger than 6.5 inches (16.5 cm) in diameter, follow the next steps to draft a paper pattern by hand. For smaller Stuff Sacks, simply download the paper pattern generated for you above.</p>
<ol>
<li>For the round Bottom Panel, cut a square piece of paper with a side length larger than <strong><span class="patternDiameter">input</span></strong></li>
<li>Fold this square in half, and then in half again making a smaller square.</li>
<li>From the folded corner draw the generated Bottom Panel Radius <strong><span class="patternRadius">measurement</span></strong> as shown.</li>
<li>Cut all four paper layers and unfold your perfectly symmetric circle pattern.</li>
</ol>
</div>
</section>
<section>
<header>
<h3>Fabric Panels</h3>
</header>
<div class="content">
<span class="image right"><img src="images/stuffsack/round0.jpg" alt="Pattern"/></span>
<p>A <strong><span class="sA">Based on units selected</span></strong> seam allowance is already included in the pattern. Not seeing measurements? Generate pattern dimensions above.</p>
<ol>
<li>Cut one Body Panel from your fabric.<br>
Length: <strong><span class="patternWidth">input</span></strong> and Height: <strong><span class="patternHeight">input</span></strong></li>
<li>Cut one Bottom Panel from your fabric.</li>
<li>Cut one drawstring cord. <strong>Length: <span class="cordLength"></span></strong></li>
</ol>
<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>Cord Channel</h3>
</header>
<div class="content">
<span class="image right"><img src="images/stuffsack/round2.jpg" alt="Cord Channel corner folds"/>
<img src="images/stuffsack/round3.jpg" alt="Cord channel stitch line"></span>
<ol>
<li>On the wrong side of Body Panel, mark a line down <strong>1 1/2 in. (4cm)</strong> from the topd edge as a guide line for the Cord Channel.</li>
<li>To the wrong side, fold the top corners down to meet the guide line. Finger press to crease.</li>
<li>Fold the remaining top edge down to the guide line.</li>
<li>Sew the fold at <strong>1/8" (3mm)</strong> from raw edge to leave ample room for a drawstring.</li>
</ol>
</div>
</section>
<section>
<header>
<h3>Sewing the Circle</h3>
</header>
<div class="content">
<span class="image right"><img src="images/stuffsack/round4a.jpg" alt="Joining the round bottom"/></span>
<p>To achieve clean circles when sewing, it's crucial to maintain precise seam allowances. While my preferred assembly order may seem unorthodox, it has been proven effective in minimizing puckering. </p>
<p> 📌 This step is notably challenging, so be patient and take your time. Using a shorter stitch length, about 2-2.5 mm, can aid in sewing smoother curves.</p>
<ol>
<li>Align the right sides of the fabric together, placing the outer edge of the round Bottom Panel against the edge of the Body Panel opposite the cord channel. Leave approximately <strong>1 inch (25mm)</strong> of space from the corner of the Bottom Panel, ensuring enough seam allowance for later closure of the side.</li>
<li>Employ a seam guide to maintain accuracy while sewing. Sew the round Bottom Panel to the Body Panel with a <strong><span class="sA">3/8"</span></strong> seam allowance in a continuous, straight motion. As you stitch, rotate the Bottom Panel to ensure smooth fabric movement through the machine. Proceed at a slow pace, ensuring the edges remain aligned and even throughout the process.</li>
<li>As you near your starting point stop short to avoid stitching over the seam allowance for later closure of the side. This small gap will be closed in later to avoid puckering.</li>
</ol>
<p>Don't sweat it your first try. Sewing circles takes a lot of patience and practice.</p>
</div>
</section>
<section>
<header>
<h3>Closing the Side</h3>
</header>
<div class="content">
<span class="image right"><img src="images/stuffsack/round5.jpg" alt="Sewing the side seam"/><img src="images/stuffsack/round6.jpg" alt="Closing the gap"></span>
<ol>
<li>Because we stitched the circle first, the vertical seam allowances may not meet perfectly together. No worries!</li>
<li>Press your stuff sack flat against the machine table so you can close the side seam.</li>
<li>Being careful not to catch Bottom, sew towards cord channel with a <strong><span class="sA">3/8"</span></strong> seam allowance.</li>
<li>Stop and backstitch once you reach cord channel. Be careful not to sew your cord channel openings shut!</li>
<li>With the side seam closed, inspect the gap in Bottom. If necessary, sew it closed while smoothing the fabric to avoid puckering.</li>
</ol>
<p>📌 As you become more confident and accurate in your sewing, try sewing the side seam first. Then sew the round Bottom to the Body.</p>
</div>
</section>
<section>
<header>
<h3>Finishing Up</h3>
</header>
<div class="content">
<span class="image right"><img src="images/stuffsack/roundstuff.jpg" alt="sample stuff sack"/></span>
<ol>
<li>Turn your Stuff Sack right side out!</li>
<li>To reinforce the Cord Channel opening where it meets Body Panel, sew a small bartack about <strong><span class="sA">3/8"</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 Stuff 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 Round Bottom Stuff Sack!</h4>
<p>Sewing round bottom stuff sacks is tougher than it appears huh?!<br>
If you want to try an easier style, check out the <a href="cinchsack.html">Cinch Sack</a>!</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 src="assets/js/exportToPDF.js"></script>
<script defer>
function exportToPDF() {
const diameterInput = parseFloat(document.getElementById('diameter').value).toFixed(2);
// Export the circle to PDF
exportToPDFCircle(diameterInput);
}
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/stuffsack.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>