{"id":15423178,"url":"https://github.com/5t3ph/houdini-decorative-barcharts","last_synced_at":"2026-02-07T01:31:29.326Z","repository":{"id":57266883,"uuid":"408878985","full_name":"5t3ph/houdini-decorative-barcharts","owner":"5t3ph","description":null,"archived":false,"fork":false,"pushed_at":"2021-09-24T03:13:15.000Z","size":132,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-09T08:16:19.532Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/5t3ph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-21T15:42:10.000Z","updated_at":"2025-03-16T21:16:32.000Z","dependencies_parsed_at":"2022-08-25T03:41:16.546Z","dependency_job_id":null,"html_url":"https://github.com/5t3ph/houdini-decorative-barcharts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"5t3ph/11ty-css-houdini","purl":"pkg:github/5t3ph/houdini-decorative-barcharts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fhoudini-decorative-barcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fhoudini-decorative-barcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fhoudini-decorative-barcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fhoudini-decorative-barcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5t3ph","download_url":"https://codeload.github.com/5t3ph/houdini-decorative-barcharts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Fhoudini-decorative-barcharts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29183952,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T00:44:15.062Z","status":"ssl_error","status_checked_at":"2026-02-07T00:35:01.758Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T17:40:40.642Z","updated_at":"2026-02-07T01:31:29.310Z","avatar_url":"https://github.com/5t3ph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Preview of generated bar charts, in shades of purple, blue, and seafoam with various numbers of bars](https://repository-images.githubusercontent.com/408878985/2b66d282-faf7-4609-bbc1-93040e3a02c1)\n\n# CSS Houdini Decorative Bar Charts\n\n\u003e From Stephanie Eckles [@5t3ph](https://twitter.com/5t3ph) - author of [ModernCSS.dev](https://moderncss.dev).\n\nGenerate dynamic _decorative/placeholder_ bar charts using CSS Houdini. Intended to be an alternate to SVG icons or less flexible CSS gradient solutions.\n\nThe 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).\n\n- [**Preview on CodePen**](https://codepen.io/5t3ph/pen/jOwKGPZ)\n- [View in a demo application](https://lwj-modcss.netlify.app/)\n\n**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.\n\n## How to Use\n\nWhile 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.\n\nSo, first include the following once in your project.\n\n```html\n\u003cscript src=\"https://unpkg.com/css-paint-polyfill\"\u003e\u003c/script\u003e\n```\n\n\u003e Note: The polyfill will not work if the worklet is applied to pseudo elements.\n\nThen, include the paint worklet script _after_ the polyfill is loaded:\n\n```html\n\u003cscript\u003e\n  CSS.paintWorklet.addModule(\"https://unpkg.com/houdini-decorative-barcharts\");\n\n  // Trickery to get the polyfill to draw the charts in Firefox and Safari\n  setTimeout(() =\u003e {\n    document.querySelector(\"ANCESTOR_ELEMENT\").style.width = \"100.01%\";\n    document.querySelector(\"ANCESTOR_ELEMENT\").style.width = \"100%\";\n  }, 500);\n\u003c/script\u003e\n```\n\nFinally, 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.\n\n```css\n.barchart-element {\n  /* Number of bars */\n  --barchart-number: 5;\n  /* Chart seed number - ensures chart variance */\n  --barchart-seed: 22382;\n  /* Option 1: Provide a CSS color */\n  --barchart-color: purple;\n  /* Option 2: Provide gradient start and end colors for a \"to bottom\" gradient */\n  --barchart-start-color: hsl(260, 85%, 65%);\n  --barchart-end-color: hsl(260, 85%, 35%);\n\n  /* Use the worklet! */\n  background: paint(houdiniBarCharts);\n}\n```\n\n## What is CSS Houdini?\n\nCheck out other Houdini paint worklets and more info at [Houdini.How](https://houdini.how).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Fhoudini-decorative-barcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5t3ph%2Fhoudini-decorative-barcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Fhoudini-decorative-barcharts/lists"}