Mark

A person or a place: their picture, or up to two letters on a colour that comes from the name.

  • kit.mark()
  • 199 B of CSS · 2 rules
  • kit.css
  • No script needed

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.mark({ name: 'Ana Lima' })
    + kit.mark({ name: 'Night owls' })
    + kit.mark({ name: 'Pike Place', square: true })
    + kit.mark({ name: 'kai', size: 48 });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<script src="https://openvibe.network/shared/kit.js"></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.mark({ name: 'Ana Lima' })
      + OpenVibeKit.mark({ name: 'Night owls' })
      + OpenVibeKit.mark({ name: 'Pike Place', square: true })
      + OpenVibeKit.mark({ name: 'kai', size: 48 });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 324 B
<span class="ovk-mark" style="--ovk-hue:181" aria-hidden="true">AL</span><span class="ovk-mark" style="--ovk-hue:151" aria-hidden="true">NO</span><span class="ovk-mark ovk-mark--square" style="--ovk-hue:130" aria-hidden="true">PP</span><span class="ovk-mark" style="--ovk-mark:48px;--ovk-hue:99" aria-hidden="true">KA</span>

What it weighs

Its own rules are 389 B, 199 B as sent: 1% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.