Skip to content

Instantly share code, notes, and snippets.

@kylehotchkiss
Last active September 4, 2016 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kylehotchkiss/4eb4b53c5f055ed1ad994647a2d05bcf to your computer and use it in GitHub Desktop.
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)
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