Gist b3b904582eaa49475bc90dacbb6d92c9

100%

Gist b3b904582eaa49475bc90dacbb6d92c9

✓ Published0🌍 Public

Last edited May 2, 2019

Created on May 2, 2019

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.

AI-generated description

Similar vizzes

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

79% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes with SVG and style them using CSS. It uses raw SVG elements like `circle`, `rect`, `line`, and `path` within a `<g>` container, with CSS classes controlling stroke and fill properties. The code shows shape attributes set inline (e.g., `fill`, `stroke-width`) and via a stylesheet, including a group with translated coordinates and another with a rounded path. No JavaScript or external libraries are involved; the visualization relies entirely on static SVG markup and a linked `styles.css` file.

Aariashary

74% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes

74% match

Loading thumbnail…

Shapes

This example displays a set of basic SVG shapes—a circle, rectangle, line, and grouped shapes—positioned on a 900×500 canvas. It demonstrates how SVG primitives are styled with CSS and inline attributes, including fill colors, stroke properties, and transformations via a `<g>` element. The code uses plain HTML, CSS, and JavaScript, with SVG rendered directly in the browser. It shows how grouping elements and applying stroke, fill, and transform attributes affect the visual output.

DDavid Downie

73% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes, including circles, rectangles, lines, and a path, rendered directly within an HTML page. It shows how SVG coordinates originate from the top-left corner, and how a `g` group element applies shared styling attributes like fill and stroke to its children. The code uses raw SVG markup, along with CSS for page styling and a small JavaScript snippet that logs a message to the browser’s console. The shapes are positioned using absolute pixel coordinates within a 960×500 viewport.

Ssravaniboggaram

73% match

Loading thumbnail…

Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—grouped and transformed within a fixed 960×500 viewport. It shows how presentation attributes like `fill`, `stroke`, and `stroke-width`, along with CSS rules targeting the `.lines` class, style the geometry. The code uses native SVG elements and the `transform` attribute for scaling, translation, and grouping, with no external JavaScript libraries. Static data is hardcoded directly in the markup, and rendering relies entirely on the browser’s SVG support.

AAtrayeeDeb

72% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and external CSS classes. The code shows how fill colors can be set via hex, RGB, or named values, and how CSS rules like `.lines` apply stroke properties. It uses plain SVG markup without D3 dependencies, though the README notes the project can load D3 via UNPKG and supports ES6 module imports. The rendering approach uses a transformed `<g>` element to scale and position all shapes.

Gginnyching

72% match

Loading thumbnail…

Shapes with CSS + SVG

This example demonstrates basic geometric shapes rendered with SVG, comparing their default styling, explicit fill attributes, and inherited presentation properties. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path` within a `<g>` container that applies a scale and translation transformation. CSS, via `styles.css`, defines a monospaced body font and strokes for the line group, including a rounded line join on the path. The code shows how shape attributes and CSS rules interact to control color, stroke width, and the overall visual appearance.

AAditya Kumar

72% match