Last active
September 4, 2016 14:16
-
-
Save kylehotchkiss/4eb4b53c5f055ed1ad994647a2d05bcf to your computer and use it in GitHub Desktop.
I wanted http://riccardoscalco.github.io/textures/ for React/SVG maps without D3 or having to react their library. Here's a hack. (React protip: generate these once outside the app lifecycle and pass them in as params - these calculations are a little slow so don't do it on every update)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var textures = require('textures'); | |
modules.export = function( texture ) { | |
if ( typeof texture === 'function' ) { | |
var svg = { | |
def: {}, | |
append: function( value ) { | |
return this; | |
}, | |
attr: function( param, value ) { | |
this.def[ param ] = value; | |
return this; | |
}, | |
params: function() { | |
return this.def; | |
} | |
}; | |
return texture.params(); | |
} | |
return null; | |
}; | |
/* | |
Example: | |
var texturesProxy = require('./textures.js'); | |
var t = textures.lines().thicker(); | |
var params = texturesProxy( t ); | |
return ( | |
<svg> | |
<defs> | |
<pattern {...params}> | |
</defs> | |
</svg> | |
) | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment