Grouping Layers - Don't specify the parent when creating each layer

100%

Grouping Layers - Don't specify the parent when creating each layer

✓ Published0🌍 Public

Last edited Apr 27, 2019

Created on Apr 27, 2019

This example demonstrates how to create a group of layered shapes in Sketch without specifying the parent when constructing each individual layer. It builds four ShapePath objects—a square, triangle, hexagon, and outlined oval—then assigns them to a newly created Group with the artboard as its parent. The code uses the Sketch JavaScript API via the `sketch` module, including `sketch.Artboard`, `sketch.Group`, and `sketch.ShapePath` with shape types like Triangle, Polygon, and Oval. After assembling the group, it calls `adjustToFit()` to resize the group to its contents.

AI-generated description

Similar vizzes

Loading thumbnail…

Grouping Layers - Create the Group Object First

This example demonstrates how to create a group object before populating it with shape layers, allowing them to be collected under a single named group. The script uses the Sketch JavaScript API via the `sketch` module, creating an artboard and then instantiating a `Group` with `parent: myArtboard`. Four shapes are added as children of that group—a square, a triangle, a polygon, and an oval—each using the `ShapePath` class with specific `frame` and `style` properties. After adding the shapes, the group’s `adjustToFit()` method resizes it to encompass all contained shapes. The code shows how to structure layer hierarchy in a Sketch document programmatically.

KKevinGutowski

88% match

Loading thumbnail…

Grouping Layers - Remove Parents for Each Layer

This example demonstrates how to detach shape layers from their parent artboard, re-parent them into a new group, and automatically resize the group to fit its contents. The Sketch API creates four shapes—a square, triangle, hexagon, and oval—on an artboard, then calls `layer.remove()` on each to sever their parent relationships. The shapes are subsequently added to a new `Group` via the `layers` property, and `adjustToFit()` recalculates the group’s bounding frame. The code uses `sketch.ShapePath`, `sketch.Artboard`, and `sketch.Group` to manage the layer hierarchy programmatically.

KKevinGutowski

87% match

Loading thumbnail…

Gist b3b904582eaa49475bc90dacbb6d92c9

This example demonstrates how to construct and arrange basic geometric shapes within a Sketch document using the `sketch` JavaScript API. The code programmatically creates an artboard and populates it with a square, a triangle, a hexagon, and a circle, each styled with distinct fill colors or a bordered outline. The `ShapePath` class and its `ShapeType` enumerations are the core components, with coordinates and dimensions set through `frame` objects. The rendering approach is code-driven, defining visual elements directly without external data sources, showcasing the library’s programmatic drawing capabilities.

KKevinGutowski

70% match

Loading thumbnail…

Making cool lines in Sketch

A generative drawing built with the Sketch JavaScript API draws a symmetric, web-like pattern of red lines on a black artboard. The example shows how four nested loops create a series of straight ShapePath segments, each with semi-transparent red borders, that collectively form a repeating geometric motif. It demonstrates programmatic layer creation, setting frame and style properties, and using the `adjustToFit` method to size the group. The code uses `sketch.getSelectedDocument`, `Artboard`, `Group`, and `ShapePath` to generate the composition directly within Sketch's document model.

KKevinGutowski

68% match

Loading thumbnail…

Shapes With SVG

This example demonstrates how to draw and group basic shapes using only SVG, with no external libraries or data. It shows circles and rectangles in different positions and sizes, some with individual colors and others grouped inside a `<g>` element that applies a shared blue fill and a translation transform. The code defines shapes directly in a static SVG canvas using standard elements such as `<circle>` and `<rect>`, with styling from a linked stylesheet that sets page margins and hides overflow.

KKateryna

62% match

Loading thumbnail…

Shapes with SVG

This example shows how to construct basic SVG shapes—circles, rectangles, lines, and a path—positioned in a group with a scale transform. It demonstrates styling shapes with inline attributes, a group-level fill and stroke, and a CSS class that adds stroke properties to lines and the path. The code uses raw SVG elements within an HTML document, with no JavaScript libraries or data binding, relying solely on static markup and a linked stylesheet for visual customization.

IImmaculata-Mary Muoghalu

61% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how to draw basic shapes—circles, rectangles, lines, and paths—using raw SVG elements positioned within a single grouped coordinate space. It demonstrates that SVG styling can come from presentation attributes, inline CSS properties, or a stylesheet, with the CSS file also controlling overall page layout and stroke characteristics like line joins. The code uses no JavaScript libraries; it relies solely on the SVG API and a linked CSS file to define shape appearance, including a scaled group and translated sub-groups for spatial arrangement.

Yyktan89

60% match

Loading thumbnail…

Shapes with SVG

This example shows how to compose SVG shapes—circles, rectangles, lines, and a path—into a grouped, scaled illustration using plain HTML and CSS. The code directly places SVG elements with attributes for position, size, fill, and stroke, and uses nested `<g>` elements to apply `translate` and `scale` transforms. CSS classes style the line group with purple and blue strokes, while the presentation is rendered entirely via the browser’s native SVG support, with no external JavaScript libraries.

Aadelgrosso

60% match