made with 🍩 by civet-labs
A tiny badge for the bottom of a page — a play on “made with ❤️ by …”, except the heart is a different emoji every time the page loads. One script tag, no dependencies, no tracking.
Click the emoji itself to roll another one.
Drop it in
Put this wherever you want the badge to appear — it renders in place of the script tag.
<script src="https://civet-labs.com/badge.js" async></script>Pill variant, mounted into a container
<div id="site-badge"></div>
<script src="https://civet-labs.com/badge.js"
data-target="#site-badge"
data-style="pill"
data-theme="auto" async></script>No external script
Self-contained, works with a strict CSP, and degrades to a plain emoji if JavaScript is off.
<span id="made-with">made with 🎲 by <a href="https://civet-labs.com">civet-labs</a></span>
<script>
(function () {
var pool = ['🍩','🐊','🦖','🛸','🌀','🔥','🧪','🪄','🧨','🎲','🦑','🍕','☕','🤖','👾','🦆','🪐','⚡','🐙','🍄'];
var el = document.getElementById('made-with');
el.firstChild.nodeValue = 'made with ' + pool[Math.floor(Math.random() * pool.length)] + ' by ';
})();
</script>Options
Every option is a data- attribute on the script tag.
| Attribute | Default | What it does |
|---|---|---|
data-target | — | CSS selector to mount into. Without it, the badge replaces the script tag's position. |
data-style | text | text for bare text, pill for a bordered pill. |
data-theme | auto | auto, light, or dark. Auto follows the visitor's system setting. |
data-size | 0.875rem | Any CSS length. |
data-emojis | built-in pool | Your own pool, e.g. data-emojis="🐊,🍩,🛸". |
data-emoji | — | Pin one emoji on load. Clicking still rolls from the pool. |
data-interval | 0 | Milliseconds between automatic rerolls. 0 means only on load and on click. |
data-text | made with | Leading text. |
data-by | by | The joining word. |
data-name | civet-labs | Link text. |
data-href | https://civet-labs.com | Link target. |
data-auto | true | Set to false to skip auto-mounting and call the API yourself. |
The badge renders inside a shadow root, so the host page's CSS can't reach in and
the badge's CSS can't leak out. Restyle it with custom properties on the wrapper —
--civet-fg, --civet-bg, --civet-border, --civet-size,
--civet-font (set it to inherit to pick up your page's typeface),
--civet-link, --civet-link-hover.
Scripting it
With data-auto="false", or from your own bundle:
CivetBadge.render('#footer', { style: 'pill', emojis: '🐊🍩🛸' });
CivetBadge.roll(); // just the emoji, as a string
CivetBadge.emojis; // the built-in pool
CivetBadge.create({ ... }); // an element, for you to placeThe pool
80 emoji, sampled fresh on every load. A repeat of the previous load is skipped, so a reload always looks like something happened.