Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

about

Declaratively generate Vera Molnár inspired images using the CSS Paint API.

setup

Download from GitHub directly:

# Add to package.json
npm install thewhodidthis/cell

usage

Load JS first,

// Load worklet
if ("paintWorklet" in CSS) {
  CSS.paintWorklet.addModule("cell.js").catch(console.log)
}

Then in CSS for example,

@supports (background: paint(_)) {
  :host {
    background: whitesmoke;
    border: 0.20625rem solid transparent;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
  }

  div {
    --cell-fill-style: transparent;

    background-image: paint(quad), paint(quad), paint(quad), paint(quad), paint(quad), paint(quad);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%, 88%, 76%, 64%, 52%, 40%;
    margin: -0.4125rem;
  }

  div:nth-child(2n + 1) {
    background-size: 100%, 88%, 64%, 52%, 24%, 12%;
  }

  div:nth-child(3n + 2) {
    background-size: 100%, 88%, 76%, 0, 52%, 40%;
  }

  div:nth-child(5n + 3) {
    background-size: 100%, 88%, 76%, 64%, 40%, 12%;
  }
}

see also

About

Paint worklet for quad and arc based patterns

Resources

License

Releases

No releases published

Packages

No packages published