A sparkline for Framer: a compact trend line sized to sit beside a number, drawn as inline SVG with no charting library.
Give it one comma separated list of values. It draws linear or smooth, and the smooth curve is monotone, so it never overshoots into a dip your data does not have.
Area fill with a gradient fade, high and low markers, a last point dot with a pulse, and a baseline at zero or at the first value. The delta pill reads the change from first to last as a percent with an arrow, and takes its own colour for a rise and for a fall. Hovering shows a crosshair and a readout.
It scales to any frame because it draws to a viewBox rather than to pixels.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
A sparkline for Framer: a compact trend line sized to sit beside a number, drawn as inline SVG with no charting library.
Give it one comma separated list of values. It draws linear or smooth, and the smooth curve is monotone, so it never overshoots into a dip your data does not have.
Area fill with a gradient fade, high and low markers, a last point dot with a pulse, and a baseline at zero or at the first value. The delta pill reads the change from first to last as a percent with an arrow, and takes its own colour for a rise and for a fall. Hovering shows a crosshair and a readout.
It scales to any frame because it draws to a viewBox rather than to pixels.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
