Nondeterministic Polynomial Munchies

    houdini-decorative-barcharts

    0.1.2 • Public • Published

    Preview of generated bar charts, in shades of purple, blue, and seafoam with various numbers of bars

    CSS Houdini Decorative Bar Charts

    From Stephanie Eckles @5t3ph - author of ModernCSS.dev.

    Generate dynamic decorative/placeholder bar charts using CSS Houdini. Intended to be an alternate to SVG icons or less flexible CSS gradient solutions.

    The worklet will create randomized bar heights and compute bar widths and gap sizes relative to the number of bars requested vs. the width of the element. Since worklets update when the element is repainted, these values will resize alongside the element. The seed value ensures consistent results across repaints (prevents "flashing" effect on resize).

    Important: Do not use these as a substitute for real bar charts because they will not provide any information to non-sighted or keyboard users unless you separately create text alternatives to describe the information. Plus, they are random which means you will not be able to match real data.

    How to Use

    While Houdini paint worklets have the best support out of available Houdini features, they still currently require a polyfill to ensure they are applied cross browser.

    So, first include the following once in your project.

    <script src="https://unpkg.com/css-paint-polyfill"></script>

    Note: The polyfill will not work if the worklet is applied to pseudo elements.

    Then, include the paint worklet script after the polyfill is loaded:

    <script>
      CSS.paintWorklet.addModule("https://unpkg.com/houdini-decorative-barcharts");
    
      // Trickery to get the polyfill to draw the charts in Firefox and Safari
      setTimeout(() => {
        document.querySelector("ANCESTOR_ELEMENT").style.width = "100.01%";
        document.querySelector("ANCESTOR_ELEMENT").style.width = "100%";
      }, 500);
    </script>

    Finally, use it in your styles! For best results, assign as the background-image to a dedicated element to control the size used for the bar chart.

    .barchart-element {
      /* Number of bars */
      --barchart-number: 5;
      /* Chart seed number - ensures chart variance */
      --barchart-seed: 22382;
      /* Option 1: Provide a CSS color */
      --barchart-color: purple;
      /* Option 2: Provide gradient start and end colors for a "to bottom" gradient */
      --barchart-start-color: hsl(260, 85%, 65%);
      --barchart-end-color: hsl(260, 85%, 35%);
    
      /* Use the worklet! */
      background: paint(houdiniBarCharts);
    }

    What is CSS Houdini?

    Check out other Houdini paint worklets and more info at Houdini.How.

    Install

    npm i houdini-decorative-barcharts

    DownloadsWeekly Downloads

    15

    Version

    0.1.2

    License

    ISC

    Unpacked Size

    5.8 kB

    Total Files

    3

    Last publish

    Collaborators

    • 5t3ph