Transforms and the Logo

transform takes translate(tx ty), scale(sx sy), rotate(angle cx cy) (clockwise degrees about cx,cy), skewX(a), skewY(a) and matrix(a b c d e f), mapping a point to (*a*x + *c*y + e, *b*x + *d*y + f). The list works like nested coordinate systems: in translate(552 120) scale(0.33) the shape is scaled first and then moved, so the move is not shrunk. CSS transform works on SVG too; set transform-box: fill-box so that transform-origin: center means the shape's own center.

BookNest's mark is six spines fanned in a nest, each a thick line rotated about one point below it. In catalog order the six colors belong to the six books, from blue The Quiet Harbor to teal Gardens in Glass, and later chapters reuse them. Spine lengths follow page counts.

The BookNest logo: six rotated spines, a nest and a wordmarkHTMLLive

<svg width="540" height="171" viewBox="20 0 600 190">
  <g id="mark">
    <g stroke-width="22">  <!-- spine length = pages / 4 + 30, fanned about (120, 240) -->
      <path d="M120 150 V42" stroke="#1f5f8b" transform="rotate(-25 120 240)"/>
      <path d="M120 150 V13" stroke="#5b3f99" transform="rotate(-15 120 240)"/>
      <path d="M120 150 V56" stroke="#e09a10" transform="rotate(-5 120 240)"/>
      <path d="M120 150 V70" stroke="#3f7d3a" transform="rotate(5 120 240)"/>
      <path d="M120 150 V34" stroke="#b5452f" transform="rotate(15 120 240)"/>
      <path d="M120 150 V76" stroke="#2a9d8f" transform="rotate(25 120 240)"/>
    </g>
    <path d="M36 118 Q120 142 204 118 Q196 182 120 184 Q44 182 36 118 Z" fill="#263238"/>
    <path d="M50 138 Q120 156 190 138 M62 158 Q120 172 178 158" fill="none" stroke="#fff3e0"
          stroke-width="3" stroke-linecap="round"/>
  </g>
  <text x="225" y="140" font-family="Georgia, serif" font-size="60" font-weight="bold"
        fill="#263238">Book<tspan fill="#1f5f8b">Nest</tspan></text>
  <use href="#mark" transform="translate(552 120) scale(0.33)"/>
</svg>

Browser output of 9

A pivot 90 units below the bases spreads the tops while the bases crowd together under the nest, which is drawn last and so on top. The small copy reuses the mark through <use> (<use>) at a third of the size, the favicon test every logo should pass. The file is kept as booknest-logo.svg for the rest of the chapter.

MENU