Bodygraph rendering API

GET/api/chart/bodygraph.svgPro

Render a complete Human Design bodygraph as SVG or PNG. The image carries activated gates, defined channels, defined centers, gate numbers, and the Design and Personality planet columns.

Try it in the playground

Every parameter on this page is a live control in the Visual Rendering studio: pick a palette, move the columns, change the arrow style, round the centers, and watch the chart update instantly on a sample chart before you spend a request.

Bodygraph, THD palette
default
Bodygraph in custom colors
your colors

Request bodygraph.svg for markup you can style, or bodygraph.png for a finished image. Both take the same birth data and the same parameters.

The SVG includes stable ids and data-* attributes on every gate, center, and connector for CSS styling and interactivity. The PNG is rasterized at the requested width for environments that do not render SVG (chat apps, email, PDFs).

Request

Birth inputs match every Human Design endpoint. Query string on GET, JSON body on POST. When a parameter is sent both ways, the query string wins.

Birth inputs
birthDate reqstringDate of birth (YYYY-MM-DD)
birthTime reqstringTime of birth (HH:MM, 24-hour format)
birthLocation stringBirth city (e.g. "New York, NY"). Required unless latitude + longitude are given.
latitude numberLatitude. Provide with longitude instead of birthLocation.
longitude numberLongitude. Provide with latitude.
curl "https://api.totalhumandesign.com/api/chart/bodygraph.svg?birthDate=1990-06-15&birthTime=14:30&birthLocation=New%20York,%20NY" \
-H "Authorization: Bearer YOUR_API_KEY" \
-o bodygraph.svg

Customize the render

Every parameter below is optional and works on both formats, on the query string or in the JSON body. A parameter that fails validation returns a 400 whose param field names it.

Test parameters using the sample chart. It requires no key, bills nothing, and uses the exact renderer:

no key neededbash
curl "https://api.totalhumandesign.com/api/chart/bodygraph/sample.svg?theme=classic&arrowStyle=line&centerRadius=12" \
-o sample.svg

The playground puts every parameter behind a live control.

Customize the render
ParameterType / valuesDefaultDescription
themethd | classicthdthd is the Total Human Design palette; classic is the traditional Human Design colouring.
showall | personality | designallDraw both sides, only the Personality (conscious) side, or only the Design (unconscious) side.
columnstrue | falsetrueDesign column on the left and Personality column on the right: planet marker plus gate.line, nothing else.
columnRulestrue | falsetrueThe hairline under each planet row and the underline beneath the column headings.
labelstrue | falsetrueShow or hide the 64 gate-number pills.
variablestrue | falsetrueShow the four PHS Variable arrows: Environment and Digestion on the Design side, Perspective and Motivation on the Personality side. Direction comes from the chart.
arrowStylechevron | triangle | outline | linechevronShape of the four Variable arrows: the chevron, a solid triangle, an outlined chevron, or a thin line arrow.
glyphssymbols | abbrsymbolsAstronomical symbols (☉ ☽ ☿ …) or two-letter abbreviations (Su Mo Me …) in the columns.
fontsans | serif | monosansBundled face for all text: DejaVu Sans, DejaVu Serif, or DejaVu Sans Mono. The same face is used for SVG and PNG.
personalityColorhex (#RRGGBB)—Conscious activations (and wheel points).
designColorhex (#RRGGBB)—Unconscious activations (and the wheel ring).
centerColorhex (#RRGGBB)—One fill for every defined centre (replaces the per-centre palette).
openCenterColorhex (#RRGGBB)—Fill for undefined centres.
channelColorhex (#RRGGBB)—Fill for channels with no activation.
strokeColorhex (#RRGGBB)—Centre and channel outlines (wheel cusp lines).
pillColorhex (#RRGGBB)—Background of an active gate number.
pillTextColorhex (#RRGGBB)—Number colour inside an active pill.
textColorhex (#RRGGBB)—Inactive gate numbers and column text.
backgroundhex (#RRGGBB) or transparent—Hex colour or "transparent". SVG defaults to transparent; PNG defaults to white.
widthinteger 200–2048 px—PNG only. Integer between 200 and 2048; omitted renders the natural size.
centerRadiusinteger 0–14 px0Rounds the corners of the nine centers. 0 keeps the original drawing.
scalenumber 0.25–4 (1 = 100%)1Multiplies the exported image's pixel size (1× is 1452 × 1310 with columns). The drawing is identical at every size. On a PNG, an explicit width wins.
columnGapinteger 0–150 px22How far the planet columns sit from the chart. The image width stays the same; the columns move.
columnOffsetYinteger -600–600 px0Moves both columns up (negative) or down (positive) from their default position.
columnSpacinginteger 16–160 px52Distance between two planet rows in a column.
columnScalenumber 0.8–1.6 (1 = 100%)1Sizes the planet markers, gate numbers, and column headings.
varScalenumber 0.6–1.6 (1 = 100%)1Sizes the four Variable arrows.
varXinteger -200–200 px0Moves the arrows away from the chart (positive) or toward it (negative).
varYinteger -300–300 px0Moves the four arrows up (negative) or down (positive) from their default position.
Bodygraph without planet columns
?columns=false
Bodygraph, Design activations only
?show=design
Bodygraph with serif type and abbreviated planet markers
?font=serif&glyphs=abbr
Bodygraph with the planet columns moved and enlarged
?columnGap=110&columnOffsetY=-60&columnScale=1.2
Bodygraph with line-style variable arrows and rounded centers
?arrowStyle=line&centerRadius=12
Bodygraph with rounded centers and no row lines
?centerRadius=14&columnRules=false

scale multiplies the exported image's pixel size (1× is 1452 × 1310 with columns); the drawing is identical at every size, and for PNGs an explicit width wins. The image frame never changes with the layout parameters — they move things inside it. columnGap sets how far the Design and Personality columns sit from the chart, columnOffsetY shifts them up or down, columnSpacing sets the distance between rows, columnScale sizes the markers and numbers, and columnRules toggles the hairlines under each row.

The four Variable arrows are drawn from the chart's real orientations with their color and tone numbers. variables hides them, arrowStyle picks the shape (chevron, triangle, outline, line), and varScale, varX, and varY size and move them. centerRadius (0–14) rounds the corners of the nine centers.

Response

The SVG is returned as image/svg+xml and the PNG as image/png. Both include a 24-hour cache header for CDN caching.

Every gate, center, and connector carries a stable id and data-* attributes. Inline the SVG to style it with CSS:

/* Recolor one gate */
#Gate34 { fill: #6b4eff; }

/* Thicken the outline on every defined center */
[data-defined="true"] { stroke-width: 3; }

/* Dim every gate rendered as open */
[data-state="open"] { opacity: 0.35; }

Attach mouseenter or click listeners to [data-gate] or [data-center] elements for interactivity.

Embed in the chart response

Add ?include=bodygraph to /api/chart to embed the SVG in the data.bodygraph field. Combine it with tooltips: ?include=tooltips,bodygraph. Every render parameter applies.

{
"success": true,
"data": {
  "type": "Generator",
  "profile": "2/4",
  "...": "...",
  "bodygraph": {
    "format": "svg",
    "contentType": "image/svg+xml",
    "width": 1272,
    "height": 1310,
    "svg": "<svg ...>...</svg>"
  }
}
}

A render costs 1 Chart request. An embedded render adds 1 to the base call, so /api/chart?include=bodygraph costs 2. Request images from your backend and serve the bytes to users.