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>
×