Ring circle

Circle styletype: "circle"

A transparent circle with a thick border — avatar frames and focus accents — with the ring color set on every API call. Create ring visuals for free.

Edit it — this is the actual editor panel

Design JSON — “Ring” variant

{
  "title": "Circle sample",
  "description": "A dynamic colored circle",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-circle",
      "key": "badge",
      "type": "circle",
      "position": {
        "x": 300,
        "y": 110
      },
      "rotation": 0,
      "size": {
        "width": 200,
        "height": 200
      },
      "dynamic": true,
      "properties": {
        "fillColor": "transparent",
        "opacity": 1,
        "borderWidth": 10,
        "borderColor": "#4F46E5",
        "borderStyle": "solid"
      }
    }
  ]
}

Circle examples

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

Gold avatar frame

An amber ring sized to frame an imagined profile photo on a speaker announcement card.

API overrides for this example

{
  "badge.fillColor": "transparent",
  "badge.borderWidth": 8,
  "badge.borderColor": "#F59E0B",
  "badge.borderStyle": "solid"
}

Focus ring on dark

A cyan highlight ring drawing the eye to an imagined feature screenshot on a dark canvas.

API overrides for this example

{
  "badge.fillColor": "transparent",
  "badge.borderWidth": 6,
  "badge.borderColor": "#22D3EE",
  "badge.borderStyle": "solid"
}

When to use the ring style

Avatar frames on profile cards
Highlight rings around key content
Decorative brand accents

Use it dynamically via the API

Recolor per render with '<key>.fillColor' (or just '<key>'); opacity and borderColor are overridable too.

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 '{
    "badge.fillColor": "transparent",
    "badge.opacity": 1,
    "badge.borderWidth": 10,
    "badge.borderColor": "#4F46E5",
    "badge.borderStyle": "solid"
}'

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

Other circle styles

DefaultRingDot

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