Jump to content

exmarxdespot

New Members
  • Content count

    2
  • Joined

  • Last visited

  1. I would prefer a non-rasterised version of the filter layers similar to the example below. I tried to recreate it but ended up going back to the image tag instead. Example svg in prod: https://audiozoa.band/#/3dsquare I attempted to recreate it with a filter but could not get it to look the same so I reverted back to the image. The rasterised image looks fine but it isn't scaleable (which is also fine). I just would prefer it to be for other application. <button (click)="random()">Random</button> <span *ngFor="let n of amount(101)"> {{n}} | </span> <div style="display: flex; justify-content: center; margin-top: 40px"> <svg width="30%" height="20%" viewBox="0 0 400 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <!-- Holder of the full square --> <g id="Square-0" serif:id="Square 0" transform="matrix(3.23953,0,0,3.23953,-140.702,-645.488)"> <g id="x1"></g> <g id="x2" transform="matrix(1,0,0,1,12.9212,8.7665)"> </g> <g id="x3" transform="matrix(1,0,0,1,25.8424,17.4988)"></g> <g id="x4" transform="matrix(1,0,0,1,38.7636,26.2653)"></g> <g id="x5" transform="matrix(1,0,0,1,51.6849,34.9976)"></g> <g id="x6" transform="matrix(1,0,0,1,64.6061,43.7641)"></g> <g id="x7" transform="matrix(1,0,0,1,77.5273,52.4964)"></g> <g id="x8" transform="matrix(1,0,0,1,90.4485,61.2629)"></g> <g *ngIf="false" id="_8" serif:id="8" transform="matrix(0.16119,0,0,0.16119,31.0512,270.426)"> <!-- The svg way to do it. Doesn't look as good --> <g transform="matrix(1,0,0,1,-54,0)"> <path id="example" d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249); filter: url(#glow);"></path> <path id="example" d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:transparent; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 3; filter: url(#dope);" stroke="white" stroke-width="2"></path> </g> </g> </g> <g id="Square-Test-On" serif:id="Square 2 On" transform="matrix(3.23953,0,0,3.23953,-140.702,-645.488)"></g> <defs> <image id="light" width="53px" height="77px" xlink:href="data:image/png;base64,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"/> <filter id="dope" width="300%" height="300%" x="-75%" y="-75%"> <feMorphology operator="dilate" radius="3" in="SourceAlpha" result="thicken"></feMorphology> <feGaussianBlur stdDeviation="5" result="coloredBlur"></feGaussianBlur> <feFlood flood-color="rgb(121,238,249)" result="glowColor"></feFlood> <feComposite in="glowColor" in2="coloredBlur" operator="in" result="softGlow_colored"></feComposite> <feMerge> <feMergeNode in="softGlow_colored"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> <filter id="glow" width="300%" height="300%" x="-75%" y="-75%"> <feMorphology operator="dilate" radius="4" in="SourceAlpha" result="thicken"></feMorphology> <feGaussianBlur stdDeviation="8" result="coloredBlur"></feGaussianBlur> <feFlood flood-color="rgb(121,238,249)" result="glowColor"></feFlood> <feComposite in="glowColor" in2="coloredBlur" operator="in" result="softGlow_colored"></feComposite> <feMerge> <feMergeNode in="softGlow_colored"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </defs> </svg> </div> Background angular/typescript code import {Component, OnInit} from '@angular/core'; import {SquareFaceFactory} from '../domain/three-dsquare/square-face-factory.model'; import {SquareFaceDirection} from '../domain/three-dsquare/square-face-direction.enum'; import {SquareFace} from '../domain/three-dsquare/square-face.model'; import {generateInclusiveRange} from '../common/helpers/range'; import {SquareLightFactory} from '../domain/three-dsquare/square-light-factory.model'; import * as d3 from 'd3'; import {SquareLight} from '../domain/three-dsquare/square-light.model'; @Component({ selector: 'app-three-dsquare', templateUrl: './three-dsquare.component.html', styleUrls: ['./three-dsquare.component.sass'] }) export class ThreeDSquareComponent implements OnInit { squareFaceConfig = [ { transform: 'matrix(0.16119,0,0,0.16119,31.0512,270.426)', y: '8' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,255.97)', y: '7' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,241.514)', y: '6' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,227.058)', y: '5' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,212.757)', y: '4' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,198.301)', y: '3' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,183.845)', y: '2' }, { transform: 'matrix(0.16119,0,0,0.16119,31.0512,169.389)', y: '1' } ]; squareFaceFactory = SquareFaceFactory.configure( 'M223.005,185.277L284.554,220.813L284.554,291.884L223.005,327.42L161.455,291.884L161.455,220.813L223.005,185.277Z', 'M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z', 'M284.554,291.884L223.005,327.42L223.005,256.375L284.554,220.839L284.554,291.884Z', 'rgb(134,5,130)', 'rgb(134,5,78)', 'rgb(87,5,134)', 'matrix(1,0,0,1,-54,0)' ); squareLightFactory = SquareLightFactory.configure( 'matrix(0.308686,-0,-0,0.308686,45.9024,199.254)', '#light', 'matrix(0.987474,0,0,0.99982,0,0)', '41.474px', '64.988px' ); yStart = 8; xStart = 0; yDiff = 28.5; xDiff = 46.6; xSpace = 42.25; // can generate dynamically - refactor x1 = this.getFirstColumn(this.xStart, 1); x2 = this.getFirstColumn(this.xStart, 2); x3 = this.getFirstColumn(this.xStart, 3); x4 = this.getFirstColumn(this.xStart, 4); x5 = this.getFirstColumn(this.xStart, 5); x6 = this.getFirstColumn(this.xStart, 6); x7 = this.getFirstColumn(this.xStart, 7); x8 = this.getFirstColumn(this.xStart, 8); // can generate dynamically - refactor y1 = this.getFirstRow(this.yStart, 1); y2 = this.getFirstRow(this.yStart, 2); y3 = this.getFirstRow(this.yStart, 3); y4 = this.getFirstRow(this.yStart, 4); y5 = this.getFirstRow(this.yStart, 5); y6 = this.getFirstRow(this.yStart, 6); y7 = this.getFirstRow(this.yStart, 7); y8 = this.getFirstRow(this.yStart, 8); blank = []; // can generate dynamically - refactor electricLights = { 11: this.squareLightFactory.build(this.x1, this.getY(this.y1, 1), '11'), 12: this.squareLightFactory.build(this.x1, this.getY(this.y2, 1), '12'), 13: this.squareLightFactory.build(this.x1, this.getY(this.y3, 1), '13'), 14: this.squareLightFactory.build(this.x1, this.getY(this.y4, 1), '14'), 15: this.squareLightFactory.build(this.x1, this.getY(this.y5, 1), '15'), 16: this.squareLightFactory.build(this.x1, this.getY(this.y6, 1), '16'), 17: this.squareLightFactory.build(this.x1, this.getY(this.y7, 1), '17'), 18: this.squareLightFactory.build(this.x1, this.getY(this.y8, 1), '18'), 21: this.squareLightFactory.build(this.x2, this.getY(this.y1, 2), '21'), 22: this.squareLightFactory.build(this.x2, this.getY(this.y2, 2), '22'), 23: this.squareLightFactory.build(this.x2, this.getY(this.y3, 2), '23'), 24: this.squareLightFactory.build(this.x2, this.getY(this.y4, 2), '24'), 25: this.squareLightFactory.build(this.x2, this.getY(this.y5, 2), '25'), 26: this.squareLightFactory.build(this.x2, this.getY(this.y6, 2), '26'), 27: this.squareLightFactory.build(this.x2, this.getY(this.y7, 2), '27'), 28: this.squareLightFactory.build(this.x2, this.getY(this.y8, 2), '28'), 31: this.squareLightFactory.build(this.x3, this.getY(this.y1, 3), '31'), 32: this.squareLightFactory.build(this.x3, this.getY(this.y2, 3), '32'), 33: this.squareLightFactory.build(this.x3, this.getY(this.y3, 3), '33'), 34: this.squareLightFactory.build(this.x3, this.getY(this.y4, 3), '34'), 35: this.squareLightFactory.build(this.x3, this.getY(this.y5, 3), '35'), 36: this.squareLightFactory.build(this.x3, this.getY(this.y6, 3), '36'), 37: this.squareLightFactory.build(this.x3, this.getY(this.y7, 3), '37'), 38: this.squareLightFactory.build(this.x3, this.getY(this.y8, 3), '38'), 41: this.squareLightFactory.build(this.x4, this.getY(this.y1, 4), '41'), 42: this.squareLightFactory.build(this.x4, this.getY(this.y2, 4), '42'), 43: this.squareLightFactory.build(this.x4, this.getY(this.y3, 4), '43'), 44: this.squareLightFactory.build(this.x4, this.getY(this.y4, 4), '37'), 45: this.squareLightFactory.build(this.x4, this.getY(this.y5, 4), '45'), 46: this.squareLightFactory.build(this.x4, this.getY(this.y6, 4), '37'), 47: this.squareLightFactory.build(this.x4, this.getY(this.y7, 4), '47'), 48: this.squareLightFactory.build(this.x4, this.getY(this.y8, 4), '37'), 51: this.squareLightFactory.build(this.x5, this.getY(this.y1, 5), '51'), 52: this.squareLightFactory.build(this.x5, this.getY(this.y2, 5), '52'), 53: this.squareLightFactory.build(this.x5, this.getY(this.y3, 5), '53'), 54: this.squareLightFactory.build(this.x5, this.getY(this.y4, 5), '54'), 55: this.squareLightFactory.build(this.x5, this.getY(this.y5, 5), '41'), 56: this.squareLightFactory.build(this.x5, this.getY(this.y6, 5), '56'), 57: this.squareLightFactory.build(this.x5, this.getY(this.y7, 5), '41'), 58: this.squareLightFactory.build(this.x5, this.getY(this.y8, 5), '41'), 61: this.squareLightFactory.build(this.x6, this.getY(this.y1, 6), '61'), 62: this.squareLightFactory.build(this.x6, this.getY(this.y2, 6), '62'), 63: this.squareLightFactory.build(this.x6, this.getY(this.y3, 6), '63'), 64: this.squareLightFactory.build(this.x6, this.getY(this.y4, 6), '51'), 65: this.squareLightFactory.build(this.x6, this.getY(this.y5, 6), '65'), 66: this.squareLightFactory.build(this.x6, this.getY(this.y6, 6), '51'), 67: this.squareLightFactory.build(this.x6, this.getY(this.y7, 6), '51'), 68: this.squareLightFactory.build(this.x6, this.getY(this.y8, 6), '68'), 71: this.squareLightFactory.build(this.x7, this.getY(this.y1, 7), '71'), 72: this.squareLightFactory.build(this.x7, this.getY(this.y2, 7), '72'), 73: this.squareLightFactory.build(this.x7, this.getY(this.y3, 7), '73'), 74: this.squareLightFactory.build(this.x7, this.getY(this.y4, 7), '74'), 75: this.squareLightFactory.build(this.x7, this.getY(this.y5, 7), '51'), 76: this.squareLightFactory.build(this.x7, this.getY(this.y6, 7), '51'), 77: this.squareLightFactory.build(this.x7, this.getY(this.y7, 7), '51'), 78: this.squareLightFactory.build(this.x7, this.getY(this.y8, 7), '78'), 81: this.squareLightFactory.build(this.x8, this.getY(this.y1, 8), '81'), 82: this.squareLightFactory.build(this.x8, this.getY(this.y2, 8), '82'), 83: this.squareLightFactory.build(this.x8, this.getY(this.y3, 8), '83'), 84: this.squareLightFactory.build(this.x8, this.getY(this.y4, 8), '51'), 85: this.squareLightFactory.build(this.x8, this.getY(this.y5, 8), '51'), 86: this.squareLightFactory.build(this.x8, this.getY(this.y6, 8), '86'), 87: this.squareLightFactory.build(this.x8, this.getY(this.y7, 8), '87'), 88: this.squareLightFactory.build(this.x8, this.getY(this.y8, 8), '88') }; one = [ this.electricLights['11'], this.electricLights['25'], this.electricLights['47'], this.electricLights['52'], this.electricLights['74'], this.electricLights['88'] ]; two = [ this.electricLights['12'], this.electricLights['21'], this.electricLights['45'], this.electricLights['54'], this.electricLights['78'], this.electricLights['87'] ]; three = [ this.electricLights['13'], this.electricLights['26'], this.electricLights['31'], this.electricLights['34'], this.electricLights['37'], this.electricLights['43'], this.electricLights['62'], this.electricLights['56'], this.electricLights['65'], this.electricLights['68'], this.electricLights['73'], this.electricLights['86'] ]; four = [ this.electricLights['41'], this.electricLights['22'], this.electricLights['14'], this.electricLights['58'], this.electricLights['77'], this.electricLights['85'] ]; five = [ this.electricLights['15'], this.electricLights['27'], this.electricLights['48'], this.electricLights['51'], this.electricLights['72'], this.electricLights['84'] ]; six = [ this.electricLights['16'], this.electricLights['23'], this.electricLights['32'], this.electricLights['35'], this.electricLights['38'], this.electricLights['46'], this.electricLights['53'], this.electricLights['61'], this.electricLights['64'], this.electricLights['67'], this.electricLights['76'], this.electricLights['83'] ]; seven = [ this.electricLights['17'], this.electricLights['28'], this.electricLights['44'], this.electricLights['55'], this.electricLights['71'], this.electricLights['82'] ]; eight = [ this.electricLights['18'], this.electricLights['24'], this.electricLights['42'], this.electricLights['57'], this.electricLights['75'], this.electricLights['81'] ]; nine = [ this.electricLights['33'], this.electricLights['66'], this.electricLights['63'], this.electricLights['36'], ]; squareLightBoxes = [ this.squareLightFactory.build(this.x8, '207', '71') ]; x = [ 0, 42, 84, 126, 168, 210, 252, 294 ]; constructor() { console.log('WTF', this.squareLightFactory); } ngOnInit() { this.generate(); // this.turnOnBlocks(Object.values(this.electricLights)); // this.testBlur(); // this.random(); this.turnOnBlocks(this.nine); } getY(n: number, m: number) { return `${n + this.yDiff * (m - 1)}`; } getFirstRow(n: number, m: number) { return n + this.xDiff * (m - 1); } getFirstColumn(n: number, m: number) { return `${n + this.xSpace * (m - 1)}`; } amount(n: number) { return [n, n + 28.5, n + (2 * 28.5), n + (3 * 28.5), n + (4 * 28.5), n + (5 * 28.5), n + (6 * 28.5), n + (7 * 28.5)] } testBlur() { // d3.select('#example').style('filter', 'url(#dope)'); } /** Builds a column of squares */ buildColumn(x: number) { const c1 = d3.select(`#x${x}`); const columnBuilder = (config: { transform: string, y: string }) => { const xyConfigurations = `${x}${config.y}`; // order needs to stay TOP first due to layering const squareFaces: SquareFace[] = [ this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.TOP), this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.LEFT), this.squareFaceFactory.build(xyConfigurations, SquareFaceDirection.RIGHT) ]; // 1. creates a group c1.append('g') // 2. adds id with the x and y coordinates. limits: (1 - 8) examples: c1s1, c5s2, c8c8 .attr('id', `x${x}y${config.y}`) // 3. moves the group by as specific amount - see matrix transformation .attr('transform', config.transform) // 4. adds 3 groups for each side of the square (set of square faces) .selectAll(`#x${x} g`) // 5. builds a square group using the xy coordinates for an id (11, 52, 88) and a position .data(squareFaces).enter().append('g') // 6. adds id from the square face to the group .attr('id', d => d.id) // 7. adds the transform position (relative to the parents transform) .attr('transform', d => d.transform) // 8. adds the xy coordinates as the class .attr('class', d => d.position) // 9. adds the path which draws the actual shape .append('path') // 10. adds the path coordinates to the path object which it will draw from .attr('d', d => d.pathCoordinates) // 11. adds the color to the path .attr('fill', d => d.fill) .exit(); }; this.squareFaceConfig.forEach(columnBuilder); } random() { const rand = Math.floor(Math.random() * Math.floor(10)); const data = rand === 1 ? this.one : rand === 2 ? this.two : rand === 3 ? this.three : rand === 4 ? this.four : rand === 5 ? this.five : rand === 6 ? this.six : rand === 7 ? this.seven : rand === 8 ? this.eight : rand === 9 ? this.nine : []; this.clearLights(); this.turnOnBlocks(data); } clearLights() { d3.select('#Square-Test-On').selectAll('g').remove(); } turnOnBlocks(boxes: SquareLight[]) { // 1. gets all/appends group for each box in the data d3.select('#Square-Test-On').selectAll('g') // 2. adds the data as a set of light coordinates .data(boxes) .enter().append('g') // 3. adds the lights id .attr('id', d => d.id) // 4. adds the transformation matrix .attr('transform', this.squareLightFactory.groupMatrixTransform) // 5. adds class .attr('class', 'lit') // 6. appends a <use> tag .append('use') // 7. adds the image link to the use tag .attr('xlink:href', this.squareLightFactory.usedReference) // 8. adds the x coordinate .attr('x', d => d.x) // 9. adds the y coordinate .attr('y', d => d.y) // 10. adds the width .attr('width', d => d.width) // 11. adds the height .attr('height', d => d.height) // 12. adds the transform matrix .attr('transform', d => d.matrixTransform); } generate() { generateInclusiveRange(8, 1).forEach(i => { console.log('index', i); this.buildColumn(i); }); } }
  2. I will admit that my familiarity with use and defs proves limited at this point in time. In an effort to make it easier for plebs like me, could you export it as a similar svg filter object? When I use Affinity to export a project to SVG it exports anything with a Layer Effect as: <use id="Square-2-On" serif:id="Square 2 On" xlink:href="#_Image1" x="288.16" y="485.161" width="64.275px" height="83.71px" transform="matrix(0.988839,0,0,0.996549,0,0)"/> <defs> <image id="_Image1" width="65px" height="84px" xlink:href="data:image/png;base64,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"/> </defs> Currently I want to use it in d3 and, due to my ineptitude of either d3 or the underlying SVG, I cannot get it to work correctly. It would be nice to export this as a general svg format (I don't know how to explain this...) but as SVG and not an image. If you have the time, and if it doesn't cause misfortune or the project manager to have a stroke, can you add this feature? Example of the same image with out the sweetness: <g id="_87" serif:id="87" transform="matrix(0.522181,0,0,0.522181,216.702,382.197)"> <path d="M223.005,256.375L223.005,327.42L161.455,291.884L161.455,220.839L223.005,256.375Z" style="fill:rgb(121,238,249);"/> </g>
×

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.