<div class="embed">
  <div class='example-hue-shift-rgb'></div>
</div>
/* Source (CSS modules): https://github.com/paprikka/use-rainbow-article-examples */
/* Override default CSS vars */
:root {
  --font-size: 12px;
  --ru: 1.5;
  --font-body: sans-serif;

  --page-margin: calc(2rem * var(--ru));
  --page-margin-mid: calc(3rem * var(--ru));

  --color-bg: #fff;
  --color-bg-fade: #ffffffdd;
  --color-text: #3e3e3e;
  --color-text-fade: #3e3e3e88;
  --color-link: #e00202;
}

body {
  height: 100vh;
  width: 100vw;
  padding: var(--page-margin);
}

.embed {
  display: grid;
  place-items: center;
  height: 100%;
}


.example-hue-shift-rgb {
  width: min(
    calc(80vh - var(--page-margin) * 2),
    calc(80vw - var(--page-margin) * 2)
  );
}
/* Source (preact + Typescript): https://github.com/paprikka/use-rainbow-article-examples */

Examples.mountExample(Examples.ExampleHueShiftRGB, ".example-hue-shift-rgb");
View Compiled

External CSS

  1. https://sonnet.io/js/use-rainbow/style.css?1

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.4/preact.min.js
  2. https://sonnet.io/js/use-rainbow/examples.umd.js