Cover Icons

BookNest's grid needs a small cover per title until real cover art arrives (Canvas 2D and Image Generation APIs). Each uses the whole section: a currentColor fill set by one color per book, one shared sheen gradient, a stitched-spine pattern, and a mask that punches the genre glyph from Building the BookNest Icon Set out of a white badge.

Six cover icons from one color per book, a shared sheen, a pattern and masksHTMLLive

<svg id="covers" width="600" height="122" font-family="Georgia" font-size="11">
  <linearGradient id="sheen" x2="1" y2="1">
    <stop offset="0" stop-color="#fff" stop-opacity=".35"/>
    <stop offset=".5" stop-color="#fff" stop-opacity="0"/>
    <stop offset="1" stop-color="#000" stop-opacity=".3"/></linearGradient>
  <pattern id="stitch" width="4" height="4" patternUnits="userSpaceOnUse">
    <path d="M0 1h4" stroke="#000" stroke-opacity=".35"/></pattern>
</svg>
<script>
  const glyphs = ['M9 21 10.5 8h3L15 21ZM9.5 8h5V6L12 4 9.5 6ZM3 6l4 1M21 6l-4 1M4 21h16',
    'M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16',
    'M4 11h16v2a7 7 0 0 1-7 7h-2a7 7 0 0 1-7-7ZM2 11h20M9 7q1.5-2 0-4M15 7q1.5-2 0-4',
    'M2 20 9 7l4 7 2-3 7 9Z', 'M20 13a8 8 0 1 1-16 0 8 8 0 1 1 16 0ZM12 9v4l3 2M10 2h4M12 2v3',
    'M5 19C5 10 11 4 20 4c0 9-5 15-15 15ZM5 19l8-8'];
  const colors = ['#1f5f8b', '#5b3f99', '#e09a10', '#3f7d3a', '#b5452f', '#2a9d8f'];
  const titles = ['Quiet Harbor', 'Deep Web', 'Salt & Saffron', 'Big Summits', 'Clockmaker',
    'Gardens'];
  glyphs.forEach((glyph, i) => covers.insertAdjacentHTML('beforeend', `
    <g color="${colors[i]}" transform="translate(${10 + i * 98} 5)">
      <rect width="80" height="112" rx="4" fill="currentColor"/>
      <rect width="80" height="112" rx="4" fill="url(#sheen)"/>
      <rect width="8" height="112" fill="url(#stitch)"/>
      <mask id="glyph${i}"><circle cx="44" cy="44" r="26" fill="#fff"/>
        <path d="${glyph}" transform="translate(26 26) scale(1.5)" fill="none" stroke="#000"
              stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></mask>
      <circle cx="44" cy="44" r="26" fill="#fff" mask="url(#glyph${i})"/>
      <text x="44" y="96" text-anchor="middle" fill="#fff">${titles[i]}</text></g>`));
</script>

Browser output of 20

Nothing in the cover markup names a color except the color on its group; the sheen's white and black stops at partial opacity work over any base, so six books need one gradient instead of six. In the mask, white keeps the badge and the black glyph strokes cut it away, which is how icon badges and "knockout" text are made. The covers are saved as booknest-covers.html; Canvas 2D's canvas cover designer meets the same ideas as fillStyle, createLinearGradient() and compositing.

MENU