First steps to textures.js

First steps to textures.js.markdown

First steps to textures.js

This is the first attempt I did before the creation of textures.js (http://riccardoscalco.github.io/textures/)

A Pen by Riccardo Scalco on CodePen.

License.

index.html

<div id="box">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

script.js

rand = () ->
  (Math.random().toString(36)+'00000000000000000')
    .replace(/[^a-z]+/g, '')
    .slice(0, 5)

texture = {
  
  lines : () ->

      width = 4
      height = 4
      strokeWidth = 1
      fill = '#000'
      stroke = 'red'
      id = rand()

      lines = () ->
          this.append('defs')
             .append('pattern')
             .attr('id', id)
             .attr('patternUnits', 'userSpaceOnUse')
             .attr('width', width)
             .attr('height', height)
             .append('path')
             .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
             .attr('stroke-width', strokeWidth)
             .attr('stroke', stroke)
             .attr("transform","rotate(0)")

      lines.width = (_) ->
          width = _
          lines

      lines.height = (_) ->
          height = _
          lines

      lines.stroke = (_) ->
          stroke = _
          lines

      lines.id = (_) ->
        if not arguments.length
          id
        else
          id = _
          lines
 
      lines.url = (_) ->
        "url(#" + lines.id() + ")"
          
      lines

}

svg = d3.select("#box")
  .append("svg")
    .attr('width', 500)
    .attr('height', 500)

t1 = texture.lines().stroke("blue")
svg.call(t1)


t2 = texture.lines().stroke("red")
svg.call(t2)

svg.append("path")
    .attr("d", "M 0 0 L 0 200 L 200 200 L 200 0 Z")
    .style({
      "fill": t1.url()
    })

svg.append("path")
    .attr("transform", "translate(250, 0)")
    .attr("d", "M 0 0 L 0 200 L 200 200 L 200 0 Z")
    .style({
      "fill": t2.url()
    })