A year at Halo, a coffee roaster: 2,400 kilos roasted, one dot per kilo. The crowd gathers into the company's own mark, refills from the middle out, squares up into honest columns, then spells out its own total. Halo's logo is not one of the 39 built-in shapes. It is eight subpaths of path data in this sample's head script, and that is all a logo has to be.
One year, four product lines, one dot per kilo roasted. Packed into a single crowd, the biggest line takes the outside and the smallest nests in the middle. Honest, and almost mute: you can see there is a lot of espresso, and very little else.
The same 2,400 dots, packed into Halo's cup. The packer scans the outline row by row and splits the dots across the rows, so the count comes out exact: no dot is added to make the shape work, and none is dropped. Cup, rim, foot, saucer and handle are five overlapping pieces that merge into one silhouette.
Same outline, filled from the middle out rather than top down,
so the biggest line lands where the coffee would actually be. One
property, order, and the colours swirl outward into
bands without a single dot leaving the mark.
A logo is a lovely liar: a cup gives every line a share of a nice silhouette, and a wisp of steam flatters a small one. Four plain columns give them a length instead. Same dots, same colours, no persuasion.
Last beat, and the dots go and spell how many of them there are.
Nothing is drawn behind them: glyphs('2,400') is a
centreline the packer fills, the same way it filled the cup.
Scroll the story, or use the beat dots and Prev/Next. Each beat is a saved view; scrolling back up reverses it.
ApexUnitShapes.shapeFrom(pathData) returns a layout, so a logo
goes straight into plotOptions.unit.positions with no
registration step and no release from us. The mark here is eight subpaths
under the default nonzero rule, which is worth understanding before you draw
anything, because it is what lets a logo be assembled in pieces:
overlapping subpaths union (cup, rim, foot, saucer and handle are five
shapes that merely overlap) and a subpath wound the other way cuts a
hole (the handle's finger hole is the same ellipse as the loop, wound
backwards). Nothing in path data reveals which way a subpath is wound, and a
backwards one still renders perfectly happily, so a mark that arrives
inverted or bored through is nearly always that. If you would rather not
think about winding at all, fillRule: 'evenodd' decides
solid-versus-hollow by nesting instead, which suits a mark whose counter sits
cleanly inside its outline: a ring, the bowl of a P, the hole in a
b. Give your shape a minUnits for the count below which it
stops being recognisable, and the chart warns instead of drawing mush. To do
this with your own mark rather than Halo's, the Logo Forge sample
takes a dropped .svg and hands back the code for it. Needs the
storyboard feature (bundles perspectives) plus the
apexcharts/unit-shapes build. The unit chart is a premium
type; without a license it renders with a trial watermark.