Making cool lines in Sketch

100%

Making cool lines in Sketch

✓ Published0🌍 Public

Last edited Apr 28, 2019

Created on Apr 28, 2019

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.

AI-generated description

Similar vizzes

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

79% match

Loading thumbnail…

Sketch Global colors to Layers

This example demonstrates how to extract the global color palette from Sketch’s asset library and render each color as a square swatch on the selected page. It iterates through the document’s color assets, converts each color from its native color space to a hexadecimal string, and creates a new `ShapePath` for every swatch, positioning them in a horizontal row. The script uses the Sketch JavaScript API, specifically `MSPersistentAssetCollection`, `ShapePath`, and `Rectangle`, with custom helper functions for RGB-to-hex conversion.

KKevinGutowski

70% match

Loading thumbnail…

Art

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

Aaidarshafeev1@gmail.com

68% match

Loading thumbnail…

Shapes with SVG and CSS

This example uses SVG and CSS to construct a grid of basic geometric shapes—circles and rectangles—in various colors, with a portion of the shapes offset and colored blue using a translated group. A pair of black lines and a path with a blue stroke and round line joins are rendered from hardcoded coordinates. The shapes are scaled by a factor of 1.5, and styling is applied via the CSS class `.lines` in the linked stylesheet, demonstrating how inline attributes and external style rules combine within an SVG canvas.

CCarloWK1202

68% match

Loading thumbnail…

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

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.

KKevinGutowski

68% match

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

67% match

Loading thumbnail…

Shapes with SVG AND CSS

This example shows how to combine inline SVG shape elements with CSS styling to create a static composition of circles, rectangles, lines, and paths. The graphic renders a simple geometric scene with default black shapes, a colored group with red and green fills, a blue group with black strokes, and a separate line and path group. The code uses raw SVG markup with attributes like `transform`, `fill`, and `stroke`, while the CSS file styles the `.lines` class and its child path. All rendering is done through standard browser SVG support.

Rryankinsey1

67% match

Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes demonstrates how presentation can be controlled through inline attributes and external CSS. Circles, rectangles, and a polyline are drawn with default black fills, then customized with explicit fill colors, stroke widths, and a translated group using a light blue fill. A separate line and path, grouped under a class `lines`, receive black strokes and rounded joints via stylesheet rules. The example uses raw SVG elements within an HTML document, styled by a linked `styles.css` file, with no JavaScript or data binding involved.

GGiant316

67% match