How We Created a Static Site That Generates Tartan Patterns in SVG

Tartan, the iconic patterned cloth synonymous with Scotland, particularly its kilts, takes center stage on tartanify.com. This site boasts a library of over 5,000 tartan patterns (in SVG and PNG formats), meticulously curated to exclude those with restrictive usage rights.

The project, conceived by Sylvain Guizard during a Scottish summer holiday, initially envisioned manual creation of the pattern library using design software like Adobe Illustrator or Sketch. However, the sheer volume of patterns (thousands!) quickly made this approach untenable. The breakthrough came with the realization that tartans possess a defined structure and are represented by simple strings encoding thread counts and color codes.

Tartan Structure and SVG Representation

Tartan's characteristic pattern arises from interwoven colored threads at right angles. Vertical and horizontal bands share identical color and width sequences. The intersections of these bands create visually blended colors. The twill weaving technique adds distinctive diagonal lines. This article recreates this effect using SVG rectangles as threads:

Let's examine this SVG structure:

<svg height="280" viewbox="0 0 280 280" width="280" x="0" xmlns="http://www.w3.org/2000/svg" y="0"><defs><mask height="1" width="1" x="0" y="0"><rect fill="url(#diagonalStripes)" height="100%" width="100%" x="0" y="0"></rect></mask></defs><g><rect fill="#FF8A00" height="40" width="100%" x="0" y="0"></rect><rect fill="#E52E71" height="10" width="100%" x="0" y="40"></rect><rect fill="#FFFFFF" height="10" width="100%" x="0" y="50"></rect><rect fill="#E52E71" height="70" width="100%" x="0" y="60"></rect><rect fill="#100E17" height="20" width="100%" x="0" y="130"></rect><rect fill="#E52E71" height="70" width="100%" x="0" y="150"></rect><rect fill="#FFFFFF" height="10" width="100%" x="0" y="220"></rect><rect fill="#E52E71" height="10" width="100%" x="0" y="230"></rect><rect fill="#FF8A00" height="40" width="100%" x="0" y="240"></rect></g><g mask="url(#grating)"><rect fill="#FF8A00" height="100%" width="40" x="0" y="0"></rect><rect fill="#E52E71" height="100%" width="10" x="40" y="0"></rect><rect fill="#FFFFFF" height="100%" width="10" x="50" y="0"></rect><rect fill="#E52E71" height="100%" width="70" x="60" y="0"></rect><rect fill="#100E17" height="100%" width="20" x="130" y="0"></rect><rect fill="#E52E71" height="100%" width="70" x="150" y="0"></rect><rect fill="#FFFFFF" height="100%" width="10" x="220" y="0"></rect><rect fill="#E52E71" height="100%" width="10" x="230" y="0"></rect><rect fill="#FF8A00" height="100%" width="40" x="240" y="0"></rect></g></svg>

The horizontal and vertical stripe groups create identical squares, but the vertical one is masked, revealing only the white areas where the horizontal and vertical threads intersect. A patterned mask, reflecting the weaving, is achieved by defining a pattern tile:

The patternUnits attribute is changed from objectBoundingBox to userSpaceOnUse, specifying width and height in pixels.

<svg height="0" width="0"><defs><pattern height="8" patternunits="userSpaceOnUse" width="8" x="0" y="0"><polygon fill="white" points="0,4 0,8 8,0 4,0"></polygon><polygon fill="white" points="4,8 8,8 8,4"></polygon></pattern></defs></svg>

Automating Tartan Generation with React

The manual SVG approach is automated using React. The SvgDefs component generates the <defs></defs> markup:

const SvgDefs = () => {
  return (
    <defs><pattern height="8" patternunits="userSpaceOnUse" width="8" x="0" y="0"><polygon fill="#ffffff" points="0,4 0,8 8,0 4,0"></polygon><polygon fill="#ffffff" points="4,8 8,8 8,4"></polygon></pattern><mask height="1" width="1" x="0" y="0"><rect fill="url(#diagonalStripes)" height="100%" width="100%" x="0" y="0"></rect></mask></defs>
  )
}

A tartan is represented as a stripe array. Each stripe is an object with fill (hex color) and size properties:

const tartan = [
  { fill: "#FF8A00", size: 40 },
  // ... more stripes
];

Tartan data often comes as "Palette" and "Threadcount" strings:

<code>// Palette
O#FF8A00 P#E52E71 W#FFFFFF K#100E17

// Threadcount
O/40 P10 W10 P70 K/10.</code>

(The conversion of these strings to the stripes array is detailed in a separate Gist.)

The SvgTile component generates the SVG structure from the tartan array:

const SvgTile = ({ tartan }) => {
  // ... (code to calculate stripe positions and total size) ...
  return (
    <svg height="{size}" viewbox="{`0" width="{size}" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
      <svgdefs></svgdefs>
      {/* ... (code to generate rect elements for horizontal and vertical stripes) ... */}
    </svg>
  )
}

Using SVG Tartans as Background Images

On tartanify.com, each tartan is a full-screen background image. This requires encoding the SVG as a data URI:

.bg-element {
  background-image: url('data:image/svg xml;charset=utf-8,<svg>...</svg>');
}

The SvgBg component creates a full-screen div with the encoded SVG as its background:

const SvgBg = ({ tartan }) => {
  const tartanStr = ReactDOMServer.renderToStaticMarkup(<svgtile tartan="{tartan}"></svgtile>);
  const tartanData = encodeURIComponent(tartanStr);
  return (
    <div style="{{" backgroundimage: xml width: height:></div>
  );
};

Downloadable SVG and PNG Tartans

The SvgDownloadLink component allows SVG downloads:

const SvgDownloadLink = ({ svgData, fileName = "file" }) => {
  return (
    <a download="{`${fileName}.svg`}" href="%7B%60data:image/svg" xml>Download as SVG</a>
  );
};

The PngDownloadLink component generates high-resolution PNGs using a canvas:

const PngDownloadLink = ({ svgData, width, height, fileName = "file" }) => {
  // ... (code to create canvas, draw SVG, and get data URL) ...
  return (
    <a download="{`${fileName}.png`}" ref="{aEl}">Download as PNG</a>
  );
};

Gatsby for Static Site Generation

Tartanify.com leverages Gatsby, a React-based static site generator. The gatsby-config.js file includes plugins for processing CSV data:

// gatsby-config.js
module.exports = {
  /* ... */
  plugins: [
    'gatsby-transformer-csv',
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/data`,
        name: 'data',
      },
    },
  ],
};

The gatsby-node.js file uses Gatsby's Node APIs to create pages for each tartan and paginated letter-based index pages, handling slug generation and pagination. The tartan templates (tartan.js) and index templates (tartans.js) utilize the React components created earlier. Navigation between paginated index pages is managed by the TartansNavigation component.

This detailed explanation covers the core aspects of the tartanify.com project. The complete code is available on GitHub. This project showcases a fun and effective way to learn new technologies through a compelling side project.

The above is the detailed content of How We Created a Static Site That Generates Tartan Patterns in SVG. For more information, please follow other related articles on the PHP Chinese website!