Pergola filters preview

rosewood – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '.1 0', numOctaves: 8, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.15 0', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.015 0', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '0 0', appendTo: fe});

burr_elm – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'turbulence', baseFrequency: '.05 .055', numOctaves: 8, seed: 5000, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.31 0', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.1 0', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '.03 0', appendTo: fe});

walnut_burl – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '.055 .035', numOctaves: 8, seed: 1000, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.21 0', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.08 0', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '.025 0', appendTo: fe});

spruce – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '.7 0', numOctaves: 1, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1.5 1 1 1 1 1.5 0 0 0 0 1.5 0 0 0 0 0 0 0 0 1.5', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.15 .7', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.15 .5', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '.15 .15', appendTo: fe});

pine – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '.03 0', numOctaves: 8, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 1 1 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.3 1.1', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.3 1.15', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '0 .65', appendTo: fe});

haystack – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '1 .05', numOctaves: 8, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.6 0', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.6 0', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '.05 0', appendTo: fe});

leekshoots – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '.1 .002', numOctaves: 8, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.5 0', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.6 0', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '.05 0', appendTo: fe});

bamboojungle – texture

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feTurbulence', type: 'fractalNoise', baseFrequency: '.2 .005', numOctaves: 8, stitchTiles: 'noStitch', appendTo: f});
$C({element: 'feColorMatrix', type: 'matrix', values: '1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1', appendTo: f});
var fe = $C({element: 'feComponentTransfer', appendTo: f});
$C({element: 'feFuncR', type: 'table', tableValues: '.2 0', appendTo: fe});
$C({element: 'feFuncG', type: 'table', tableValues: '.4 0', appendTo: fe});
$C({element: 'feFuncB', type: 'table', tableValues: '.05 0', appendTo: fe});

bevelShadow_1

var f = $C({element: 'filter', id: id, x: '0%', y: '0%', width: '100%', height: '100%', appendTo: pergola.defs});
$C({element: 'feGaussianBlur', 'in': 'SourceAlpha', stdDeviation: 2.5, result: 'blurredAlpha', appendTo: f});
$C({element: 'feOffset', 'in': 'blurredAlpha', dx: 0, dy: 0, result: 'offsetBlur', appendTo: f});
var fe = $C({element: 'feSpecularLighting', 'lighting-color': 'aliceblue', surfaceScale: 5, specularExponent: 1, specularConstant: 1.1, appendTo: f});
$C({element: 'fePointLight', x: -10000, y: -10000, z: -5000, appendTo: fe});
fe = $C({element: 'feMerge', appendTo: f});
$C({element: 'feMergeNode', 'in': 'offsetBlur', appendTo: fe});
$C({element: 'feMergeNode', 'in': 'litPaint', appendTo: fe});

dropShadow_2

var f = $C({element: 'filter', id: id, filterUnits: 'objectBoundingBox', appendTo: pergola.defs});
$C({element: 'feGaussianBlur', 'in': 'SourceAlpha', stdDeviation: 2, result: 'blurredAlpha', appendTo: f});
$C({element: 'feOffset', 'in': 'blurredAlpha', dx: 4, dy: 4, result: 'offsetBlur', appendTo: f});
var fe = $C({element: 'feMerge', appendTo: f});
$C({element: 'feMergeNode', 'in': 'offsetBlur', appendTo: fe});
$C({element: 'feMergeNode', 'in': 'SourceGraphic', appendTo: fe});

dropShadow_1

var f = $C({element: 'filter', id: id, appendTo: pergola.defs});
$C({element: 'feGaussianBlur', stdDeviation: 2, appendTo: f});
$C({element: 'feOffset', result: 'offsetBlur', dx: 3.2, dy: 3.2, appendTo: f});
$C({element: 'feFlood', 'flood-color': '#000000', 'flood-opacity': .4, appendTo: f});
$C({element: 'feComposite', in2: 'offsetBlur', result: 'shadow', operator: 'in', appendTo: f});
$C({element: 'feComposite', 'in': 'SourceGraphic', in2: 'shadow', appendTo: f});

Filters preview