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);
});
}
}
