Outlined shapes

Shapes styletype: "shape"

Stroke-only rendering with a transparent fill for a light linework look — stroke color and width set on every API call. Create outlined shapes free.

Edit it — this is the actual editor panel

Design JSON — “Outlined” variant

{
  "title": "Shape sample",
  "description": "A dynamic star shape",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-shape",
      "key": "star",
      "type": "shape",
      "position": {
        "x": 290,
        "y": 100
      },
      "rotation": 0,
      "size": {
        "width": 220,
        "height": 220
      },
      "dynamic": true,
      "properties": {
        "path": "M 50 5 L 61 38 L 95 38 L 68 59 L 79 92 L 50 70 L 21 92 L 32 59 L 5 38 L 39 38 Z",
        "viewBox": "0 0 100 100",
        "fillColor": "transparent",
        "strokeColor": "#F5A623",
        "strokeWidth": 4,
        "opacity": 1
      }
    }
  ]
}

Shapes examples

Real renders of the outlined shapes — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Line-art background motif

A pale slate star outline used as a quiet decorative motif behind imagined card content.

API overrides for this example

{
  "star.fillColor": "transparent",
  "star.strokeColor": "#94A3B8",
  "star.strokeWidth": 3
}

Neon outline on dark

A cyan neon-style star outline that pops as the accent of a near-black event poster.

API overrides for this example

{
  "star.fillColor": "transparent",
  "star.strokeColor": "#22D3EE",
  "star.strokeWidth": 5
}

When to use the outlined style

Line-art decorative elements
Subtle background motifs
Minimalist icon accents

Use it dynamically via the API

Recolor per render with '<key>.fillColor' (or just '<key>'); strokeColor, strokeWidth and even the path are overridable.

Full API request with this variant's current values — the playground above sends only the properties you change

curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "star.path": "M 50 5 L 61 38 L 95 38 L 68 59 L 79 92 L 50 70 L 21 92 L 32 59 L 5 38 L 39 38 Z",
    "star.viewBox": "0 0 100 100",
    "star.fillColor": "transparent",
    "star.strokeColor": "#F5A623",
    "star.strokeWidth": 4,
    "star.opacity": 1
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other shapes styles

Default Heart ArrowOutlined

See the shapes component page for the full property reference and FAQs.