Draw guides with circles and straight lines, choose which enclosed regions to paint, and get a flat logo
Hand the spec below to a model as it is, append a description of the logo you want, and paste the JSON that comes back into the box above. The whole spec is here.
You write logos and icons in the "circle and line logo format" (LogoMark Spec v1).
Reply with JSON in this format only (no prose, no code fences).
# The idea
1) Draw guides with circles and infinite straight lines (circles / lines).
2) Choose which of the regions they cut out should be painted (fills), using set operations.
3) Only the painted faces become the logo. The guides themselves are never drawn.
# Shape of the document
{
"version": 1,
"view": { "size": 100, "background": "#f2f0e9" },
"guide": { "color": "#b9b2a2", "width": 0.4 },
"circles": [ { "id": "c1", "cx": 50, "cy": 50, "r": 30 } ],
"lines": [ { "id": "l1", "x1": 0, "y1": 60, "x2": 100, "y2": 60 } ],
"fills": [ { "in": ["c1"], "out": [], "side": { "l1": "left" }, "color": "#2b2b26" } ]
}
- view.size is the side of the square canvas (16 to 4000, default 100). All coordinates live inside it.
- view.background is the background colour. Use "none" for a transparent background.
- guide is the colour and width of the construction lines in draft view. It never appears in the logo.
- A circle has an id, a centre (cx, cy) and a radius (r). A line has an id and two points it passes
through; it is an infinite line, not a segment.
- An id starts with a letter and is at most 24 letters, digits, hyphens or underscores. Ids must be
unique across circles and lines.
- Up to 400 circles, 400 lines and 200 fills.
# What a fill means
{ "in": ["c1","c2"], "out": ["c3"], "side": { "l1": "left" }, "color": "#2b2b26" }
= paint where the point is inside c1 and inside c2 and on the left of l1, but outside c3.
- in and out take circle ids only. Lines are handled by side.
- side maps a line id to "left" or "right": the side you see on your left when walking from
(x1,y1) towards (x2,y2). For the line (0,60) to (100,60) that means "left" is the upper part
(smaller y).
- Any of in, out and side may be omitted, but not all three at once (no region would be defined).
- color is the paint colour and opacity is 0 to 1 (both optional).
- Fills stack in order; a later fill covers an earlier one.
# Building shapes
- A union is written as several fills. One fill can only express intersection and subtraction.
- Crescent: a big circle in, a slightly offset circle out.
- Leaf or lens: two circles together in in.
- Triangle or polygon: three or more line sides inside one fill.
- Holes and knockouts: paint with the background colour, or remove with out.
- When chaining circles into one mass, make each circle overlap its neighbour, or a gap appears.
# Rules
- Always compute the coordinates and write concrete numbers. No expressions, no variables.
- Three decimals are plenty. Arcs, Bezier curves, polygons, text and images are not available.
- For a symmetric mark, put the centre x at view.size / 2 and mirror the coordinates.
# Example (crescent)
{"version":1,"view":{"size":100,"background":"#f2f0e9"},
"circles":[{"id":"moon","cx":50,"cy":50,"r":34},{"id":"cut","cx":64,"cy":40,"r":31}],
"lines":[],
"fills":[{"in":["moon"],"out":["cut"],"color":"#2b2b26"}]}
Now write the following logo in this format.
Logo:
| Where | Key | Meaning |
|---|---|---|
| top level | version | Spec version, currently 1. Another value raises a notice and the tool draws what it can. |
| view | size / background | Side of the square canvas (16 to 4000, default 100) and the background colour. none means no background. |
| guide | color / width | Colour and width of the construction lines in draft view. Never shown in logo view. |
| circles[] | id / cx / cy / r | Name, centre and radius of a circle. r must be greater than 0. |
| lines[] | id / x1 / y1 / x2 / y2 | Name of a line and two points it passes through. Treated as an infinite line, not a segment. |
| fills[] | in | Inside all of these circles. An array of circle ids. |
| fills[] | out | Outside all of these circles (inside none of them). An array of circle ids. |
| fills[] | side | Line id to left / right: which side of the line, seen along the direction of its two points. |
| fills[] | color / opacity | Paint colour and opacity (0 to 1). The colour defaults to #2b2b26. |
There is no instruction that draws a stroke. Circles and lines exist only to cut the plane into regions, and the output is the set of faces you selected in fills. When you want something line-shaped, build a thin region from two slightly offset circles or two nearly parallel lines and paint that.
For a line, left is the side on your left hand as you walk from x1,y1 towards x2,y2. The screen y axis points down, so the sign of the cross product is the opposite of the usual maths convention, but what you see still matches "left of the direction of travel". For example {"x1":0,"y1":60,"x2":100,"y2":60} runs to the right, so left is the upper part. Writing the same line backwards swaps the two sides. When in doubt, switch to draft view and compare left against right.
One entry in fills can only say "and" (intersection) and "except" (subtraction). To merge two circles into a single mass, write {"in":["a"]} and {"in":["b"]} as two entries. The cloud sample is three circles and one line: one fill per circle, each also required to be above the same line. To dent one of those faces instead, add out to that entry alone.
When you line circles up and cut their bottom with a line, any crossing point that sits above the cut lifts the outline there and leaves a notch. In the cloud sample the crossings are at about y 72 and the cut is at 71, so the bottom comes out as one straight edge. Enlarging the circles, lowering the line, or moving the circles closer all fix it. Draft view shows exactly where the crossings are.
A share link carries the construction itself in ?d=. The first character is the method: z is deflate-raw compressed, u is uncompressed. The rest is base64url, so nothing breaks inside a URL. The drawing is never stored on a server, so it only reaches the people you send the link to, and losing the link loses the drawing.
A circle is a centre and a radius; a line is two points. With so few numbers, the construction stays readable. Because you paint regions cut out by those guides, every edge of the finished mark is either an arc or a straight segment, so it survives scaling and flattening to one colour. Moving a single guide updates every face that touches it.
Yes. Intersections are nested clipPath elements and subtractions are a mask, so the file is pure vector with no raster image inside. It stays sharp at any size, and you can recolour it later by editing the fill attributes. The PNG is rasterised on the spot by the browser canvas.
Draft view shows every circle and line as a thin guide and lays the painted faces over them faintly, so you can check which guide produces which face. Logo view draws the painted faces only and hides the guides. The switch changes the drawing alone, and both states can be exported as SVG and PNG.