plotflow.github.io/product.html at main · plotflow/plotflow.github.io · GitHub

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 lang="en">
<head>
<meta charset="UTF-8" />
<!-- Google tag (gtag.js) -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    ad_storage: 'denied', ad_user_data: 'denied',
    ad_personalization: 'denied', analytics_storage: 'denied'
  });
  gtag('js', new Date());
  gtag('config', 'G-1HJ4VQ4K1B');
</script>
<script src="scripts/consent.js" defer></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Study · PLOTFLOW*</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,600&family=Noto+Sans+JP:wght@500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/tokens.css">
<link rel="stylesheet" href="styles/styles.css">
<link rel="stylesheet" href="styles/console.css">
<meta name="description" content="A machine-drawn PLOTFLOW study sheet: fan work, displayed only. Original pieces are drawn through commissions.">
<link rel="canonical" href="https://plotflow.io/product.html">
<meta name="theme-color" content="#33362b">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<meta property="og:type" content="product">
<meta property="og:site_name" content="PLOTFLOW">
<meta property="og:title" content="Study · PLOTFLOW*">
<meta property="og:description" content="A machine-drawn PLOTFLOW study sheet: fan work, displayed only. Original pieces are drawn through commissions.">
<meta property="og:url" content="https://plotflow.io/product.html">
<meta property="og:image" content="https://plotflow.io/assets/og.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Study · PLOTFLOW*">
<meta name="twitter:description" content="A machine-drawn PLOTFLOW study sheet: fan work, displayed only. Original pieces are drawn through commissions.">
<meta name="twitter:image" content="https://plotflow.io/assets/og.png">
</head>
<body>

<!-- TOP BAR -->
<nav><div class="nav-in">
  <a href="/" class="brand">PLOTFLOW<i>*</i></a>
  <div class="nav-links"><a href="/#shop">Studies</a><a href="/#process">Process</a><a href="about.html">Studio</a></div>
  <a class="cart" href="commissions.html">Commission →</a>
</div></nav>

<!-- RECORD: sheet left, record panel right -->
<section class="pfr" id="pd" hidden>
  <div class="pfr-stagewrap">
    <div class="pfr-sheet">
      <span class="bl tiny" id="pdBedlabel"></span>
      <span class="vr">STUDY SHEET · DRAWN IN EXECUTION ORDER · INK 0.30 MM</span>
      <canvas id="pdCanvas"></canvas>
      <svg id="pdSvg" preserveAspectRatio="xMidYMid meet" aria-hidden="true"><path id="pdPath" d=""></path></svg>
      <img class="pf-seal" src="assets/logo-seal.svg" alt="" width="48" height="48">
    </div>
  </div>

  <aside class="pfr-panel">
    <div class="pfr-sec">
      <div class="pfr-code" id="pdCode"></div>
      <h1 class="pfr-name" id="pdName"></h1>
      <div class="pfr-jp" id="pdJp"></div>
      <p class="pfr-lore" id="pdLore"></p>
    </div>

    <div class="pfr-sec">
      <h5>Stroke program<sup>1</sup></h5>
      <table class="pfr-tbl"><tbody id="pdProgram"></tbody></table>
    </div>

    <div class="pfr-sec">
      <h5>Pen<sup>2</sup></h5>
      <div class="pd-swatches" id="pdSwatches" role="radiogroup" aria-label="Pen color"></div>
      <div class="pfr-meta"><span id="pdInk"></span><span id="pdSize"></span></div>
    </div>

    <div class="pfr-sec">
      <p class="pfr-study"><b>Study: not for sale.</b> This sheet is a drawing study of a
      Universal-Century design; it is displayed here and is not sold. Original work,
      a machine designed for you drawn the same way, is taken on through commissions.</p>
      <a class="pd-acquire" href="commissions.html">Commission an original →</a>
    </div>

    <div class="pfr-sec pfr-fn">
      <p><sup>1</sup> Values computed from the stroke program, not estimated. Plot time
      includes pen-up travel at 6600&nbsp;mm/min and 0.10&nbsp;s per pen lift.</p>
      <p><sup>2</sup> Staedtler Triplus 0.3&nbsp;mm pigment fineliner on Strathmore 300
      Bristol, 11×14&nbsp;in. Ink laydown varies with temperature, humidity, and feed;
      no correction is applied. Each sheet is inspected, signed, and numbered.</p>
      <p>Commissioned pieces are quoted individually and ship worldwide. See
      <a href="commissions.html" style="color:var(--red)">Commissions</a>,
      <a href="shipping.html" style="color:var(--red)">Shipping</a> &amp;
      <a href="returns.html" style="color:var(--red)">Returns</a>.</p>
    </div>

    <div class="pfr-nav">
      <a href="#" id="pdPrev">← Prev record</a>
      <a href="/#shop" id="pdAll">All studies</a>
      <a href="#" id="pdNext">Next record →</a>
    </div>
  </aside>
</section>

<div class="pd-missing" id="pdMissing" hidden>
  <section class="page"><div class="wrap">
    <div class="page-head"><h1>Not found<span class="star">*</span></h1><div class="jp">作品が見つかりません</div></div>
    <div class="page-body"><p>That study isn't in the archive. <a href="/#shop">Browse the studies →</a></p></div>
  </div></section>
</div>

<footer>
  <div class="grain"></div>
  <div class="wrap">
    <img class="foot-crest" src="assets/logo-crest.svg" alt="" width="56" height="56">
    <div class="foot-cols">
      <div class="fc"><h5>Work*</h5><a href="/#shop">Studies</a><a href="commissions.html">Commissions</a></div>
      <div class="fc"><h5>Studio*</h5><a href="/#process">Process</a><a href="about.html">About</a><a href="contact.html">Contact</a></div>
      <div class="fc"><h5>Info*</h5><a href="shipping.html">Shipping</a><a href="returns.html">Returns</a><a href="faq.html">FAQ</a></div>
      <div class="fc"><h5>Elsewhere*</h5><a href="https://instagram.com/plotflow" target="_blank" rel="noopener">@plotflow</a><a href="/#droplist">Droplist</a><span class="est">est. 2026</span></div>
    </div>
    <div class="foot-bot tiny"><span>© 2026 PLOTFLOW* · PLOTTED IN THE U.S.A.</span><span>AXIDRAW · PIGMENT INK · BRISTOL</span></div>
  </div>
</footer>

<!-- data first, then components -->
<script src="data/editions.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/product.js"></script>
</body>
</html>