/**
* A 2D brush module for drawing images in a stamp-like style.
* @module BB.ImageBrush2D
* @extends BB.BaseBrush2D
*/
define(['./BB', './BB.BaseBrush2D', './BB.Color', './BB.MathUtils'],
function( BB, BaseBrush2D, Color, MathUtils){
'use strict';
BB.BaseBrush2D = BaseBrush2D;
BB.Color = Color;
BB.MathUtils = MathUtils;
var drawReady = false;
var initSrcSet = false;
/**
* A brush module for drawing images in a stamp-like style.
* @class BB.ImageBrush2D
* @constructor
* @extends BB.BaseBrush2D
* @param {Object} [config] A optional config hash to initialize any of
* BB.ImageBrush2D's public properties.
* @example <code class="code prettyprint"> var imageBrush = new BB.ImageBrush2D({ width: 100,
* height: 100, src: "some/image.png" }); </code>
*/
BB.ImageBrush2D = function(config) {
BB.BaseBrush2D.call(this, config);
/**
* The type of brush. This property should be treated as read-only.
* @property type
* @type String
* @default "image"
*/
this.type = 'image';
/**
* The current brush variant.
* @property variant
* @type String
* @default null
*/
this.variant = null;
/**
* The internal image element used to load and draw to screen.
* @protected
* @property _image
* @type Image
* @default null
*/
this._image = null;
/**
* An internal variable to check if the variant has been changed since
* the last update().
* @protected
* @property _lastVariant
* @type String
* @default null
*/
this._lastVariant = null;
/**
* An internal variable to check if the color has been changed since
* the last update().
* @protected
* @property _lastColor
* @type Object
* @default null
*/
this._lastColor = new BB.Color();
/**
* A private method used by src's getters and setters.
* @private
* @property _src
* @type String
* @default null
*/
this._src = null;
/**
* An array of all supported variants. For the BB.ImageBrush2D class
* these are a list of pre-made SVGs with programmatic control for
* changing their color.
* @property variants
* @type Array
*/
this.variants = [
'star',
'wave',
'heart',
'bolt',
'balls',
'drips',
'flames',
'grid',
'cube',
'circles',
'shield',
'locking',
'seal',
'circleslash'
];
if (config) {
if (config.src && config.variant) {
throw new Error('BB.ImageBrush2D: The config.src and config.variant properties are mutually exlusive'+
'and cannot both be included in the same config object.');
}
if (config.src && typeof config.src === 'string') this.src = config.src;
if (config.variant &&
typeof config.variant === 'string' &&
this.variants.indexOf(config.variant) !== -1) {
this.variant = config.variant;
}
}
};
BB.ImageBrush2D.prototype = Object.create(BB.BaseBrush2D.prototype);
BB.ImageBrush2D.prototype.constructor = BB.ImageBrush2D;
/**
* The brush's image src. Functionally equivalent to the src property of an
* Image element. When src is not null no variants are used (i.e. the
* variant property is set to null).
* @property src
* @type String
* @default null
*/
Object.defineProperty(BB.ImageBrush2D.prototype, 'src', {
get: function() {
return this._src;
},
set: function(val) {
this._src = val;
this.variant = null;
drawReady = false;
this._image = new Image();
this._image.src = this.src;
this._image.onload = function() {
drawReady = true;
};
initSrcSet = true; // notify debug that source has been set
}
});
/**
* Update method. Usually called once per animation frame.
* @method update
* @param {Object} controllerModule An object with x and y properties and
* optionally an isDown boolean (used for beginning and ending
* strokeds/marks).
* @example <code class="code prettyprint">
* var mouseInput = new BB.MouseInput(document.getElementById('canvas'));<br>
* var pointer = new BB.Pointer(mouseInput);<br>
* var brush = new BB.ImageBrush2D();<br>
* <br>
* // called once per animation frame (from somewhere else in your app)<br>
* function update() {<br>
* mouseInput.update();<br>
* pointer.update();<br>
* brush.update(pointer); // update the brush using the pointer<br>
* }
* </code>
*/
BB.ImageBrush2D.prototype.update = function(controllerModule) {
BB.BaseBrush2D.prototype.update.call(this, controllerModule);
if (controllerModule.hasOwnProperty('isDown')) {
this.hidden = (controllerModule.isDown === false);
}
};
/**
* Draws the brush to the context. Usually called once per animation frame.
* @method draw
* @param {Object} context The HTML5 canvas context you would like to draw
* to.
*/
BB.ImageBrush2D.prototype.draw = function(context) {
function getColoredSVGVariant() {
var r, g, b, a;
if (self.color && self.color instanceof BB.Color) {
r = self.color.r;
g = self.color.g;
b = self.color.b;
a = self.color.a/255;
} else {
r = 255;
g = 255;
b = 255;
a = 1;
}
switch(self.variant){
case 'star' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M143.169,166.502L100,135.139l-43.169,31.363l16.489-50.746L30.152,84.391h53.359L100,33.644l16.489,50.748h53.358 l-43.168,31.365L143.169,166.502z M100,127.723l31.756,23.072l-12.13-37.332l31.757-23.072H112.13L100,53.06L87.87,90.391H48.618 l31.756,23.072l-12.13,37.332L100,127.723z"/></svg>';
case 'wave' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M163.888,97.971c-5.43-5.354-11.042-10.887-22.235-10.887c-11.195,0-16.806,5.533-22.234,10.887 c-5.101,5.027-9.918,9.777-19.685,9.777c-9.766,0-14.581-4.75-19.684-9.777c-5.427-5.354-11.039-10.887-22.233-10.887 c-11.193,0-16.806,5.533-22.233,10.887c-5.1,5.027-9.919,9.777-19.684,9.777c-0.13,0-0.25-0.01-0.379-0.012v5.169 c0.129,0.002,0.249,0.012,0.379,0.012c11.192,0,16.806-5.536,22.233-10.887c5.101-5.028,9.917-9.781,19.684-9.781 c9.766,0,14.584,4.753,19.685,9.781c5.427,5.351,11.04,10.887,22.232,10.887c11.194,0,16.807-5.536,22.233-10.887 c5.102-5.028,9.919-9.781,19.686-9.781c9.766,0,14.584,4.753,19.688,9.781c5.428,5.351,11.04,10.887,22.234,10.887 c0.312,0,0.602-0.02,0.905-0.028v-5.169c-0.302,0.011-0.594,0.028-0.905,0.028C173.808,107.748,168.987,102.998,163.888,97.971z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M183.574,113.917c-11.601,0-17.361-5.679-22.932-11.169c-4.964-4.892-9.641-9.499-18.99-9.499 c-9.352,0-14.027,4.608-18.977,9.486c-5.581,5.503-11.341,11.182-22.942,11.182c-11.601,0-17.361-5.68-22.932-11.173 c-4.957-4.886-9.632-9.495-18.985-9.495c-9.352,0-14.026,4.608-18.974,9.485c-5.583,5.504-11.343,11.183-22.943,11.183 c-0.087,0-0.17-0.003-0.253-0.007l-1.125-0.02v-7.17l1.379,0.027c9.355,0,14.031-4.609,18.981-9.489 c5.57-5.494,11.33-11.175,22.936-11.175c11.608,0,17.367,5.681,22.936,11.175c4.957,4.884,9.631,9.489,18.981,9.489 c9.354,0,14.03-4.607,18.979-9.487c5.574-5.497,11.334-11.177,22.939-11.177c11.604,0,17.365,5.681,22.938,11.175 c4.95,4.88,9.626,9.489,18.984,9.489c0.209,0,0.408-0.009,0.608-0.018l1.297-0.047v7.176l-1.278,0.041 C183.994,113.908,183.789,113.917,183.574,113.917z M57.816,91.249c10.173,0,15.132,4.889,20.382,10.065 c5.291,5.216,10.754,10.603,21.535,10.603c10.782,0,16.245-5.386,21.527-10.595c5.261-5.186,10.22-10.073,20.392-10.073 c10.17,0,15.129,4.887,20.381,10.06c5.281,5.207,10.729,10.576,21.446,10.608v-3.169c-10.114-0.03-15.06-4.905-20.294-10.065 c-5.285-5.21-10.75-10.599-21.533-10.599c-10.785,0-16.248,5.388-21.531,10.598c-5.254,5.178-10.213,10.066-20.388,10.066 c-10.17,0-15.128-4.885-20.376-10.056c-5.292-5.22-10.753-10.608-21.541-10.608c-10.786,0-16.249,5.388-21.531,10.599 c-5.143,5.069-10.006,9.864-19.765,10.06v3.169c10.37-0.203,15.725-5.481,20.906-10.589C42.687,96.136,47.645,91.249,57.816,91.249 z"/></g><g><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M163.888,76.934c-5.43-5.352-11.042-10.884-22.235-10.884c-11.195,0-16.806,5.532-22.234,10.884 c-5.101,5.031-9.918,9.781-19.685,9.781c-9.766,0-14.581-4.75-19.684-9.781C74.623,71.582,69.011,66.05,57.816,66.05 c-11.193,0-16.806,5.532-22.233,10.884c-5.1,5.031-9.919,9.781-19.684,9.781c-0.13,0-0.25-0.011-0.379-0.012v5.165 c0.129,0.002,0.249,0.012,0.379,0.012c11.192,0,16.806-5.532,22.233-10.883c5.101-5.031,9.917-9.782,19.684-9.782 c9.766,0,14.584,4.751,19.685,9.782c5.427,5.351,11.04,10.883,22.232,10.883c11.194,0,16.807-5.532,22.233-10.883 c5.102-5.031,9.919-9.782,19.686-9.782c9.766,0,14.584,4.751,19.688,9.782c5.428,5.351,11.04,10.883,22.234,10.883 c0.312,0,0.602-0.019,0.905-0.028v-5.165c-0.302,0.011-0.594,0.028-0.905,0.028C173.808,86.715,168.987,81.965,163.888,76.934z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M183.574,92.88c-11.604,0-17.365-5.679-22.937-11.171c-4.953-4.883-9.631-9.494-18.985-9.494 c-9.356,0-14.033,4.612-18.983,9.494c-5.57,5.492-11.329,11.171-22.936,11.171c-11.605,0-17.364-5.679-22.935-11.171 c-4.95-4.882-9.625-9.494-18.982-9.494c-9.356,0-14.032,4.612-18.981,9.494C33.264,87.201,27.503,92.88,15.899,92.88 c-0.087,0-0.17-0.003-0.253-0.007l-1.125-0.02v-7.158l1.379,0.02c9.359,0,14.033-4.611,18.981-9.493 c5.571-5.493,11.331-11.172,22.936-11.172c11.607,0,17.366,5.679,22.936,11.172c4.953,4.883,9.628,9.493,18.981,9.493 c9.358,0,14.033-4.611,18.982-9.493c5.573-5.494,11.333-11.172,22.937-11.172c11.603,0,17.364,5.679,22.936,11.17 c4.95,4.883,9.624,9.495,18.986,9.495c0.209,0,0.408-0.009,0.608-0.017l1.297-0.047v7.169l-1.251,0.042 C184.014,92.871,183.799,92.88,183.574,92.88z M57.816,70.215c10.178,0,15.137,4.892,20.387,10.07 c5.283,5.208,10.746,10.595,21.53,10.595c10.786,0,16.249-5.386,21.531-10.595c5.251-5.179,10.211-10.07,20.388-10.07 c10.175,0,15.136,4.891,20.389,10.069c5.27,5.195,10.717,10.564,21.438,10.596v-3.165c-10.118-0.03-15.062-4.907-20.294-10.069 c-5.285-5.209-10.75-10.596-21.533-10.596s-16.246,5.385-21.529,10.594c-5.252,5.18-10.211,10.071-20.39,10.071 c-10.174,0-15.133-4.89-20.383-10.066C74.065,72.437,68.603,67.05,57.816,67.05c-10.785,0-16.248,5.387-21.531,10.596 c-5.141,5.072-10.002,9.868-19.765,10.063v3.166c10.374-0.203,15.729-5.481,20.91-10.589C42.681,75.106,47.64,70.215,57.816,70.215 z"/></g><g><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M163.888,119.004c-5.43-5.351-11.042-10.884-22.235-10.884c-11.195,0-16.806,5.533-22.234,10.884 c-5.101,5.031-9.918,9.781-19.685,9.781c-9.766,0-14.581-4.75-19.684-9.781c-5.427-5.351-11.039-10.884-22.233-10.884 c-11.193,0-16.806,5.533-22.233,10.884c-5.1,5.031-9.919,9.781-19.684,9.781c-0.13,0-0.25-0.01-0.379-0.012v5.165 c0.129,0.002,0.249,0.012,0.379,0.012c11.192,0,16.806-5.532,22.233-10.883c5.101-5.031,9.917-9.781,19.684-9.781 c9.766,0,14.584,4.75,19.685,9.781c5.427,5.351,11.04,10.883,22.232,10.883c11.194,0,16.807-5.532,22.233-10.883 c5.102-5.031,9.919-9.781,19.686-9.781c9.766,0,14.584,4.75,19.688,9.781c5.428,5.351,11.04,10.883,22.234,10.883 c0.312,0,0.602-0.019,0.905-0.028v-5.165c-0.302,0.011-0.594,0.028-0.905,0.028C173.808,128.785,168.987,124.035,163.888,119.004z" /><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M183.574,134.95c-11.604,0-17.365-5.679-22.937-11.171c-4.952-4.882-9.63-9.493-18.985-9.493 c-9.357,0-14.033,4.611-18.983,9.493c-5.57,5.492-11.329,11.171-22.936,11.171c-11.605,0-17.364-5.679-22.935-11.171 c-4.949-4.882-9.624-9.493-18.982-9.493c-9.357,0-14.032,4.611-18.981,9.493c-5.571,5.492-11.332,11.171-22.936,11.171 c-0.087,0-0.17-0.003-0.253-0.007l-1.125-0.02v-7.166l1.379,0.027c9.359,0,14.033-4.611,18.981-9.493 c5.572-5.493,11.333-11.172,22.936-11.172c11.604,0,17.365,5.679,22.936,11.172c4.953,4.884,9.628,9.493,18.981,9.493 c9.358,0,14.033-4.611,18.982-9.493c5.575-5.495,11.335-11.172,22.937-11.172c11.601,0,17.361,5.677,22.934,11.167 c4.952,4.887,9.626,9.498,18.988,9.498c0.209,0,0.408-0.009,0.608-0.018l1.297-0.047v7.17l-1.251,0.041 C184.014,134.941,183.799,134.95,183.574,134.95z M57.816,112.286c10.179,0,15.137,4.892,20.387,10.069 c5.283,5.209,10.746,10.595,21.53,10.595c10.786,0,16.249-5.386,21.531-10.595c5.251-5.178,10.21-10.069,20.388-10.069 c10.176,0,15.137,4.892,20.39,10.069c5.269,5.193,10.716,10.562,21.438,10.595v-3.165c-10.118-0.03-15.062-4.907-20.294-10.069 c-5.288-5.211-10.752-10.596-21.533-10.596s-16.244,5.384-21.527,10.591c-5.254,5.184-10.213,10.074-20.392,10.074 c-10.174,0-15.133-4.89-20.383-10.066c-5.286-5.212-10.75-10.599-21.534-10.599c-10.783,0-16.247,5.386-21.53,10.595 c-5.142,5.072-10.003,9.869-19.766,10.064v3.165c10.374-0.203,15.729-5.481,20.91-10.589 C42.68,117.178,47.639,112.286,57.816,112.286z"/></g></svg>';
case 'heart' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M100.857,149.971l-1.664-1.108c-0.396-0.265-9.854-6.593-21.034-16.174c-15.13-12.966-25.576-25.093-31.049-36.041 c-4.48-8.961-3.554-20.14,2.479-29.903c6.141-9.937,16.242-16.109,26.361-16.109c6.568,0,15.979,2.534,24.906,14.006 c8.923-11.473,18.333-14.006,24.901-14.006c10.118,0,20.219,6.173,26.361,16.111c6.033,9.763,6.961,20.941,2.48,29.902 c-5.474,10.948-15.92,23.075-31.048,36.041c-11.179,9.581-20.635,15.909-21.031,16.173L100.857,149.971z M75.951,56.635 c-8.056,0-16.201,5.083-21.258,13.264c-4.932,7.981-5.761,16.978-2.216,24.066c10.766,21.538,40.951,43.557,48.38,48.758 c7.428-5.201,37.608-27.221,48.376-48.758c3.544-7.087,2.715-16.083-2.218-24.064c-5.057-8.183-13.202-13.266-21.257-13.266 c-8.201,0-15.949,5.119-22.405,14.804l-2.496,3.744l-2.496-3.744C91.903,61.754,84.153,56.635,75.951,56.635z"/></svg>';
case 'bolt' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M76.247,183.564l19.897-73.016l-30.646,8.619L124.41,16.836l-18.489,70.369l30.463-7.496L76.247,183.564z M103.289,103.345 l-12.116,44.466l34.996-60.438L98.948,94.07l11.108-42.281l-34.107,59.244L103.289,103.345z"/></svg>';
case 'balls' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g> <g> <circle fill="#FFFFFF" cx="29.57" cy="100" r="6.961"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M29.569,109.461c-5.217,0-9.461-4.244-9.461-9.461c0-5.217,4.244-9.461,9.461-9.461c5.217,0,9.462,4.244,9.462,9.461 C39.031,105.217,34.787,109.461,29.569,109.461z M29.569,95.539c-2.46,0-4.461,2.001-4.461,4.461s2.001,4.461,4.461,4.461 c2.46,0,4.462-2.001,4.462-4.461S32.03,95.539,29.569,95.539z"/> </g> <g> <circle fill="#FFFFFF" cx="40.77" cy="100" r="11.2"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M40.77,113.699c-7.554,0-13.7-6.145-13.7-13.699s6.146-13.7,13.7-13.7s13.7,6.146,13.7,13.7S48.324,113.699,40.77,113.699 z M40.77,91.3c-4.797,0-8.7,3.903-8.7,8.7c0,4.796,3.903,8.699,8.7,8.699s8.7-3.902,8.7-8.699 C49.47,95.203,45.567,91.3,40.77,91.3z"/> </g> <g> <circle fill="#FFFFFF" cx="56.45" cy="100.001" r="15.68"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M56.45,118.18c-10.025,0-18.181-8.154-18.181-18.179c0-10.025,8.156-18.181,18.181-18.181 c10.024,0,18.18,8.156,18.18,18.181C74.63,110.025,66.475,118.18,56.45,118.18z M56.45,86.82c-7.268,0-13.181,5.913-13.181,13.181 c0,7.267,5.913,13.179,13.181,13.179c7.267,0,13.18-5.912,13.18-13.179C69.63,92.733,63.717,86.82,56.45,86.82z"/> </g> <g> <path fill="#FFFFFF" d="M97.411,100.001c0,12.124-9.826,21.95-21.951,21.95s-21.953-9.826-21.953-21.95 c0-12.126,9.828-21.953,21.953-21.953S97.411,87.875,97.411,100.001z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M75.46,124.451c-13.483,0-24.453-10.968-24.453-24.45c0-13.483,10.97-24.453,24.453-24.453 c13.482,0,24.451,10.97,24.451,24.453C99.911,113.483,88.942,124.451,75.46,124.451z M75.46,80.548 c-10.727,0-19.453,8.727-19.453,19.453c0,10.725,8.727,19.45,19.453,19.45c10.726,0,19.451-8.725,19.451-19.45 C94.911,89.275,86.186,80.548,75.46,80.548z"/> </g> <g> <path fill="#FFFFFF" d="M131.52,100.002c0,16.973-13.757,30.73-30.732,30.73c-16.975,0-30.734-13.758-30.734-30.73 c0-16.977,13.76-30.734,30.734-30.734C117.763,69.268,131.52,83.025,131.52,100.002z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M100.787,133.232c-18.326,0-33.234-14.907-33.234-33.23c0-18.326,14.909-33.234,33.234-33.234 c18.324,0,33.232,14.909,33.232,33.234C134.02,118.325,119.111,133.232,100.787,133.232z M100.787,71.768 c-15.568,0-28.234,12.666-28.234,28.234c0,15.566,12.666,28.23,28.234,28.23c15.567,0,28.232-12.664,28.232-28.23 C129.02,84.434,116.354,71.768,100.787,71.768z"/> </g> <g> <path fill="#FFFFFF" d="M177.392,100.002c0,23.762-19.26,43.023-43.025,43.023c-23.765,0-43.028-19.262-43.028-43.023 c0-23.767,19.264-43.027,43.028-43.027C158.132,56.975,177.392,76.235,177.392,100.002z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M134.366,145.525c-25.104,0-45.528-20.422-45.528-45.523c0-25.104,20.424-45.527,45.528-45.527 c25.103,0,45.525,20.423,45.525,45.527C179.892,125.104,159.469,145.525,134.366,145.525z M134.366,59.475 c-22.347,0-40.528,18.181-40.528,40.527c0,22.345,18.182,40.523,40.528,40.523c22.346,0,40.525-18.179,40.525-40.523 C174.892,77.655,156.712,59.475,134.366,59.475z"/> </g></g></svg>';
case 'drips' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M101.807,72.491c2.018-6.874,5.617-16.757,1.506-23.193 c-3.905-6.113-11.555-2.917-9.19,2.807c0.845,2.044,2.733,4.043,4.164,5.59C102.023,61.739,102.396,67.181,101.807,72.491z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M102.5,78.583c3.533-7.633,8.01-19.14,16.618-21.642 c8.178-2.376,12.458,6.369,5.941,9.589c-2.327,1.153-5.542,1.453-8.001,1.715C110.631,68.921,106.088,73.441,102.5,78.583z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M91.772,109.562c-3.189,0-5.788-2.6-5.788-5.787c0-3.188,2.599-5.789,5.788-5.789 c3.187,0,5.787,2.6,5.787,5.789C97.559,106.963,94.959,109.562,91.772,109.562z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M92.194,131.234c-6.503-19.299-14.249-48.189-34.315-56.477 c-19.065-7.87-31.666,12.05-16.825,21.523c5.301,3.386,12.955,4.963,18.809,6.231C75.167,105.832,84.912,117.914,92.194,131.234z" /> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M76.101,133.059c-3.35,0-6.083-2.73-6.083-6.082c0-3.35,2.733-6.082,6.083-6.082 s6.083,2.732,6.083,6.082C82.184,130.328,79.451,133.059,76.101,133.059z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M89.065,158.012c5.576-29.148,11.079-72.364,38.403-88.272 c25.97-15.111,48.07,11.163,28.528,27.756c-6.976,5.93-17.731,9.706-25.92,12.691C108.635,117.994,96.933,137.352,89.065,158.012z" /> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" fill-rule="evenodd" clip-rule="evenodd" d="M87.855,94.271c-7.565,0-13.765-6.177-13.765-13.762 c0-7.574,6.2-13.766,13.765-13.766c7.582,0,13.779,6.192,13.779,13.766C101.635,88.095,95.438,94.271,87.855,94.271z"/></g></svg>';
case 'flames' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M63.483,90.598c-3.254,1.794-8.575,0.489-11.714,3.509c-5.267,5.55-0.616,10.749,2.557,11.73 c1.243,0.247,15.215,4.718,19.764-14.904c3.639-20.603,16.573-21.23,18.261-21.391c9.035-0.595,18.811,12.88,30.622,1.43 c-9.957,14.972-25.383,1.251-32.25,5.278c-6.976,5.473,0.198,14.331,8.895,14.506c8.654-0.223,23.721-21.253,39.99-20.315 c14.516,0.197,26.641,9.619,38.249,3.321c-17.349,13.542-34.842-6.068-46.412,7.426c-7.613,10.392,1.68,16.533,5.605,12.43 c4.882-5.322,5.061-10.038,15.093-13.023c-1.984,0.992-6.08,1.887-8.061,7.266c-7.678,19.46-15.369,10.928-32.023,8.443 c-21.055-1.89-38.226,8.402-34.416,16.959c6.045,10.555,14.871-2.84,17.743-5.967c12.424-13.883,18.651-0.719,28.922-3.318 c-9.886,4.56-10.58-2.643-18.756,0.986c-9.647,4.283-6.109,17.09-24.423,20.043c-12.009,2.284-14.78-4.71-27.778-7.777 c-4.35-1.104-8.429,0.705-8.606,4.795c1.343,10.4,13.821-1.748,21.315,3.486c-9.809-1.088-9.978,6.889-18.995,6.968 c-10.778-0.355-19.255-8.405-22.362-21.401c-2.542-13.35,3.411-25.616,21.315-24.789c27.918,2.146,21.619-8.761,32.04-14.024 C70.507,78.472,74.096,85.54,63.483,90.598"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M47.063,132.568h-0.002c-5.319-0.176-10.201-2.246-14.117-5.986c-3.923-3.746-6.804-9.101-8.33-15.484 c-1.417-7.443-0.151-14.012,3.563-18.5c3.758-4.541,9.958-6.764,17.844-6.4c2.383,0.183,4.598,0.276,6.586,0.276 c13.106,0,15.871-3.9,18.799-8.03c1.586-2.238,3.227-4.552,6.61-6.261l0.099,0.15c-3.255,2.676-4.435,5.528-5.576,8.287 c-1.528,3.692-2.972,7.179-9.017,10.06c-1.384,0.763-3.106,0.966-4.931,1.181c-2.441,0.288-4.967,0.586-6.76,2.311 c-2.521,2.657-2.568,5.06-2.164,6.606c0.65,2.49,2.899,4.419,4.685,4.972c0.053,0.011,0.146,0.033,0.267,0.062 c0.666,0.162,2.224,0.541,4.195,0.541c5.295,0,12.229-2.679,15.188-15.441c1.499-8.489,4.732-14.617,9.61-18.208 c2.545-1.873,5.435-2.963,8.587-3.24l0.143-0.013c0.199-0.013,0.399-0.02,0.601-0.02c2.966,0,5.978,1.389,9.166,2.858 c3.434,1.583,6.983,3.219,10.743,3.219c3.573,0,6.863-1.505,10.059-4.603l0.138,0.115c-3.234,4.863-7.427,7.228-12.817,7.228 c-3.174,0-6.29-0.76-9.305-1.495c-2.51-0.612-4.882-1.19-6.893-1.19c-1.321,0-2.39,0.25-3.265,0.763 c-2.446,1.92-3.312,4.438-2.428,7.084c1.348,4.033,6.196,7.151,11.278,7.253c3.505-0.09,8.1-3.648,13.42-7.768 c7.237-5.604,16.244-12.579,25.506-12.579c0.356,0,0.715,0.011,1.067,0.031c5.645,0.077,10.889,1.535,15.959,2.946 c4.698,1.307,9.136,2.541,13.459,2.541c3.237,0,6.11-0.705,8.783-2.155l0.099,0.151c-4.416,3.447-9.129,5.052-14.832,5.053 c-0.001,0-0.002,0-0.003,0c-3.783,0-7.47-0.704-11.035-1.385c-3.304-0.631-6.424-1.227-9.392-1.227 c-4.689,0-8.229,1.581-11.138,4.974c-3.861,5.271-3.026,8.846-2.184,10.507c0.942,1.858,2.782,3.059,4.688,3.059 c1.154,0,2.181-0.435,2.968-1.258c1.358-1.48,2.345-2.905,3.298-4.282c2.454-3.544,4.574-6.605,11.835-8.765l0.065,0.167 c-0.311,0.155-0.678,0.311-1.067,0.475c-2.106,0.89-5.289,2.234-6.948,6.741c-4.338,10.995-8.667,12.51-12.7,12.51 c-2.685,0-5.699-0.803-9.191-1.734c-2.989-0.797-6.378-1.7-10.23-2.275c-1.669-0.149-3.366-0.226-5.039-0.226 c-6.442,0-12.655,1.104-17.965,3.192c-4.929,1.938-8.672,4.591-10.54,7.467c-1.406,2.167-1.675,4.38-0.775,6.399 c1.493,2.606,3.288,3.932,5.332,3.932c4.098,0,8.351-5.193,10.891-8.297c0.539-0.658,1.004-1.227,1.371-1.625 c3.971-4.438,7.626-6.505,11.502-6.505c2.54,0,4.935,0.884,7.25,1.738c2.355,0.87,4.791,1.769,7.421,1.769 c0.954,0,1.868-0.113,2.793-0.348l0.061,0.17c-2.301,1.061-4.306,1.576-6.132,1.576c-1.697,0-3.04-0.434-4.339-0.854 c-1.256-0.407-2.442-0.79-3.899-0.79c-1.352,0-2.787,0.345-4.387,1.055c-3.8,1.688-5.55,4.723-7.401,7.936 c-2.79,4.84-5.952,10.326-17.044,12.114c-1.597,0.304-3.056,0.452-4.461,0.452c-4.63,0-7.831-1.653-11.536-3.567 c-3.132-1.618-6.681-3.451-11.816-4.663c-0.826-0.209-1.649-0.315-2.448-0.315c-3.541,0-5.915,1.973-6.048,5.026 c0.383,2.949,1.664,4.271,4.153,4.271c1.541,0,3.396-0.494,5.359-1.018c2.28-0.608,4.639-1.236,6.916-1.236 c1.922,0,3.508,0.455,4.849,1.391L66.05,125.6c-0.607-0.066-1.197-0.102-1.756-0.102c-3.988,0-6.122,1.676-8.381,3.449 c-2.244,1.762-4.564,3.583-8.848,3.621H47.063z M44.333,86.338c-7.026,0-12.564,2.204-16.016,6.375 c-3.681,4.447-4.933,10.963-3.526,18.347c1.518,6.346,4.38,11.67,8.278,15.392c3.883,3.709,8.724,5.762,13.996,5.936 c4.221-0.037,6.517-1.84,8.736-3.582c2.184-1.715,4.441-3.486,8.492-3.486c0.452,0,0.925,0.021,1.41,0.065 c-1.244-0.779-2.701-1.159-4.441-1.159c-2.254,0-4.601,0.626-6.87,1.23c-1.975,0.527-3.841,1.024-5.405,1.024 c-2.564,0-3.941-1.412-4.333-4.444c0.135-3.126,2.638-5.215,6.228-5.215c0.813,0,1.652,0.107,2.491,0.32 c5.155,1.217,8.716,3.056,11.856,4.678c3.685,1.904,6.867,3.547,11.453,3.547c1.394,0,2.842-0.146,4.43-0.449 c11.01-1.774,14.148-7.221,16.918-12.025c1.867-3.24,3.632-6.3,7.484-8.011c1.624-0.721,3.083-1.071,4.461-1.071 c1.485,0,2.685,0.389,3.955,0.8c1.285,0.416,2.614,0.847,4.283,0.846c1.583,0,3.307-0.396,5.248-1.205 c-0.648,0.112-1.299,0.169-1.97,0.169c-2.662,0-5.113-0.906-7.484-1.781c-2.3-0.849-4.679-1.727-7.187-1.727 c-3.82,0-7.434,2.048-11.368,6.445c-0.364,0.396-0.828,0.963-1.364,1.618c-2.562,3.128-6.849,8.364-11.031,8.364 c-2.113,0-3.962-1.356-5.493-4.031c-0.93-2.087-0.657-4.359,0.785-6.58c1.889-2.908,5.662-5.584,10.625-7.536 c5.331-2.097,11.566-3.205,18.031-3.205c1.678,0,3.381,0.077,5.061,0.228c3.868,0.577,7.262,1.481,10.256,2.28 c3.479,0.927,6.484,1.728,9.145,1.728c3.969,0,8.233-1.501,12.531-12.394c1.521-4.129,4.294-5.643,6.39-6.562 c-5.791,2.095-7.735,4.903-9.956,8.111c-0.958,1.382-1.947,2.812-3.315,4.303c-0.812,0.849-1.912,1.315-3.1,1.315 c-1.973,0-3.876-1.24-4.849-3.158c-0.861-1.698-1.72-5.346,2.203-10.701c2.951-3.441,6.533-5.042,11.279-5.042 c2.984,0,6.113,0.598,9.426,1.23c3.557,0.679,7.235,1.382,11.001,1.382c0.001,0,0.002,0,0.003,0c5.31,0,9.753-1.402,13.9-4.398 c-2.438,1.15-5.05,1.71-7.95,1.71c-4.349,0-8.797-1.237-13.508-2.548c-5.06-1.407-10.291-2.862-15.916-2.939 c-0.354-0.02-0.709-0.03-1.062-0.03c-9.199,0-17.804,6.662-25.396,12.541c-5.345,4.139-9.962,7.713-13.53,7.805 c-5.158-0.104-10.079-3.275-11.45-7.376c-0.91-2.724-0.023-5.313,2.498-7.291c0.914-0.537,2.012-0.794,3.366-0.794 c2.033,0,4.414,0.581,6.936,1.196c3.004,0.732,6.109,1.49,9.262,1.489c5.138,0,9.03-2.057,12.189-6.456 c-3.038,2.742-6.176,4.078-9.568,4.078c-3.8,0-7.368-1.645-10.819-3.236c-3.169-1.461-6.163-2.841-9.09-2.841 c-0.196,0-0.394,0.006-0.586,0.019l-0.141,0.013c-3.12,0.273-5.979,1.352-8.496,3.205c-4.839,3.563-8.049,9.652-9.541,18.099 c-2.986,12.882-10.004,15.587-15.364,15.587c-0.001,0,0,0,0,0c-1.993,0-3.566-0.383-4.237-0.547 c-0.118-0.029-0.209-0.051-0.269-0.062c-1.887-0.584-4.142-2.521-4.816-5.103c-0.416-1.591-0.369-4.059,2.212-6.779 c1.84-1.771,4.396-2.072,6.867-2.363c1.806-0.213,3.512-0.415,4.868-1.163c5.987-2.854,7.418-6.31,8.932-9.969 c1.074-2.593,2.182-5.27,4.999-7.814c-2.861,1.643-4.361,3.759-5.816,5.812c-2.955,4.168-5.746,8.106-18.946,8.106 c-1.992,0-4.212-0.093-6.597-0.276C45.446,86.351,44.882,86.338,44.333,86.338z"/></g></svg>';
case 'grid' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g> <g> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="104.088" y="132.575" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -67.3253 122.6343)" width="20.564" height="20.023"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="133.034" y="132.249" transform="matrix(0.7071 -0.7072 0.7072 0.7071 -58.8638 142.9646)" width="20.182" height="20.563"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="104.142" y="103.742" transform="matrix(0.707 0.7072 -0.7072 0.707 114.0192 -47.5699)" width="20.566" height="20.179"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="132.899" y="103.764" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 324.8759 92.9823)" width="20.564" height="20.023"/> </g> <g> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="46.538" y="132.575" transform="matrix(0.7072 -0.7071 0.7071 0.7072 -84.1771 81.931)" width="20.565" height="20.023"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="75.484" y="132.249" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -75.7197 102.257)" width="20.183" height="20.563"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="46.592" y="103.742" transform="matrix(0.707 0.7072 -0.7072 0.707 97.1598 -6.8727)" width="20.566" height="20.181"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="75.349" y="103.763" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 226.6322 133.6762)" width="20.564" height="20.024"/> </g> <g> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="104.088" y="76.215" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -27.4725 106.1268)" width="20.564" height="20.022"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="133.034" y="75.888" transform="matrix(0.7071 -0.7072 0.7072 0.7071 -19.0079 126.4542)" width="20.182" height="20.563"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="104.142" y="47.382" transform="matrix(0.7071 0.7072 -0.7072 0.7071 74.1607 -64.0803)" width="20.565" height="20.179"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="132.899" y="47.403" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 285.0229 -3.2313)" width="20.564" height="20.023"/> </g> <g> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="46.538" y="76.215" transform="matrix(0.7072 -0.7071 0.7071 0.7072 -44.327 65.4261)" width="20.565" height="20.022"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="75.484" y="75.888" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -35.8666 85.7492)" width="20.183" height="20.563"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="46.537" y="47.381" transform="matrix(0.7071 0.7072 -0.7072 0.7071 57.2857 -23.3444)" width="20.565" height="20.18"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="75.349" y="47.403" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 186.7792 37.4626)" width="20.564" height="20.024"/> </g></g></svg>';
case 'cube' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="50.689,71.558 58.907,76.305 108.227,47.858 100.002,43.115 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="67.123,81.049 75.342,85.795 124.66,57.351 116.437,52.606 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="83.558,90.541 91.775,95.286 141.095,66.842 132.87,62.1 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="100.002,156.885 100.003,147.394 50.689,118.91 50.689,128.442 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="100.005,137.905 100.007,128.416 50.686,99.938 50.689,109.433 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="100.008,118.929 100.01,109.438 50.716,80.948 50.72,90.442 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="149.314,71.558 141.095,76.301 141.098,133.181 149.314,128.442 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="132.877,81.044 124.657,85.787 124.662,142.66 132.879,137.922 "/><polygon fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" points="116.439,90.531 108.22,95.273 108.227,152.142 116.444,147.4 "/></g></svg>';
case 'circles' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M62.923,108.923c-0.35,3.989-3.862,6.939-7.851,6.59c-3.989-0.348-6.936-3.864-6.591-7.853 c0.35-3.988,3.863-6.936,7.852-6.588C60.324,101.424,63.273,104.935,62.923,108.923z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M151.409,89.511c1.694,3.628,0.125,7.939-3.506,9.631c-3.623,1.691-7.937,0.121-9.63-3.504 c-1.688-3.628-0.125-7.938,3.504-9.632C145.41,84.314,149.722,85.883,151.409,89.511z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M72.172,126.46c1.693,3.631,0.125,7.94-3.504,9.632c-3.627,1.694-7.938,0.121-9.633-3.504 c-1.691-3.629-0.123-7.938,3.506-9.633C66.17,121.266,70.481,122.83,72.172,126.46z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M139.098,65.406c3.28,2.296,4.077,6.813,1.778,10.093c-2.291,3.276-6.812,4.072-10.091,1.781 c-3.275-2.298-4.078-6.813-1.781-10.093C131.305,63.906,135.82,63.107,139.098,65.406z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M88.95,137.023c3.282,2.299,4.079,6.813,1.781,10.095c-2.293,3.28-6.813,4.073-10.095,1.781 c-3.28-2.298-4.075-6.815-1.779-10.095C81.155,135.525,85.67,134.727,88.95,137.023z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M116.383,50.687c3.988,0.349,6.938,3.862,6.587,7.852c-0.347,3.983-3.864,6.933-7.85,6.587 c-3.985-0.35-6.937-3.86-6.589-7.848C108.883,53.285,112.396,50.335,116.383,50.687z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M108.762,137.783c3.992,0.35,6.939,3.862,6.59,7.851c-0.346,3.987-3.863,6.935-7.852,6.591 c-3.988-0.35-6.936-3.864-6.589-7.854C101.263,140.383,104.773,137.433,108.762,137.783z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M89.351,49.296c3.627-1.692,7.938-0.123,9.63,3.508c1.692,3.621,0.121,7.936-3.503,9.629 c-3.627,1.688-7.938,0.125-9.632-3.503C84.156,55.296,85.722,50.984,89.351,49.296z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M126.299,128.534c3.633-1.693,7.943-0.124,9.633,3.505c1.695,3.626,0.122,7.938-3.505,9.634 c-3.628,1.69-7.938,0.12-9.632-3.508C121.105,134.536,122.671,130.226,126.299,128.534z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M65.247,61.607c2.295-3.277,6.812-4.075,10.092-1.777c3.276,2.291,4.073,6.812,1.781,10.091 c-2.296,3.276-6.812,4.077-10.093,1.784C63.746,69.402,62.947,64.886,65.247,61.607z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M136.863,111.757c2.299-3.282,6.816-4.08,10.094-1.781c3.281,2.294,4.075,6.813,1.781,10.096 c-2.296,3.278-6.814,4.074-10.096,1.778C135.365,119.551,134.566,115.035,136.863,111.757z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M50.527,84.322c0.348-3.987,3.861-6.936,7.851-6.585c3.983,0.346,6.934,3.862,6.587,7.85 c-0.35,3.984-3.861,6.937-7.849,6.589C53.124,91.823,50.174,88.312,50.527,84.322z"/></g><g> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="75.462" cy="83.061" r="4.851"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M129.641,119.463c-0.916,2.519-3.698,3.816-6.217,2.899c-2.515-0.914-3.812-3.699-2.898-6.215 c0.918-2.517,3.697-3.815,6.215-2.901C129.261,114.165,130.559,116.948,129.641,119.463z"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="70.1" cy="97.793" r="4.851"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M135.221,102.23c0.467,2.64-1.295,5.153-3.934,5.618c-2.635,0.466-5.15-1.297-5.619-3.934 c-0.463-2.636,1.295-5.153,3.934-5.618C132.242,97.834,134.758,99.592,135.221,102.23z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M77.6,112.39c0.465,2.642-1.294,5.154-3.934,5.62c-2.638,0.467-5.152-1.297-5.621-3.934 c-0.465-2.641,1.297-5.153,3.935-5.619C74.619,107.992,77.134,109.751,77.6,112.39z"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M131.438,84.516c1.723,2.052,1.455,5.111-0.598,6.832c-2.049,1.723-5.109,1.453-6.832-0.597 c-1.722-2.052-1.456-5.109,0.595-6.832C126.66,82.196,129.717,82.463,131.438,84.516z"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="82.899" cy="125.244" r="4.85"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M119.304,71.065c2.518,0.915,3.815,3.698,2.897,6.218c-0.913,2.514-3.698,3.812-6.215,2.897 c-2.516-0.917-3.816-3.696-2.9-6.215C114.006,71.446,116.787,70.146,119.304,71.065z"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="97.632" cy="130.606" r="4.85"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M102.07,65.484c2.638-0.465,5.153,1.295,5.617,3.935c0.467,2.635-1.295,5.152-3.933,5.619 c-2.637,0.463-5.153-1.295-5.621-3.933C97.672,68.464,99.431,65.948,102.07,65.484z"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="113.072" cy="127.884" r="4.85"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M84.355,69.268c2.052-1.722,5.11-1.455,6.832,0.599c1.722,2.049,1.455,5.109-0.597,6.833 c-2.051,1.72-5.11,1.455-6.832-0.596C82.036,74.046,82.302,70.989,84.355,69.268z"/></g><g> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="97.263" cy="83.369" r="2.775"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M104.455,120.013c-1.39,0.647-3.04,0.048-3.688-1.342c-0.648-1.387-0.046-3.039,1.341-3.688 c1.39-0.646,3.039-0.048,3.688,1.341C106.443,117.716,105.844,119.367,104.455,120.013z"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="89.135" cy="87.159" r="2.775"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="111.41" cy="113.707" r="2.775"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="83.99" cy="94.507" r="2.776"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="116.555" cy="106.36" r="2.775"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="83.207" cy="103.442" r="2.775"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M119.852,96.253c0.648,1.388,0.048,3.039-1.344,3.687c-1.385,0.647-3.037,0.046-3.686-1.343 c-0.646-1.389-0.049-3.038,1.34-3.688C117.555,94.263,119.206,94.861,119.852,96.253z"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="86.998" cy="111.571" r="2.775"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="113.547" cy="89.295" r="2.775"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="94.345" cy="116.716" r="2.775"/> <path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M106.441,81.387c1.525,0.133,2.656,1.478,2.521,3.005c-0.133,1.526-1.479,2.656-3.006,2.523 c-1.525-0.134-2.656-1.479-2.523-3.005C103.57,82.381,104.914,81.252,106.441,81.387z"/></g><g> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="105.747" cy="92.615" r="1.529"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="94.798" cy="108.252" r="1.528"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="101.105" cy="90.924" r="1.528"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="99.441" cy="109.942" r="1.528"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="96.239" cy="91.783" r="1.53"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="104.307" cy="109.085" r="1.528"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="92.453" cy="94.958" r="1.529"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="108.092" cy="105.909" r="1.528"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="90.764" cy="99.601" r="1.529"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="109.782" cy="101.266" r="1.529"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="91.621" cy="104.467" r="1.529"/> <circle fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" cx="108.924" cy="96.4" r="1.528"/></g></svg>';
case 'shield' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M142.824,81.079c-0.005-0.145-0.007-0.291-0.019-0.432c-0.235-4.191-2.952-8.801-6.518-10.924l-29.664-17.67c-1.024-0.611-2.061-0.98-3.089-1.113c-1.143-0.297-2.372-0.455-3.626-0.455c-1.345,0-2.651,0.184-3.859,0.523c-0.891,0.17-1.785,0.515-2.674,1.045l-29.661,17.67c-3.564,2.123-6.287,6.738-6.519,10.934c-0.01,0.139-0.016,0.284-0.018,0.427c-0.002,0.052-0.008,0.101-0.008,0.151v0.065v37.398v0.067c0,0.05,0.006,0.103,0.008,0.153c0.003,0.147,0.008,0.293,0.018,0.432c0.236,4.192,2.957,8.804,6.519,10.926l29.662,17.671c1.028,0.609,2.063,0.979,3.091,1.11c1.143,0.3,2.372,0.456,3.626,0.456c1.344,0,2.649-0.182,3.86-0.521c0.893-0.172,1.784-0.518,2.672-1.047l29.662-17.669c3.566-2.124,6.284-6.739,6.518-10.934c0.012-0.14,0.014-0.284,0.019-0.428c0-0.051,0.005-0.103,0.005-0.149v-0.067V81.301v-0.065C142.829,81.184,142.824,81.131,142.824,81.079z M63.815,118.579V81.421l29.561,17.612l0.027,0.016c0.391,0.236,0.774,0.565,1.133,0.953c-0.367,0.394-0.758,0.729-1.16,0.965L63.815,118.579z M136.188,81.419v37.16l-29.562-17.612l-0.028-0.014c-0.39-0.234-0.772-0.564-1.132-0.951c0.367-0.397,0.759-0.732,1.16-0.969L136.188,81.419z M132.791,75.539c0.044,0.026,0.084,0.053,0.122,0.078c-0.038,0.023-0.076,0.052-0.122,0.077l-29.464,17.562V57.989L132.791,75.539z M96.675,93.263L67.114,75.653c-0.043-0.028-0.084-0.055-0.122-0.081c0.038-0.022,0.079-0.049,0.122-0.074l29.561-17.62V93.263z M67.212,124.461c-0.044-0.026-0.085-0.053-0.125-0.077c0.04-0.026,0.081-0.052,0.125-0.078l29.463-17.563v35.269L67.212,124.461z M103.327,106.739l29.562,17.608c0.044,0.025,0.085,0.052,0.122,0.078c-0.037,0.026-0.078,0.052-0.122,0.076l-29.562,17.62V106.739z"/></g></svg>';
case 'locking' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M109.25,83.803c-4.012,0-7.275,3.266-7.275,7.278c0,1.32,0,1.32,0,1.32c0.537,1.271-0.816,4.129-2.996,6.352c-2.188,2.227-4.984,3.638-6.215,3.137c0,0,0,0-1.275,0c-4.01,0-7.275,3.266-7.275,7.277s3.266,7.278,7.275,7.278c4.014,0,7.279-3.267,7.279-7.278c0-1.327,0-1.327,0-1.327c-0.541-1.277,0.799-4.139,2.984-6.362c2.18-2.221,4.98-3.624,6.217-3.119c0,0,0,0,1.281,0c4.014,0,7.279-3.263,7.279-7.277C116.529,87.068,113.264,83.803,109.25,83.803z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M110.24,48.69c-4.014,0-7.275,3.266-7.275,7.278c0,1.32,0,1.32,0,1.32c0.535,1.267-0.814,4.126-2.998,6.352c-2.186,2.224-4.982,3.634-6.215,3.137c0,0,0,0-1.273,0c-4.014,0-7.277,3.263-7.277,7.273c0,4.016,3.264,7.278,7.277,7.278s7.277-3.263,7.277-7.278c0-1.327,0-1.327,0-1.327c-0.543-1.277,0.801-4.135,2.982-6.358s4.982-3.627,6.223-3.123c0,0,0,0,1.279,0c4.016,0,7.277-3.263,7.277-7.273C117.518,51.956,114.256,48.69,110.24,48.69z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M143.869,82.318c-4.01,0-7.275,3.27-7.275,7.278c0,1.323,0,1.323,0,1.323c0.535,1.268-0.814,4.126-2.998,6.349c-2.186,2.227-4.98,3.638-6.213,3.137c0,0,0,0-1.275,0c-4.012,0-7.275,3.266-7.275,7.277c0,4.016,3.264,7.278,7.275,7.278c4.014,0,7.279-3.263,7.279-7.278c0-1.327,0-1.327,0-1.327c-0.541-1.277,0.801-4.139,2.98-6.362c2.184-2.219,4.982-3.624,6.223-3.119c0,0,0,0,1.279,0c4.014,0,7.279-3.263,7.279-7.277C151.148,85.588,147.883,82.318,143.869,82.318z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M73.889,85.039c-4.012,0-7.275,3.267-7.275,7.278c0,1.32,0,1.32,0,1.32c0.535,1.271-0.812,4.129-2.998,6.352c-2.188,2.228-4.98,3.638-6.213,3.137c0,0,0,0-1.275,0c-4.012,0-7.275,3.267-7.275,7.277c0,4.016,3.264,7.278,7.275,7.278c4.014,0,7.277-3.263,7.277-7.278c0-1.327,0-1.327,0-1.327c-0.541-1.277,0.801-4.139,2.984-6.362c2.182-2.223,4.982-3.623,6.221-3.119c0,0,0,0,1.279,0c4.016,0,7.277-3.263,7.277-7.277C81.166,88.306,77.904,85.039,73.889,85.039z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M107.52,118.671c-4.012,0-7.277,3.266-7.277,7.278c0,1.32,0,1.32,0,1.32c0.537,1.267-0.812,4.125-2.998,6.352c-2.186,2.224-4.98,3.634-6.213,3.137c0,0,0,0-1.271,0c-4.014,0-7.279,3.264-7.279,7.276s3.266,7.275,7.279,7.275c4.01,0,7.275-3.263,7.275-7.275c0-1.33,0-1.33,0-1.33c-0.541-1.276,0.799-4.135,2.984-6.358c2.18-2.223,4.98-3.627,6.219-3.12c0,0,0,0,1.281,0c4.016,0,7.279-3.266,7.279-7.276C114.799,121.937,111.535,118.671,107.52,118.671z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M99.381,91.695c0-4.011-3.264-7.277-7.277-7.277c-1.318,0-5.445-0.812-7.672-2.999c-2.221-2.183-3.135-6.211-3.135-7.485c0-4.011-3.266-7.277-7.277-7.277c-4.016,0-7.277,3.267-7.277,7.277c0,4.013,3.262,7.278,7.277,7.278c1.328,0,5.469,0.799,7.689,2.979c2.219,2.183,3.117,6.222,3.117,7.505c0,4.013,3.266,7.275,7.277,7.275C96.117,98.971,99.381,95.708,99.381,91.695z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M133.752,126.066c0-4.013-3.262-7.278-7.271-7.278c-1.322,0-5.449-0.812-7.676-2.996c-2.225-2.187-3.137-6.214-3.137-7.487c0-4.013-3.266-7.278-7.275-7.278c-4.014,0-7.279,3.266-7.279,7.278c0,4.015,3.266,7.277,7.279,7.277c1.326,0,5.467,0.799,7.686,2.982c2.223,2.181,3.123,6.221,3.123,7.502c0,4.015,3.264,7.276,7.279,7.276C130.49,133.343,133.752,130.081,133.752,126.066z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M97.65,127.056c0-4.012-3.264-7.277-7.277-7.277c-1.32,0-5.449-0.813-7.672-2.996c-2.223-2.187-3.137-6.215-3.137-7.488c0-4.012-3.264-7.278-7.275-7.278c-4.014,0-7.277,3.267-7.277,7.278c0,4.011,3.264,7.278,7.277,7.278c1.328,0,5.467,0.798,7.686,2.981c2.223,2.183,3.121,6.221,3.121,7.502c0,4.012,3.268,7.278,7.277,7.278C94.387,134.334,97.65,131.067,97.65,127.056z"/><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M134.248,90.459c0-4.012-3.264-7.277-7.275-7.277c-1.32,0-5.447-0.815-7.674-2.999c-2.225-2.184-3.135-6.212-3.135-7.485c0-4.012-3.266-7.278-7.277-7.278s-7.277,3.267-7.277,7.278c0,4.011,3.266,7.278,7.277,7.278c1.328,0,5.467,0.798,7.688,2.978c2.223,2.187,3.119,6.223,3.119,7.506c0,4.012,3.266,7.274,7.279,7.274C130.984,97.733,134.248,94.471,134.248,90.459z"/></g></svg>';
case 'seal' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><path fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" d="M114.785,171.178L100,137.172l-14.787,34.005l0.322-37.075l-27.333,25.041l15.371-33.735l-35.165,11.765L66.184,112.6 l-36.919-3.562l35.372-11.14L32.361,79.633l36.845,4.206l-22.05-29.817l31.945,18.827L71.07,36.653l21.539,30.179l7.389-36.34 l7.398,36.34l21.529-30.179l-8.021,36.196l31.953-18.832l-22.062,29.821l36.85-4.206L135.37,97.897l35.362,11.14l-36.916,3.562 l27.773,24.572l-35.163-11.765l15.372,33.735l-27.336-25.041L114.785,171.178z M91.655,120.357l-0.186,21.386L100,122.125 l8.529,19.617l-0.186-21.384l15.772,14.448l-8.871-19.468l20.282,6.786l-16.02-14.172l21.291-2.055l-20.396-6.425l18.615-10.534 l-21.254,2.425l12.725-17.198l-18.428,10.861l4.629-20.892l-12.42,17.411l-4.268-20.959L95.74,81.547L83.313,64.136l4.635,20.893 L69.513,74.162l12.721,17.202L60.99,88.939l18.615,10.534l-20.4,6.425l21.288,2.055l-16.02,14.172l20.281-6.786l-8.87,19.468 L91.655,120.357z"/></svg>';
case 'circleslash' : return '<svg version="1.1" id="Your_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"><g> <defs> <circle id="SVGID_1_" cx="106" cy="96" r="55"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" overflow="visible"/> </clipPath> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="62.944" y="-32.696" transform="matrix(0.7072 0.707 -0.707 0.7072 64.7871 -26.4693)" clip-path="url(#SVGID_2_)" width="2.814" height="195.359"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="69.481" y="-26.157" transform="matrix(0.7068 0.7074 -0.7074 0.7068 71.3731 -29.1772)" clip-path="url(#SVGID_2_)" width="2.814" height="195.357"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="76.018" y="-19.619" transform="matrix(0.7069 0.7073 -0.7073 0.7069 77.9011 -31.8846)" clip-path="url(#SVGID_2_)" width="2.814" height="195.358"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="82.556" y="-13.081" transform="matrix(0.7069 0.7073 -0.7073 0.7069 84.441 -34.5925)" clip-path="url(#SVGID_2_)" width="2.814" height="195.358"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="89.093" y="-6.544" transform="matrix(0.7068 0.7074 -0.7074 0.7068 90.996 -37.2999)" clip-path="url(#SVGID_2_)" width="2.814" height="195.357"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="95.631" y="-0.007" transform="matrix(0.7069 0.7073 -0.7073 0.7069 97.5205 -40.0089)" clip-path="url(#SVGID_2_)" width="2.815" height="195.358"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="102.168" y="6.531" transform="matrix(0.7069 0.7073 -0.7073 0.7069 104.0597 -42.7162)" clip-path="url(#SVGID_2_)" width="2.814" height="195.358"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="108.706" y="13.068" transform="matrix(0.7069 0.7073 -0.7073 0.7069 110.5993 -45.4245)" clip-path="url(#SVGID_2_)" width="2.814" height="195.357"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="115.242" y="19.606" transform="matrix(0.7068 0.7074 -0.7074 0.7068 117.1593 -48.132)" clip-path="url(#SVGID_2_)" width="2.815" height="195.357"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="121.78" y="26.143" transform="matrix(0.7069 0.7073 -0.7073 0.7069 123.6781 -50.8401)" clip-path="url(#SVGID_2_)" width="2.814" height="195.357"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="128.318" y="32.681" transform="matrix(0.7071 0.7071 -0.7071 0.7071 130.1735 -53.5478)" clip-path="url(#SVGID_2_)" width="2.813" height="195.358"/> <rect fill="rgba(' + r + ', ' + g + ', ' + b + ',' + a + ')" x="134.856" y="39.217" transform="matrix(0.7075 0.7067 -0.7067 0.7075 136.5923 -56.2565)" clip-path="url(#SVGID_2_)" width="2.814" height="195.359"/></g></svg>';
}
}
var self = this;
context = BB.BaseBrush2D.prototype.draw.call(this, context);
// if the variant is present and is the right variable type
if (this.variant !== null &&
typeof this.variant === 'string') {
// if the variant is new or has changed
// or if the color is new or has changed
if (this.variant !== this._lastVariant || !this.color.isEqual(this._lastColor) ) {
// if this is an acceptable variant
if (this.variants.indexOf(this.variant) !== -1) {
// create a tmp variant, because this.src setter sets this.variant to null
var variant = this.variant;
this.src = 'data:image/svg+xml;base64,' + window.btoa(getColoredSVGVariant());
this.variant = variant;
this._lastVariant = this.variant;
this._lastColor.copy( this.color );
} else {
throw new Error('BB.ImageBrush2D draw: ' + this.variant + ' is not a valid variant for BB.ImageBrush2D');
}
}
}
if (!initSrcSet) {
console.error('BB.ImageBrush2D draw: you are attempting to draw an image brush without first setting its source with the .src property');
}
if (!this.hidden && drawReady) {
context.save();
context.translate(this.x, this.y);
context.rotate(BB.MathUtils.degToRad(this.rotation));
// draw to screen
context.drawImage(this._image, - this.width/2, - this.height/2, this.width, this.height);
context.restore();
}
};
return BB.ImageBrush2D;
});
