Showcase

1# Authored on a 297 x 420 mm grid, then uniformly scaled to a 16 cm page.2import { photo, icon } from "./components/materials.lay"3import { card } from "./components/card.lay"4 5scale = 160 / 2976page = canvas(name="LayMesh layout atlas", size=(16 cm, 420 mm * scale), background="#ffffff")7artboard = group()8artboard.add(rect(size=(297 mm, 420 mm), fill="#ffffff"), target=artboard.top_left)9font_family = "DejaVu Sans"10ink = "#213047"11muted = "#66768b"12teal = "#087f8c"13gold = "#e4a63a"14 15function title(value) {16  return text(content=value, font_family=font_family, font_size=12 pt, color=ink)17}18function note(value) {19  return text(content=value, font_family=font_family, font_size=8 pt, color=muted)20}21 22artboard.add(text(spans=[span("Lay", color=teal), span("Mesh", color=ink),23                     span("  /  LAYOUT ATLAS", color=muted)],24              font_family=font_family, font_size=25 pt),25         target=artboard.top_left, offset=(12 mm, 8 mm))26artboard.add(note("One canvas  /  reusable media  /  nested groups  /  vector geometry  /  fusion"),27         target=artboard.top_left, offset=(12 mm, 27 mm))28artboard.add(rect(size=(273 mm, 1.2 mm),29              fill=linear_gradient(start=(0, 0), end=(1, 0),30                                   stops=[(0, teal), (0.52, "#6cc9be"), (1, gold)])),31         target=artboard.top_left, offset=(12 mm, 40 mm))32 33# Reusing one panel definition also exercises script arithmetic and drawing order.34panel = rect(size=(132 mm, 105 mm), border_radius=3 mm,35             fill="#f8fafc", border_color="#dce5ec", border_width=0.28 mm)36for row in range(3) {37  artboard.add(panel, target=artboard.top_left, offset=(12 mm, 50 mm + row * 114 mm))38  artboard.add(panel, target=artboard.top_left, offset=(153 mm, 50 mm + row * 114 mm))39}40 41artboard.add(title("01  MEDIA + REUSE"), target=artboard.top_left, offset=(17 mm, 55 mm))42artboard.add(title("02  SHAPES + PAINT"), target=artboard.top_left, offset=(158 mm, 55 mm))43artboard.add(title("03  PATHS + TYPE"), target=artboard.top_left, offset=(17 mm, 169 mm))44artboard.add(title("04  OUTLINE SYSTEM"), target=artboard.top_left, offset=(158 mm, 169 mm))45artboard.add(title("05  NESTED + SCRIPT"), target=artboard.top_left, offset=(17 mm, 283 mm))46artboard.add(title("06  FUSION + INSTANCES"), target=artboard.top_left, offset=(158 mm, 283 mm))47 48# 01: Imported PNG and SVG assets; two independent instances share one image.49first_photo = artboard.add(photo,size=(66 mm, auto), target=artboard.top_left, offset=(17 mm, 76 mm))50artboard.add(rect(size=(66 mm, 33 mm), fill="none", border_color="#ffffff", border_width=0.6 mm),51         target=first_photo.top_left)52second_photo = artboard.add(photo,size=(43 mm, auto), crop=box(offset=(0.5, 0), size=(0.5, 1)),53                        target=artboard.top_left, offset=(92 mm, 76 mm))54artboard.add(rect(size=(43 mm, 43 mm), fill="none", border_color="#ffffff", border_width=0.6 mm),55         target=second_photo.top_left)56artboard.add(note("one source / two crops"), target=artboard.top_left, offset=(17 mm, 119 mm))57artboard.add(icon,size=(9 mm, auto), target=artboard.top_left, offset=(17 mm, 134 mm))58artboard.add(note("SVG component asset"), target=artboard.top_left, offset=(30 mm, 137 mm))59 60# 02: Multiple built-in shapes, two gradient types, and editable paths.61sunset = linear_gradient(start=(0, 0), end=(1, 1),62                         stops=[(0, "#ffe2a8"), (0.54, "#ff9e72"), (1, "#b85587")])63lagoon = radial_gradient(center=(0.32, 0.26), radius=0.9,64                         stops=[(0, "#d2fff5"), (1, teal)])65artboard.add(rect(size=(49 mm, 34 mm), border_radius=7 mm, fill=sunset,66              border_color="#b85587", border_width=0.4 mm),67         target=artboard.top_left, offset=(158 mm, 78 mm))68artboard.add(ellipse(size=(34 mm, 34 mm), fill=lagoon),69         target=artboard.top_left, offset=(214 mm, 78 mm))70artboard.add(ring(outer_radius=16 mm, inner_radius=8 mm, fill="#f5c75b",71              border_color="#ab7526", border_width=0.45 mm),72         target=artboard.top_left, offset=(252 mm, 79 mm))73artboard.add(star(points=7, outer_radius=9 mm, inner_radius=4.5 mm,74              fill="#e8b14b", border_color="#8e6425", border_width=0.35 mm),75         target=artboard.top_left, offset=(159 mm, 121 mm))76artboard.add(sector(radius=10 mm, start=-45 deg, end=225 deg, fill="#8cd6ca"),77         target=artboard.top_left, offset=(188 mm, 120 mm))78artboard.add(polygon(points=[(0 mm, 12 mm), (7 mm, 0 mm), (20 mm, 3 mm),79                         (24 mm, 14 mm), (10 mm, 18 mm)],80                 fill="#a68acb", border_color="#655484", border_width=0.35 mm),81         target=artboard.top_left, offset=(218 mm, 120 mm))82artboard.add(arc(radius=10 mm, start=-25 deg, end=240 deg,83             line_color=teal, line_width=1.4 mm, line_cap=round),84         target=artboard.top_left, offset=(254 mm, 119 mm))85artboard.add(note("rect     ellipse      ring      star   sector   polygon   arc"),86         target=artboard.top_left, offset=(158 mm, 145 mm))87 88# 03: Cubic, quadratic and elliptical curves; even-odd fill and colored spans.89artboard.add(path(commands=[move_to(0 mm, 19 mm),90                        cubic_to(12 mm, -7 mm, 30 mm, -7 mm, 44 mm, 19 mm),91                        quad_to(22 mm, 32 mm, 0 mm, 19 mm), close()],92              fill=sunset, border_color="#9d5075", border_width=0.55 mm),93         target=artboard.top_left, offset=(18 mm, 192 mm))94artboard.add(path(commands=[move_to(0 mm, 0 mm), line_to(35 mm, 0 mm),95                        line_to(35 mm, 35 mm), line_to(0 mm, 35 mm), close(),96                        move_to(9 mm, 9 mm), line_to(26 mm, 9 mm),97                        line_to(26 mm, 26 mm), line_to(9 mm, 26 mm), close()],98              fill_rule=evenodd, fill=lagoon, border_color=teal, border_width=0.45 mm),99         target=artboard.top_left, offset=(86 mm, 191 mm))100artboard.add(text(spans=[span("COLOR ", color=teal), span("IN ONE ", color="#b85587"),101                     span("LINE", color=gold)], font_family=font_family, font_size=15 pt),102         target=artboard.top_left, offset=(18 mm, 235 mm))103artboard.add(path(commands=[move_to(0 mm, 7 mm), quad_to(18 mm, -5 mm, 36 mm, 7 mm),104                        arc_to(8 mm, 8 mm, 0 deg, false, true, 58 mm, 7 mm)],105              fill="none", border_color="#66768b", border_width=0.7 mm,106              border_dash=[3 mm, 1.4 mm], border_cap=round),107         target=artboard.top_left, offset=(18 mm, 243 mm))108artboard.add(note("Bezier curves / compound hole / selectable text"),109         target=artboard.top_left, offset=(18 mm, 260 mm))110 111# 04: Fill and outline are independent. Named presets can be reused.112 113 114 115artboard.add(rect(size=(29 mm, 21 mm), border_radius=3 mm, fill="#ddf4ef", border_color=teal, border_width=1.7 mm, border_style= solid),116         target=artboard.top_left, offset=(161 mm, 193 mm))117artboard.add(rect(size=(29 mm, 21 mm), border_radius=3 mm, fill="#ddf4ef", border_color=teal, border_width=1.7 mm, border_style=double),118         target=artboard.top_left, offset=(200 mm, 193 mm))119artboard.add(rect(size=(29 mm, 21 mm), border_radius=3 mm, fill="#ddf4ef", border_color=teal, border_width=1.7 mm, border_style=triple),120         target=artboard.top_left, offset=(239 mm, 193 mm))121artboard.add(note("SINGLE"), target=artboard.top_left, offset=(162 mm, 218 mm))122artboard.add(note("DOUBLE"), target=artboard.top_left, offset=(201 mm, 218 mm))123artboard.add(note("TRIPLE"), target=artboard.top_left, offset=(240 mm, 218 mm))124artboard.add(rect(size=(29 mm, 17 mm), fill="#fff2dc"),125         target=artboard.top_left, offset=(161 mm, 235 mm))126artboard.add(rect(size=(29 mm, 17 mm), fill="#fff2dc"),127         target=artboard.top_left, offset=(200 mm, 235 mm))128artboard.add(rect(size=(29 mm, 17 mm), fill="#fff2dc"),129         target=artboard.top_left, offset=(239 mm, 235 mm))130artboard.add(note("DOT"), target=artboard.top_left, offset=(162 mm, 256 mm))131artboard.add(note("DASH DOT"), target=artboard.top_left, offset=(201 mm, 256 mm))132artboard.add(note("CUSTOM"), target=artboard.top_left, offset=(240 mm, 256 mm))133 134# 05: A component imported through another module, repeated by a loop.135for index in range(3) {136  tile_width = 30 mm137  if index == 1 { tile_width = 34 mm }138  tile = card("Card " + str(index + 1), width=tile_width)139  artboard.add(tile, target=artboard.top_left, offset=(18 mm + index * 39 mm, 305 mm))140}141inner = group()142foundation = inner.add(rect(size=(26 mm, 18 mm), border_radius=3 mm,143                            fill="#d8efe9", border_color=teal, border_width=1.7 mm, border_style= solid), target=inner.top_left)144inner.add(ellipse(size=(10 mm, 10 mm), fill=gold),145          anchor=center, target=foundation.center)146outer = group()147placed_inner = outer.add(inner, target=outer.top_left)148follower = outer.add(rect(size=(32 mm, 15 mm), border_radius=3 mm,149                          fill="#f8e9cb", border_color="#c48a34", border_width=0.5 mm),150                     target=placed_inner.bottom_right, offset=(5 mm, -8 mm))151outer.add(note("B at A corner"), anchor=center, target=follower.center)152artboard.add(outer, target=artboard.top_left, offset=(18 mm, 343 mm), rotation=-3 deg)153artboard.add(note("A + B / anchored"), target=artboard.top_left, offset=(91 mm, 355 mm))154artboard.add(note("local anchors / rotation / module assets"),155         target=artboard.top_left, offset=(18 mm, 375 mm))156 157# 06: Unfused overlay above, then two copies of one fused group.158artboard.add(note("OVERLAY"), target=artboard.top_left, offset=(160 mm, 304 mm))159artboard.add(note("FUSED"), target=artboard.top_left, offset=(224 mm, 304 mm))160block = rect(size=(15 mm, 13 mm), fill=teal)161artboard.add(block, target=artboard.top_left, offset=(161 mm, 317 mm))162artboard.add(line(dx=24 mm, dy=0 mm, line_color=teal, line_width=2 mm),163         target=artboard.top_left, offset=(174 mm, 323.5 mm))164left = artboard.add(block, target=artboard.top_left, offset=(222 mm, 317 mm))165stem = artboard.add(line(dx=24 mm, dy=0 mm, line_width=2 mm),166                target=artboard.top_left, offset=(243 mm, 323.5 mm))167joint = artboard.fuse(left, stem, points=(left.middle_right, stem.start),168                  bridge_width=2 mm, junction=round, radius=1.2 mm,169                  fill=teal, border_color="none")170artboard.add(note("two instances become one path"),171         target=joint.bottom_left, offset=(0 mm, 6 mm))172 173connector = group()174base = connector.add(rect(size=(12 mm, 10 mm), fill="#7b65a9"),175                     target=connector.top_left)176arm = connector.add(line(dx=22 mm, dy=5 mm, line_width=1.4 mm),177                    target=connector.top_left, offset=(18 mm, 5 mm))178connector.fuse(base, arm, points=(base.middle_right, arm.start),179               bridge_width=1.4 mm, junction=bevel, fill="#7b65a9")180artboard.add(connector, target=artboard.top_left, offset=(164 mm, 351 mm))181artboard.add(connector, target=artboard.top_left, offset=(225 mm, 351 mm),182         rotation=12 deg, opacity=0.8)183artboard.add(note("same fused component / two transforms"),184         target=artboard.top_left, offset=(164 mm, 376 mm))185 186artboard.add(note("LAYMESH  /  SVG + PDF + PNG  /  16 cm WIDE"),187         target=artboard.top_left, offset=(12 mm, 401 mm))188artboard.add(note("01 - 06  /  all geometry stays editable in .lay"),189         target=artboard.top_left, offset=(187 mm, 401 mm))190 191# Scale the complete editable design into the physical export page.192page.add(artboard,size=(16 cm, 420 mm * scale), target=page.top_left)

1import { photo, icon, gap, accent } from "./materials.lay"2 3## @lang zh-CN4## 创建带有标题和图标的可复用照片卡片。5## @param {string} label - 标题，可包含行内公式。6## @param {length} width - 照片宽度；显式单位固定其物理尺寸。7## @returns {group} 带有测量边界和定位锚点的可复用卡片。8## @example9## item = card("结果", width=34mm)10## @lang en11## Build a reusable photo card with a caption and icon.12## @param {string} label - Caption, including optional inline mathematics.13## @param {length} width - Photo width; an explicit unit fixes its physical size.14## @returns {group} A reusable card with measured bounds and placement anchors.15## @example16## item = card("Result", width=34mm)17export function card(label, width=34 mm) {18  picture = group()19  picture.add(photo,size=(width, auto), target=picture.top_left)20 21  caption = group()22  title = text(content=label, font_family="DejaVu Sans", font_size=9 pt, color=accent)23  caption.add(title, target=caption.top_left)24  caption.add(icon,size=(7 mm, auto), target=caption.top_left, offset=(0 mm, 6 mm))25 26  content = group()27  placed = content.add(picture, target=content.top_left)28  content.add(caption, target=placed.bottom_left, offset=(0 mm, gap))29  return content30}

1# Paths belong to this module, even when another module imports these values.2## Reusable photograph shared by card components.3## @type {image}4export photo = image(src="../assets/photo.png")5## Reusable vector icon for card captions.6## @type {image}7export icon = image(src="../assets/icon.svg")8## Physical spacing between the photograph and its caption.9## @type {length}10export gap = 3 mm11## @lang zh-CN12## 标题默认强调色。13## @type {color}14## @lang en15## Default caption accent color.16## @type {color}17export accent = "#087f8c"