Svg Textures

By Zoran Ravic

Plain color backgrounds are boring, add some texture to them!


Add it to your project:
npm i svg-textures

Lines

svgRectPatternLine()
svgRectPatternLine({
  size: 10
})
svgRectPatternLine({
  orientation: 'vertical'
})
svgRectPatternLine({
  background: '#333',
  stroke: '#EB613D'
})
svgRectPattern({
  content: [
    line({ orientation: '2/8' }),
    line({ orientation: '6/8' }),
  ]
})
svgRectPatternLine({
  strokeWidth: 5
})
svgRectPatternLine({
  size: 40
})
svgRectPatternLine({
  orientation: '3/8'
})
svgRectPatternLine({
  orientation: 'horizontal',
  strokeWidth: 7,
})
svgRectPatternLine({
  strokeWidth: 1
})
svgRectPatternLine({
  size: 40,
  strokeWidth: 25
})
svgRectPattern({
  content: [
    line({ orientation: '3/8' }),
    line({ orientation: '7/8' }),
  ]
})
svgRectPattern({
  content: [
    line({ orientation: 'vertical' }),
    line({ orientation: 'horizontal' }),
  ]
})

All examples are live demos and can be edited in real time.

Go ahead and try changing the color or size in an example.

Examples use the default browser text editor which is very limited but should suffice.

Circles

svgRectPatternCircle()
svgRectPatternCircle({
  size: 10,
  radius: 1
})
svgRectPatternCircleComplement({
  size: 50,
  radius: 25,
  fill: 'rgba(0,0,0,.13)'
})
svgRectPatternCircle({
  radius: 4,
})
svgRectPatternCircle({
  size: 40
})
svgRectPatternCircle({
  radius: 4,
  fill: 'transparent',
  stroke: '#333',
})
svgRectPatternCircle({
  radius: 1,
})
svgRectPatternCircleComplement()
svgRectPatternCircleComplement({
  background: '#282828',
  stroke: 'black'
})

All functions return Virtual Elements.

You can convert them to a string or generate the HTML & SVG Elements in the browser.

They can also be used in React apps.

Paths

svgRectPatternPath({
  path: 'squares',
})
svgRectPatternPath({
  path: 'crosses'
})
svgRectPatternPath({
  size: 40,
  path: 'nylon'
})
svgRectPatternPath({
  path: 'woven'
})
svgRectPatternPath({
  path: 'waves'
})
svgRectPatternPath({
  path: 'caps'
})

You can use the generated patterns as backgrounds for your svg elements.

This makes it especially handly for data visualization.

Complex patterns

svgRect(
  hexagonPattern()
)
svgRect(
  squarePattern({
    fill: '#CCC',
    background: '#FFF'
  })
)
svgRect(
  squarePattern()
)
svgRect(
  diagonalSquarePattern({
    size: 40,
    fill: '#444',
    background: '#FFF'
  })
)
svgRect(
  diagonalSquarePattern()
)
svgRect(
  cubePattern({
    size: 50
  })
)

The project is written in TypeScript and uses the VElement library.

Please support the project by giving it a star on GitHub.

Gradients

svgRect(
  diagonalGradient(
    [ '#F19', '#0CF' ]
  )
)
svgRect(
  verticalGradient(
    [ '#F19', '#0CF' ]
  ),
  patternLine({
    strokeWidth: 13,
  })
)
svgRect(
  diagonalGradient(
    [ '#F19', '#0CF' ]
  ),
  patternLine({
    strokeWidth: 13,
  })
)
svgRect(
  horizontalGradient(
    [ '#F19', '#0CF' ]
  ),
  patternLine({
    strokeWidth: 13,
  })
)
svgRect(
  rdiagonalGradient(
    [ '#F19', '#0CF' ]
    ),
    patternLine({
      strokeWidth: 13,
    })
)
svgRect(
  diagonalGradient(
    [ '#F19', '#0CF' ]
  ),
  cubePattern({
    size: 50
  })
)