+Advance +Images +Mix
Comparison · pie + bar createComparisonChart — pie + bar panels both use legends / legend at top-right for consistent scanning; shared appearance and generalTitle. Takeaway: One wide export, apexify.js API only.
+Advance +Images +Mix
Comparison canvas · donut vs line Side-by-side comparison layout. createComparisonChart renders a donut (pie) panel next to a line chart under one shared appearance—gradient base, grid patternBg, and noiseBg so both plots feel like one surface. Takeaway: Shows layout: 'sideBySide' with mixed chart kinds and matching chrome; ideal for before/after or metric-vs-trend storytelling.
+Extras +Mix
Conic drift — streaming GIF encoder Streaming GIF pipeline. createGIF uses onStart to yield { buffer, duration }[] frames—no scratch PNG directory—while the scene animates gradientBg and rotating conic bgLayers. Takeaway: Encoder-friendly loops for docs and landing spots that need motion without shipping video.
+Mix
CRT Ghost — phosphor haze CRT-era atmosphere, fully procedural. Warm radial glows, a rotated dot patternBg, and stronger noiseBg emulate phosphor and scan vibes—no textures shipped. Takeaway: Pairs well with devtools, terminals, or retro-future UI framing where you want mood without photography.
+Mix
Depth Field — stacked light Depth without bitmaps. A dark gradientBg base, two luminous bgLayers blended with screen and soft-light, grain folded into the stack, then a closing noiseBg pass. Takeaway: Demonstrates how layered gradients read as physical light rather than a flat poster—good for hero strips and product chrome.
+Advance +Images
Donut chart · patterned chart canvas Donut chart on the dedicated pie pipeline. Built with createChart('pie', …, { type: 'donut' }) using a radial appearance.backgroundGradient, layered bgLayers, dot patternBg, and noiseBg—the same stacking model as canvas backgrounds in the docs. Takeaway: One place to learn how themed chart panels stay coherent with hero backgrounds, without image assets.
+Advance +Images +Text
Executive deck slide (chart + layout) 1920×1080 slide composed entirely in ApexPainter. Line chart with area fill via createChart, full-bleed createCanvas gradients and hex patternBg, glassy panels from createImage rectangles, embedded chart buffer, then typography via createText with measured bullet columns. Takeaway: Mirrors a programmatic slide workflow — export PNG locally when you extend the layout.
+Mix
Hex Stage — lattice + neon rim Stage-lit frame on a hex lattice. Radial void, cyan patternBg hex mesh, then stroke.gradient plus tinted shadow sell rim lighting around the card. Takeaway: High-energy hero backdrop when you need structure and glow without stock imagery.
+Advance +Images
Line · all styles & markers One createChart('line', …) panel showcasing LineStyle (solid, dashed, dotted, dashdot, longdash, shortdash, dashdotdot, step, stepline) with smoothness (none, bezier, spline) and mixed marker types. Corner legend (top-right) uses wrapText / maxWidth (Apexify 5.3.16+ legend layout). Takeaway: Reference sheet for line aesthetics + readable wrapped legend.
+Advance +Images
Line · areas, markers, regression Multi-series line with area, mixed lineStyle, correlation (linear fit), framed appearance, grid, and top-right legend (wrapText). Takeaway: Dense panel with brighter **axes.*.labelColor and axes.*.color** so ticks stay readable on dark chrome.
+Advance +Images
Line chart · dual series & markers Two line series—smooth bezier strokes, circle vs square markers, dashed “plan” track, and top-right legend. Takeaway: Shows how lineStyle and per-series marker configs read together on a dark appearance field.
+Advance +Images
Pie · connected legend legends.connected draws leader lines from legend rows into slices—distinct from legends.standard on pie charts. Takeaway: Uses createChart('pie', …) from apexify.js only; preview PNG matches this config.
+Mix
Pipeline · framed slab (crosses + stroke + shadow) One exportable card: linear gradientBg, patternBg crosses, noiseBg, rounded clip borderRadius, rim stroke, drop shadow. Takeaway: Matches the “hero slab” pattern—chrome happens after the fill stack, still inside createCanvas.
+Mix
Pipeline · gradientBg + preset grid + crosses Classic stack: gradientBg as the opaque base, presetPattern grid inside bgLayers, top patternBg crosses, light noiseBg. Takeaway: Shows how presetPattern (layer stack) differs from patternBg (single overlay pass after layers).
+Mix
Pipeline · transparentBase + gradient layer Skip the default #000 base with transparentBase: true, then paint bgLayers[0] as a linear gradient—same stack order as the library: base → bgLayers → patternBg → noiseBg. Takeaway: Useful for PNG alpha or compositing; avoids a black flash under the first layer.
+Extras +Mix
Pulse bloom — PNG frames → MP4 Video via raw frame buffers. createVideo plus createFromFrames feeds FFmpeg the same way as the spin MP4 demo, animating radial endRadius and a rotating patternBg. Takeaway: Requires FFmpeg on the machine where you encode the MP4; ideal when you need smoother playback than GIF allows.
+Extras +Mix
Spin wheel — animated GIF GIF export from painted frames. Builds each frame with ApexPainter (wheel slices + motion), then createGIF with outputFormat set to buffer-friendly output. Takeaway: Offline render writes to public/gallery-outputs/gifs/spin-wheel.gif; palette quantization may lean on FFmpeg internally depending on your environment.
+Extras +Mix
Spin wheel — MP4 video MP4 from sequential buffers. Same spin artwork encoded with createVideo and createFromFrames so FFmpeg stitches timed frames without hand-exporting PNGs. Takeaway: Output lands at public/gallery-outputs/videos/spin-wheel.mp4; ffmpeg must be on PATH when you encode locally.
+Advance +Images
Bar · grouped + axis legend type: 'grouped' with legend (show, entries, styling) and bars.groupSpacing / segmentSpacing. Takeaway: Multi-segment columns with a top-right legend panel—apexify.js only.
+Advance +Images
Bar · lollipop type: 'lollipop' over interval bars—bars.lineWidth and dotSize tuned for crisp PNG export. Takeaway: Same axes / legend story as filled bars, lighter geometry.
+Advance +Images
Bar · waterfall type: 'waterfall' with waterfall.initialValue plus signed steps and legend.entries derived from the same rows. Takeaway: P&L-style deltas on the shared slate appearance.
+Mix
Crossweave noir · crosses pattern Fine cross hatch over indigo depth. Linear gradientBg, patternBg crosses with dual ink colors, noiseBg, rim stroke, and lift shadow. Takeaway: Alternative to dots/grid when you want textile-like structure—still zero external bitmaps.
+Mix
Crystal fog — waves + heavy grain Frosted drift + grain. Cool diagonal gradientBg, icy radial bgLayers with blend mode lighter, patternBg waves, aggressive noiseBg, and a tinted shadow skirt. Takeaway: Mimics frosted glass lighting for premium SaaS heroes—still one canvas export.
+Advance +Images
Horizontal bar · route throughput createChart('horizontalBar') with labelColor / valueColor on each row plus **axes.*.labelColor, axes.*.color, and labels.barLabelDefaults / valueLabelDefaults so category names, numerics, and values stay legible on dark panels. Takeaway: Use explicit light ink whenever appearance.backgroundColor** is deep navy—defaults alone can resolve to near-black.
+Advance +Images
Horizontal bar · stacked createChart('horizontalBar', …, { type: 'stacked' }) with stacked values per category. Takeaway: top-right legend keeps callouts clear of category labels.
+Mix
Molten core — conic ember field Molten halo composition. Radial inferno gradientBg, ember conic ring via bgLayers, warm patternBg dots, and a stroke.gradient rim. Takeaway: Punchy hero energy while staying entirely vector-driven—great when marketing wants heat without photography.
+Mix
Pipeline · colorBg + stripes preset Solid colorBg + presetPattern stripes (screen blend) and grain. Takeaway: stripes respects secondaryColor for alternating bands—good for low-noise texture over flat ink.
+Mix
Pipeline · presetPattern dots (multiply) bgLayers can carry presetPattern (built-ins share the same vocabulary as patternBg). Here gradient + dots with blendMode: 'multiply', then noiseBg. Takeaway: Layer-local blendMode tints the slab without changing the whole canvas composite.
+Mix
Solstice Silk — conic over sunset Dual gradient personalities in one pass. A warm linear-band gradientBg carries the mood while a conic sweep in bgLayers acts as a focused highlight. Takeaway: Useful when you want directional warmth plus a controlled hotspot—conic as garnish, not the entire field.
+Mix
Tideglass — waves on teal Calm editorial surf. Cool linear gradientBg, a restrained radial bloom in bgLayers, and patternBg waves with soft-light blending hint at motion. Takeaway: Maritime calm for landing sections—everything stays inside createCanvas, zero bitmap dependencies.
+Advance +Images
Typography plaque · gradient logotype No charts—pure type. Radial createCanvas plate plus createText headline using gradient fill, stroke, and shadow, with a caption line. Takeaway: Useful when showcasing branding strips or exportable badges beside heavier demos.
+Advance +Text +Mix
Vector collage · stars & gradients Vector collage from pure drawing APIs. Starts with createCanvas and patternBg.hexagons, then createImage stacks rectangle (gradient fill), circle, triangle, and star geometry with explicit inner/outer radius. Takeaway: Finishes with createText using gradient fills and stroke for poster-style lettering—useful when you need crisp PNG output without design tools.