Skip to content

Commit fd4548f

Browse files
pierreneterskipjack
pierreneter
authored and
skipjack
committed
fix(splash): fix visualization artifacts (#1762)
Rebuild and clean up visualization in Sketch. Include via an inline SVG rather than an `<img>` tag. Add a `TODO` in regards to an even cleaner setup post build refactoring. Resolves #1752
1 parent aceaf6e commit fd4548f

File tree

4 files changed

+206
-8
lines changed

4 files changed

+206
-8
lines changed

‎src/assets/homepage-modules.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎src/components/SplashViz/SplashViz.jsx

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import Cube from '../Cube/Cube';
44
import TextRotator from '../TextRotater/TextRotater';
5-
import Modules from '../../assets/homepage-modules.svg';
5+
import homeSVG from './SplashVizSVG';
66

77
export default class SplashViz extends React.Component {
88

@@ -18,9 +18,7 @@ export default class SplashViz extends React.Component {
1818
<span> styles </span>
1919
</TextRotator>
2020
</h1>
21-
<div className="splash-viz__modules">
22-
<img src={ Modules } alt="dependency bundling graphic"/>
23-
</div>
21+
<div className="splash-viz__modules" dangerouslySetInnerHTML={{__html: homeSVG.body}}></div>
2422
<Cube className="splash-viz__cube" depth={ 120 } repeatDelay={ 5000 } continuous/>
2523
</section>
2624
);

‎src/components/SplashViz/SplashViz.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,17 @@
2727
position: absolute;
2828
left: 0;
2929
right: 0;
30-
top: 0;
30+
top: 50%; // vertical center
3131
bottom: 0;
3232
width: 75vw;
3333
min-width: 550px;
3434
max-width: map-get($screens, large);
35-
margin: auto;
35+
margin: 0 auto;
36+
transform: translateY(-50%); // vertical center
3637
display: none;
3738

3839
@include break {
39-
display: block;
40+
display: table; // Get height of its child svg
4041
}
4142

4243
img {

‎src/components/SplashViz/SplashVizSVG.js

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
// TODO: Try raw-loader or other approach when build process is refactored
2+
module.exports = {
3+
body: `
4+
<svg viewBox="0 0 1088 615" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
5+
<g stroke-width="1" fill="none" fill-rule="evenodd">
6+
<text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
7+
<tspan x="933.778" y="459">STATIC ASSETS</tspan>
8+
</text>
9+
<g transform="translate(1002, 326)">
10+
<g>
11+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-1"></use>
12+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect>
13+
</g>
14+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
15+
<tspan x="18.891" y="46.7096774">.png</tspan>
16+
</text>
17+
</g>
18+
<g transform="translate(1002, 214)">
19+
<g>
20+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-2"></use>
21+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect>
22+
</g>
23+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
24+
<tspan x="22.532" y="46.7096774">.css</tspan>
25+
</text>
26+
</g>
27+
<g transform="translate(894, 326)">
28+
<g>
29+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-3"></use>
30+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect>
31+
</g>
32+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
33+
<tspan x="21.817" y="46.7096774">.jpg</tspan>
34+
</text>
35+
</g>
36+
<g transform="translate(894, 214)">
37+
<g>
38+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-4"></use>
39+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="84" height="84" rx="3"></rect>
40+
</g>
41+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
42+
<tspan x="29" y="46.7096774">.js</tspan>
43+
</text>
44+
</g>
45+
<g transform="translate(342, 225)" stroke="#7E8C94" stroke-width="4">
46+
<path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7"></path>
47+
<path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7"></path>
48+
<path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" id="Shape_99_" stroke-dasharray="6"></path>
49+
<path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" id="Shape_99_" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
50+
</g>
51+
<text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
52+
<tspan x="24.934" y="562">MODULES WITH DEPENDENCIES</tspan>
53+
</text>
54+
<g transform="translate(228, 335)">
55+
<g>
56+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-5"></use>
57+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
58+
</g>
59+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
60+
<tspan x="12.817" y="38">.jpg</tspan>
61+
</text>
62+
</g>
63+
<g transform="translate(228, 223)">
64+
<g>
65+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-6"></use>
66+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
67+
</g>
68+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
69+
<tspan x="9.891" y="38">.png</tspan>
70+
</text>
71+
</g>
72+
<g transform="translate(302, 414.500000) scale(1, -1) translate(-302, -414.500000) translate(182, 404)">
73+
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
74+
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
75+
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
76+
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
77+
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
78+
</g>
79+
<g transform="translate(116, 391)">
80+
<g>
81+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-7"></use>
82+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
83+
</g>
84+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
85+
<tspan x="8.076" y="38">.sass</tspan>
86+
</text>
87+
</g>
88+
<g transform="translate(116, 279)">
89+
<g>
90+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-8"></use>
91+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
92+
</g>
93+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
94+
<tspan x="8.076" y="38">.sass</tspan>
95+
</text>
96+
</g>
97+
<g transform="translate(182, 201)">
98+
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
99+
<rect fill="#BBDBEC" x="76" y="113" width="2" height="12"></rect>
100+
<rect fill="#BBDBEC" transform="translate(75.304690, 111.704683) rotate(-45) translate(-75.304690, -111.704683) " x="74.3046896" y="108.879683" width="2" height="5.6500001"></rect>
101+
<rect fill="#BBDBEC" x="26" y="109" width="48" height="2"></rect>
102+
<rect fill="#BBDBEC" transform="translate(24.704683, 108.304690) rotate(-45) translate(-24.704683, -108.304690) " x="23.7046835" y="105.47969" width="2" height="5.6500001"></rect>
103+
<rect fill="#BBDBEC" x="22" y="6" width="2" height="101"></rect>
104+
<rect fill="#BBDBEC" transform="translate(21.304690, 4.704683) rotate(-45) translate(-21.304690, -4.704683) " x="20.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
105+
<rect fill="#BBDBEC" x="2" y="2" width="18" height="2"></rect>
106+
<polyline stroke="#BBDBEC" stroke-width="2" points="80 118 77 126.8 74 118"></polyline>
107+
</g>
108+
<g transform="translate(182, 189)">
109+
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
110+
<rect fill="#BBDBEC" x="76" y="6" width="2" height="19"></rect>
111+
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
112+
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
113+
<polyline stroke="#BBDBEC" stroke-width="2" points="80 18 77 26.8000002 74 18"></polyline>
114+
</g>
115+
<g transform="translate(116, 167)">
116+
<g>
117+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-9"></use>
118+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
119+
</g>
120+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
121+
<tspan x="20" y="38">.js</tspan>
122+
</text>
123+
</g>
124+
<g transform="translate(110, 470.500000) scale(1, -1) translate(-190, -470.500000) translate(150, 460)">
125+
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
126+
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
127+
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
128+
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
129+
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
130+
</g>
131+
<g transform="translate(4, 447)">
132+
<g>
133+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-10"></use>
134+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
135+
</g>
136+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
137+
<tspan x="8.076" y="38">.sass</tspan>
138+
</text>
139+
</g>
140+
<g transform="translate(70, 363)">
141+
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
142+
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
143+
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
144+
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
145+
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
146+
</g>
147+
<g transform="translate(4, 335)">
148+
<g>
149+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-11"></use>
150+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
151+
</g>
152+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
153+
<tspan x="15.38" y="38">.cjs</tspan>
154+
</text>
155+
</g>
156+
<g transform="translate(38, 307)">
157+
<rect fill="#BBDBEC" x="0" y="22" width="6" height="2"></rect>
158+
<rect fill="#BBDBEC" x="2" y="6" width="2" height="16"></rect>
159+
<rect fill="#BBDBEC" transform="translate(4.704683, 4.704683) rotate(45) translate(-4.704683, -4.704683) " x="3.70468347" y="1.87968342" width="2" height="5.6500001"></rect>
160+
<rect fill="#BBDBEC" x="6" y="2" width="62" height="2"></rect>
161+
<polyline stroke="#BBDBEC" stroke-width="2" transform="translate(66.400000, 3) rotate(270) translate(-66.400000, -3) " points="69.4000001 -1.4000001 66.4000001 7.4000001 63.4000001 -1.4000001"></polyline>
162+
</g>
163+
<g transform="translate(26, 289)">
164+
<polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline>
165+
<rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect>
166+
<rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect>
167+
</g>
168+
<g transform="translate(110, 246.500000) scale(1, -1) translate(-190, -246.500000) translate(150, 236)">
169+
<rect fill="#BBDBEC" x="0" y="0" width="2" height="6"></rect>
170+
<rect fill="#BBDBEC" x="76" y="6" width="2" height="12"></rect>
171+
<rect fill="#BBDBEC" transform="translate(75.304690, 4.704683) rotate(-45) translate(-75.304690, -4.704683) " x="74.3046896" y="1.87968342" width="2" height="5.6500001"></rect>
172+
<rect fill="#BBDBEC" x="2" y="2" width="72" height="2"></rect>
173+
<polyline stroke="#BBDBEC" stroke-width="2" points="80 12 77 20.8000002 74 12"></polyline>
174+
</g>
175+
<g transform="translate(4, 223)">
176+
<g>
177+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-12"></use>
178+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
179+
</g>
180+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
181+
<tspan x="10.947" y="38">.hbs</tspan>
182+
</text>
183+
</g>
184+
<g transform="translate(32, 177)">
185+
<polyline stroke="#BBDBEC" stroke-width="2" points="6 30 3 38.8000002 0 30"></polyline>
186+
<rect fill="#BBDBEC" x="2" y="0" width="2" height="39"></rect>
187+
<rect fill="#BBDBEC" x="0" y="0" width="6" height="2"></rect>
188+
</g>
189+
<g transform="translate(4, 111)">
190+
<g>
191+
<use fill-opacity="0.1" fill="#526B78" fill-rule="evenodd" xlink:href="#path-13"></use>
192+
<rect stroke="#526B78" stroke-width="4" x="-2" y="-2" width="66" height="66" rx="3"></rect>
193+
</g>
194+
<text font-family="'Source Sans Pro', sans-serif" font-size="22" font-weight="500" fill="#FFFFFF">
195+
<tspan x="20" y="38">.js</tspan>
196+
</text>
197+
</g>
198+
</g>
199+
</svg>`
200+
};

0 commit comments

Comments
 (0)