Repository navigation
Expand file tree
/
Copy pathexample-exploded-unboxing.html
More file actions
84 lines (78 loc) · 16.3 KB
/
Copy pathexample-exploded-unboxing.html
File metadata and controls
84 lines (78 loc) · 16.3 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unboxing · What you see, in the order you see it</title>
<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--color-paper: #f5f5f5;
--color-ink: #2d3142;
--color-muted: #4f5d75;
--color-accent: #eb6c36;
--font-sans: 'Geist', system-ui, sans-serif;
--font-serif: 'Instrument Serif', serif;
--font-mono: 'Geist Mono', ui-monospace, monospace;
}
body {
font-family: var(--font-sans);
background: var(--color-paper);
color: var(--color-ink);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
}
.frame { max-width: 1200px; width: 100%; }
.diagram-container { width: 100%; overflow-x: auto; }
.eyebrow {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 0.5rem;
}
h1 {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.4vw + 0.75rem, 2rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--color-ink);
margin-bottom: 1.5rem;
}
svg { width: 100%; min-width: 1000px; display: block; }
@media print {
.diagram-container { overflow-x: visible; }
svg { min-width: 0; }
}
</style>
</head>
<body>
<div class="frame">
<p class="eyebrow">Exploded axonometric · Diagram Design</p>
<h1>Unboxing · What you see, in the order you see it</h1>
<div class="diagram-container">
<svg viewBox="0 0 1000 964" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="exploded-unboxing-title exploded-unboxing-desc">
<title id="exploded-unboxing-title">Unboxing · What you see, in the order you see it</title>
<desc id="exploded-unboxing-desc">Exploded view of product packaging: printed lid, the speaker and its cable, the moulded insert that holds them, and the rigid box, with the speaker as the focal part.</desc>
<rect width="100%" height="100%" fill="#f5f5f5"/>
<g data-exploded data-origin="348 752" data-gap="180">
<line data-role="trace" x1="170.34" y1="770" x2="170.34" y2="158" stroke="rgba(45,49,66,0.30)" stroke-width="0.8" stroke-dasharray="4,3"/><line data-role="trace" x1="525.66" y1="770" x2="525.66" y2="158" stroke="rgba(45,49,66,0.30)" stroke-width="0.8" stroke-dasharray="4,3"/>
<g data-part="box" data-name="Box" data-rect="0 0 180 180 4" data-z="0" data-t="72" data-level="0" data-kind="housing"><path data-role="silhouette" d="M 170.34 770 A 5.66 2.83 0 0 1 172 768 L 344 682 A 5.66 2.83 0 0 1 352 682 L 524 768 A 5.66 2.83 0 0 1 525.66 770 L 525.66 842 A 5.66 2.83 0 0 1 524 844 L 352 930 A 5.66 2.83 0 0 1 344 930 L 172 844 A 5.66 2.83 0 0 1 170.34 842 Z" fill="#ffffff"/><path d="M 352 858 A 5.66 2.83 0 0 1 344 858 L 172 772 A 5.66 2.83 0 0 1 172 768 L 344 682 A 5.66 2.83 0 0 1 352 682 L 524 768 A 5.66 2.83 0 0 1 524 772 Z" fill="#ffffff"/><path d="M 348 855 L 348 855 L 178 770 L 178 770 L 348 685 L 348 685 L 518 770 L 518 770 Z" fill="#ffffff"/><path d="M 348 855 L 348 855 L 178 770 L 178 770 L 348 685 L 348 685 L 518 770 L 518 770 Z" fill="rgba(45,49,66,0.10)"/><clipPath id="exploded-unboxing-box-cavity"><path d="M 348 855 L 348 855 L 178 770 L 178 770 L 348 685 L 348 685 L 518 770 L 518 770 Z"/></clipPath><g clip-path="url(#exploded-unboxing-box-cavity)"><path d="M 348 924 L 348 924 L 178 839 L 178 839 L 348 754 L 348 754 L 518 839 L 518 839 Z" fill="#ffffff"/><path d="M 348 924 L 348 924 L 178 839 L 178 839 L 348 754 L 348 754 L 518 839 L 518 839 Z" fill="rgba(45,49,66,0.04)"/><path d="M 348 924 L 348 924 L 178 839 L 178 839 L 348 754 L 348 754 L 518 839 L 518 839 Z" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/></g><path d="M 348 855 L 348 855 L 178 770 L 178 770 L 348 685 L 348 685 L 518 770 L 518 770 Z" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 170.34 770 A 5.66 2.83 0 0 1 172 768 L 344 682 A 5.66 2.83 0 0 1 352 682 L 524 768 A 5.66 2.83 0 0 1 525.66 770" fill="none" stroke="#2d3142" stroke-width="1.2" stroke-linejoin="round"/><g data-role="label"><line data-role="leader" x1="531.66" y1="806" x2="582.49" y2="806" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/><circle cx="525.66" cy="806" r="2" fill="#2d3142"/><text data-role="name" x="594.49" y="805" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Box</text><text x="594.49" y="821" fill="#4f5d75" font-size="10" font-family="'Geist Mono', monospace" letter-spacing="0.08em">rigid board</text></g></g>
<g data-part="insert" data-name="Insert" data-rect="6 6 174 174 2" data-z="252" data-t="12" data-level="1"><path data-role="silhouette" d="M 181.17 578 A 2.83 1.41 0 0 1 182 577 L 346 495 A 2.83 1.41 0 0 1 350 495 L 514 577 A 2.83 1.41 0 0 1 514.83 578 L 514.83 590 A 2.83 1.41 0 0 1 514 591 L 350 673 A 2.83 1.41 0 0 1 346 673 L 182 591 A 2.83 1.41 0 0 1 181.17 590 Z" fill="#ffffff"/><path d="M 181.17 578 A 2.83 1.41 0 0 0 182 579 L 346 661 A 2.83 1.41 0 0 0 348 661.41 L 348 673.41 A 2.83 1.41 0 0 1 346 673 L 182 591 A 2.83 1.41 0 0 1 181.17 590 Z" fill="rgba(45,49,66,0.07)"/><path d="M 348 661.41 A 2.83 1.41 0 0 0 350 661 L 514 579 A 2.83 1.41 0 0 0 514.83 578 L 514.83 590 A 2.83 1.41 0 0 1 514 591 L 350 673 A 2.83 1.41 0 0 1 348 673.41 Z" fill="rgba(45,49,66,0.15)"/><path d="M 382 603 A 70.71 35.36 0 0 1 282 603 L 282 603 A 70.71 35.36 0 0 1 282 553 L 282 553 A 70.71 35.36 0 0 1 382 553 L 382 553 A 70.71 35.36 0 0 1 382 603 Z" fill="rgba(45,49,66,0.14)" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 451 609.5 A 7.07 3.54 0 0 1 441 609.5 L 413 595.5 A 7.07 3.54 0 0 1 413 590.5 L 441 576.5 A 7.07 3.54 0 0 1 451 576.5 L 479 590.5 A 7.07 3.54 0 0 1 479 595.5 Z" fill="rgba(45,49,66,0.14)" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 181.17 578 A 2.83 1.41 0 0 0 182 579 L 346 661 A 2.83 1.41 0 0 0 350 661 L 514 579 A 2.83 1.41 0 0 0 514.83 578" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 181.17 578 A 2.83 1.41 0 0 1 182 577 L 346 495 A 2.83 1.41 0 0 1 350 495 L 514 577 A 2.83 1.41 0 0 1 514.83 578 L 514.83 590 A 2.83 1.41 0 0 1 514 591 L 350 673 A 2.83 1.41 0 0 1 346 673 L 182 591 A 2.83 1.41 0 0 1 181.17 590 Z" fill="none" stroke="#2d3142" stroke-width="1.2" stroke-linejoin="round"/><g data-role="label"><line data-role="leader" x1="520.83" y1="584" x2="582.49" y2="584" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/><circle cx="514.83" cy="584" r="2" fill="#2d3142"/><text data-role="name" x="594.49" y="583" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Insert</text><text x="594.49" y="599" fill="#4f5d75" font-size="10" font-family="'Geist Mono', monospace" letter-spacing="0.08em">moulded pulp</text></g></g>
<g data-part="cable" data-name="Cable" data-rect="138 40 170 72 4" data-z="444" data-t="14" data-level="2"><path data-role="silhouette" d="M 416.34 399 A 5.66 2.83 0 0 1 418 397 L 442 385 A 5.66 2.83 0 0 1 450 385 L 474 397 A 5.66 2.83 0 0 1 475.66 399 L 475.66 413 A 5.66 2.83 0 0 1 474 415 L 450 427 A 5.66 2.83 0 0 1 442 427 L 418 415 A 5.66 2.83 0 0 1 416.34 413 Z" fill="#ffffff"/><path d="M 416.34 399 A 5.66 2.83 0 0 0 418 401 L 442 413 A 5.66 2.83 0 0 0 446 413.83 L 446 427.83 A 5.66 2.83 0 0 1 442 427 L 418 415 A 5.66 2.83 0 0 1 416.34 413 Z" fill="rgba(45,49,66,0.07)"/><path d="M 446 413.83 A 5.66 2.83 0 0 0 450 413 L 474 401 A 5.66 2.83 0 0 0 475.66 399 L 475.66 413 A 5.66 2.83 0 0 1 474 415 L 450 427 A 5.66 2.83 0 0 1 446 427.83 Z" fill="rgba(45,49,66,0.15)"/><path d="M 450 407 A 5.66 2.83 0 0 1 442 407 L 430 401 A 5.66 2.83 0 0 1 430 397 L 442 391 A 5.66 2.83 0 0 1 450 391 L 462 397 A 5.66 2.83 0 0 1 462 401 Z" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 450 402 A 5.66 2.83 0 0 1 442 402 L 440 401 A 5.66 2.83 0 0 1 440 397 L 442 396 A 5.66 2.83 0 0 1 450 396 L 452 397 A 5.66 2.83 0 0 1 452 401 Z" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 416.34 399 A 5.66 2.83 0 0 0 418 401 L 442 413 A 5.66 2.83 0 0 0 450 413 L 474 401 A 5.66 2.83 0 0 0 475.66 399" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 416.34 399 A 5.66 2.83 0 0 1 418 397 L 442 385 A 5.66 2.83 0 0 1 450 385 L 474 397 A 5.66 2.83 0 0 1 475.66 399 L 475.66 413 A 5.66 2.83 0 0 1 474 415 L 450 427 A 5.66 2.83 0 0 1 442 427 L 418 415 A 5.66 2.83 0 0 1 416.34 413 Z" fill="none" stroke="#2d3142" stroke-width="1.2" stroke-linejoin="round"/><g data-role="label"><line data-role="leader" x1="481.66" y1="406" x2="582.49" y2="406" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/><circle cx="475.66" cy="406" r="2" fill="#2d3142"/><text data-role="name" x="594.49" y="405" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Cable</text><text x="594.49" y="421" fill="#4f5d75" font-size="10" font-family="'Geist Mono', monospace" letter-spacing="0.08em">usb-c, 1 m</text></g></g>
<g data-part="speaker" data-name="Speaker" data-rect="36 52 128 144 46" data-z="444" data-t="60" data-level="2" data-focal><path data-role="silhouette" d="M 266.95 338 A 65.05 32.53 0 0 1 286 315 L 286 315 A 65.05 32.53 0 0 1 378 315 L 378 315 A 65.05 32.53 0 0 1 397.05 338 L 397.05 398 A 65.05 32.53 0 0 1 378 421 L 378 421 A 65.05 32.53 0 0 1 286 421 L 286 421 A 65.05 32.53 0 0 1 266.95 398 Z" fill="#ffffff"/><path d="M 378 361 A 65.05 32.53 0 0 1 286 361 L 286 361 A 65.05 32.53 0 0 1 286 315 L 286 315 A 65.05 32.53 0 0 1 378 315 L 378 315 A 65.05 32.53 0 0 1 378 361 Z" fill="rgba(235,108,54,0.10)"/><path d="M 266.95 338 A 65.05 32.53 0 0 0 286 361 L 286 361 A 65.05 32.53 0 0 0 332 370.53 L 332 430.53 A 65.05 32.53 0 0 1 286 421 L 286 421 A 65.05 32.53 0 0 1 266.95 398 Z" fill="rgba(235,108,54,0.20)"/><path d="M 332 370.53 A 65.05 32.53 0 0 0 378 361 L 378 361 A 65.05 32.53 0 0 0 397.05 338 L 397.05 398 A 65.05 32.53 0 0 1 378 421 L 378 421 A 65.05 32.53 0 0 1 332 430.53 Z" fill="rgba(235,108,54,0.32)"/><path d="M 266.95 388 A 65.05 32.53 0 0 0 286 411 L 286 411 A 65.05 32.53 0 0 0 378 411 L 378 411 A 65.05 32.53 0 0 0 397.05 388" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.6"/><path d="M 266.95 380 A 65.05 32.53 0 0 0 286 403 L 286 403 A 65.05 32.53 0 0 0 378 403 L 378 403 A 65.05 32.53 0 0 0 397.05 380" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.6"/><path d="M 266.95 372 A 65.05 32.53 0 0 0 286 395 L 286 395 A 65.05 32.53 0 0 0 378 395 L 378 395 A 65.05 32.53 0 0 0 397.05 372" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.6"/><path d="M 266.95 364 A 65.05 32.53 0 0 0 286 387 L 286 387 A 65.05 32.53 0 0 0 378 387 L 378 387 A 65.05 32.53 0 0 0 397.05 364" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.6"/><path d="M 266.95 356 A 65.05 32.53 0 0 0 286 379 L 286 379 A 65.05 32.53 0 0 0 378 379 L 378 379 A 65.05 32.53 0 0 0 397.05 356" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.6"/><path d="M 368 356 A 50.91 25.46 0 0 1 296 356 L 296 356 A 50.91 25.46 0 0 1 296 320 L 296 320 A 50.91 25.46 0 0 1 368 320 L 368 320 A 50.91 25.46 0 0 1 368 356 Z" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.8"/><path d="M 342 343 A 14.14 7.07 0 0 1 322 343 L 322 343 A 14.14 7.07 0 0 1 322 333 L 322 333 A 14.14 7.07 0 0 1 342 333 L 342 333 A 14.14 7.07 0 0 1 342 343 Z" fill="#eb6c36"/><path d="M 266.95 338 A 65.05 32.53 0 0 0 286 361 L 286 361 A 65.05 32.53 0 0 0 378 361 L 378 361 A 65.05 32.53 0 0 0 397.05 338" fill="none" stroke="rgba(235,108,54,0.70)" stroke-width="0.8"/><path d="M 266.95 338 A 65.05 32.53 0 0 1 286 315 L 286 315 A 65.05 32.53 0 0 1 378 315 L 378 315 A 65.05 32.53 0 0 1 397.05 338 L 397.05 398 A 65.05 32.53 0 0 1 378 421 L 378 421 A 65.05 32.53 0 0 1 286 421 L 286 421 A 65.05 32.53 0 0 1 266.95 398 Z" fill="none" stroke="#eb6c36" stroke-width="1.2" stroke-linejoin="round"/><g data-role="label"><line data-role="leader" x1="403.05" y1="368" x2="582.49" y2="368" stroke="rgba(235,108,54,0.60)" stroke-width="0.8"/><circle cx="397.05" cy="368" r="2" fill="#eb6c36"/><text data-role="name" x="594.49" y="367" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Speaker</text><text x="594.49" y="383" fill="#eb6c36" font-size="10" font-family="'Geist Mono', monospace" letter-spacing="0.08em">the product</text></g></g>
<g data-part-front="box"><path d="M 170.34 770 A 5.66 2.83 0 0 0 172 772 L 344 858 A 5.66 2.83 0 0 0 352 858 L 524 772 A 5.66 2.83 0 0 0 525.66 770 L 525.66 842 A 5.66 2.83 0 0 1 524 844 L 352 930 A 5.66 2.83 0 0 1 344 930 L 172 844 A 5.66 2.83 0 0 1 170.34 842 Z" fill="#ffffff"/><path d="M 170.34 770 A 5.66 2.83 0 0 0 172 772 L 344 858 A 5.66 2.83 0 0 0 352 858 L 524 772 A 5.66 2.83 0 0 0 525.66 770 L 518 770 L 518 770 L 348 855 L 348 855 L 178 770 L 178 770 Z" fill="#ffffff"/><path d="M 170.34 770 A 5.66 2.83 0 0 0 172 772 L 344 858 A 5.66 2.83 0 0 0 348 858.83 L 348 930.83 A 5.66 2.83 0 0 1 344 930 L 172 844 A 5.66 2.83 0 0 1 170.34 842 Z" fill="rgba(45,49,66,0.07)"/><path d="M 348 858.83 A 5.66 2.83 0 0 0 352 858 L 524 772 A 5.66 2.83 0 0 0 525.66 770 L 525.66 842 A 5.66 2.83 0 0 1 524 844 L 352 930 A 5.66 2.83 0 0 1 348 930.83 Z" fill="rgba(45,49,66,0.15)"/><path d="M 178 770 L 178 770 L 348 855 L 348 855 L 518 770 L 518 770" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 170.34 770 A 5.66 2.83 0 0 0 172 772 L 344 858 A 5.66 2.83 0 0 0 352 858 L 524 772 A 5.66 2.83 0 0 0 525.66 770" fill="none" stroke="#2d3142" stroke-width="1.2"/><path d="M 170.34 770 L 170.34 842 A 5.66 2.83 0 0 0 172 844 L 344 930 A 5.66 2.83 0 0 0 352 930 L 524 844 A 5.66 2.83 0 0 0 525.66 842 L 525.66 770" fill="none" stroke="#2d3142" stroke-width="1.2" stroke-linejoin="round"/></g>
<g data-part="lid" data-name="Lid" data-rect="-3 -3 183 183 6" data-z="684" data-t="28" data-level="3"><path data-role="silhouette" d="M 165.51 130 A 8.49 4.24 0 0 1 168 127 L 342 40 A 8.49 4.24 0 0 1 354 40 L 528 127 A 8.49 4.24 0 0 1 530.49 130 L 530.49 158 A 8.49 4.24 0 0 1 528 161 L 354 248 A 8.49 4.24 0 0 1 342 248 L 168 161 A 8.49 4.24 0 0 1 165.51 158 Z" fill="#ffffff"/><path d="M 165.51 130 A 8.49 4.24 0 0 0 168 133 L 342 220 A 8.49 4.24 0 0 0 348 221.24 L 348 249.24 A 8.49 4.24 0 0 1 342 248 L 168 161 A 8.49 4.24 0 0 1 165.51 158 Z" fill="rgba(45,49,66,0.07)"/><path d="M 348 221.24 A 8.49 4.24 0 0 0 354 220 L 528 133 A 8.49 4.24 0 0 0 530.49 130 L 530.49 158 A 8.49 4.24 0 0 1 528 161 L 354 248 A 8.49 4.24 0 0 1 348 249.24 Z" fill="rgba(45,49,66,0.15)"/><path d="M 348 209 L 348 209 L 190 130 L 190 130 L 348 51 L 348 51 L 506 130 L 506 130 Z" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 362 137 A 19.8 9.9 0 0 1 334 137 L 334 137 A 19.8 9.9 0 0 1 334 123 L 334 123 A 19.8 9.9 0 0 1 362 123 L 362 123 A 19.8 9.9 0 0 1 362 137 Z" fill="none" stroke="#2d3142" stroke-width="1.2"/><path d="M 353 132.5 A 7.07 3.54 0 0 1 343 132.5 L 343 132.5 A 7.07 3.54 0 0 1 343 127.5 L 343 127.5 A 7.07 3.54 0 0 1 353 127.5 L 353 127.5 A 7.07 3.54 0 0 1 353 132.5 Z" fill="#2d3142"/><path d="M 165.51 130 A 8.49 4.24 0 0 0 168 133 L 342 220 A 8.49 4.24 0 0 0 354 220 L 528 133 A 8.49 4.24 0 0 0 530.49 130" fill="none" stroke="rgba(45,49,66,0.55)" stroke-width="0.8"/><path d="M 165.51 130 A 8.49 4.24 0 0 1 168 127 L 342 40 A 8.49 4.24 0 0 1 354 40 L 528 127 A 8.49 4.24 0 0 1 530.49 130 L 530.49 158 A 8.49 4.24 0 0 1 528 161 L 354 248 A 8.49 4.24 0 0 1 342 248 L 168 161 A 8.49 4.24 0 0 1 165.51 158 Z" fill="none" stroke="#2d3142" stroke-width="1.2" stroke-linejoin="round"/><g data-role="label"><line data-role="leader" x1="536.49" y1="144" x2="582.49" y2="144" stroke="rgba(45,49,66,0.40)" stroke-width="0.8"/><circle cx="530.49" cy="144" r="2" fill="#2d3142"/><text data-role="name" x="594.49" y="143" fill="#2d3142" font-size="16" font-weight="600" font-family="'Geist', sans-serif">Lid</text><text x="594.49" y="159" fill="#4f5d75" font-size="10" font-family="'Geist Mono', monospace" letter-spacing="0.08em">printed sleeve</text></g></g>
</g>
</svg>
</div>
</div>
</body>
</html>