ben.burlingham
/
d3-worldcup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Color scheme pane added.

Browse Source
master
Ben Burlingham 9 years ago
parent 489e5fbc92
commit 3c6eb0b139
11 changed files with 433 additions and 21 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      css/rounds.scss
  2. 32
      css/schemes.scss
  3. 34
      css/style.css
  4. 3
      index.html
  5. 65
      js/bundle.js
  6. 13
      js/diagram.js
  7. 14
      js/index.js
  8. 34
      js/ui.js
  9. 1
      package.json
  10. 249
      res/scheme.svg
  11. 8
      webpack.config.js

1
css/rounds.scss
Unescape View File

@ -18,6 +18,7 @@ $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2;
cursor: pointer;
font-size: 0;
line-height: $roundH;
margin-top: 5px;
opacity: 0.2;
}

32
css/schemes.scss
Unescape View File

@ -0,0 +1,32 @@
$schemeW: 32px;
.schemes {
font-size: 0;
height: 32px;
position: absolute;
right: 0;
top: 160px;
width: 200px;
}
.scheme {
background-image: url('../res/scheme.svg');
background-repeat: no-repeat;
border: 4px solid #fff;
display: inline-block;
height: 40px;
outline: 1px solid #d5d5d5;
width: 40px;
}
.scheme1,
.scheme2,
.scheme3 {
margin-right: 13px;
}
@for $i from 1 through 4 {
.scheme#{$i} {
background-position: -#{($i - 1) * $schemeW} 0;
}
}

34
css/style.css
Unescape View File

@ -133,6 +133,39 @@ body {
margin: 11px 5px;
vertical-align: top;
width: 18px; }
.schemes {
font-size: 0;
height: 32px;
position: absolute;
right: 0;
top: 160px;
width: 200px; }
.scheme {
background-image: url(../res/scheme.svg);
background-repeat: no-repeat;
border: 4px solid #fff;
display: inline-block;
height: 40px;
outline: 1px solid #d5d5d5;
width: 40px; }
.scheme1,
.scheme2,
.scheme3 {
margin-right: 13px; }
.scheme1 {
background-position: -0px 0; }
.scheme2 {
background-position: -32px 0; }
.scheme3 {
background-position: -64px 0; }
.scheme4 {
background-position: -96px 0; }
.rounds {
bottom: 0;
position: absolute;
@ -145,6 +178,7 @@ body {
cursor: pointer;
font-size: 0;
line-height: 40px;
margin-top: 5px;
opacity: 0.2; }
.round-item.active {

3
index.html
Unescape View File

@ -14,6 +14,7 @@
<div class="tourney"></div>
<div class="events"></div>
<div class="sort"></div>
<div class="schemes"></div>
<div class="rounds"></div>
<div class="diagram">
@ -43,7 +44,7 @@
update ribbon hover
// STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
change initState to `foo = foo || "default"`
color scheme pane
toggle sort icon
toggle round icon

65
js/bundle.js
Unescape View File

@ -71,6 +71,7 @@
__webpack_require__(9);
__webpack_require__(10);
__webpack_require__(11);
__webpack_require__(12);
var main = {
changeEvent: function changeEvent(e) {
@ -85,6 +86,12 @@
main.updateUI();
},
changeScheme: function changeScheme(e) {
var target = _ui2.default.findRoot(e.target);
main.setState({ scheme: target.getAttribute(_ui2.default.DATA.SCHEME) });
main.updateUI();
},
changeRound: function changeRound(e) {
var target = _ui2.default.findRoot(e.target);
var r = target.getAttribute(_ui2.default.DATA.ROUND);
@ -122,6 +129,7 @@
_ui2.default.buildTourneyPane();
_ui2.default.buildEventsPane(main.changeEvent);
_ui2.default.buildSortPane(main.changeSort);
_ui2.default.buildSchemePane(main.changeScheme);
_ui2.default.buildRoundsPane(main.changeRound);
},
@ -135,6 +143,7 @@
_ui2.default.updateTourneyPane(state.eventKey);
_ui2.default.updateEventsPane(state.eventKey);
_ui2.default.updateSortPane(state.sort);
_ui2.default.updateSchemePane(state.scheme);
_ui2.default.updateRoundsPane(state.rounds.split(','), main.json.rounds);
},
@ -182,6 +191,10 @@
state.sort = null;
}
if (state.scheme === undefined) {
state.scheme = null;
}
if (state.rounds === undefined) {
state.rounds = Object.values(_ui2.default.ROUND_TYPES);
}
@ -195,6 +208,7 @@
state.eventKey = next.eventKey || state.eventKey;
state.rounds = next.rounds || state.rounds;
state.scheme = next.scheme || state.scheme;
state.sort = next.sort || state.sort || null;
var params = [];
@ -423,17 +437,16 @@
var ribbon = d3.ribbon().radius(innerRadius);
// const color = d3.scaleOrdinal(d3.schemeCategory20);
// const color = d3.scaleOrdinal(d3.schemeCategory10);
var len = data.tourneys[eventKey].teams.length;
// const len = data.tourneys[eventKey].teams.length;
// const color = d3.scaleLinear().domain([0, len]).range(["#edf8b1", "#081d58"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb);
var color = d3.scaleLinear().domain([0, len]).range(["gainsboro", "darkgreen"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb);
// const colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"];
// const colors = ["#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
// const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
var colors = ["#f70000", "#fbad20", "#f5eb13", "#b8d433", "#6bc9c6", "#058bc5", "#34469d", "#7e4d9f", "#c63d96"];
// const color = i => colors[i % colors.length];
// const color = d3.scaleOrdinal(d3.schemeCategory20);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").datum(sortedChords);
@ -581,6 +594,13 @@
FLAG: 'event-flag'
},
SCHEME: {
SCHEME1: 'scheme scheme1',
SCHEME2: 'scheme scheme2',
SCHEME3: 'scheme scheme3',
SCHEME4: 'scheme scheme4'
},
SORT: {
ICON: 'sort-icon',
ITEM: 'sort-item',
@ -615,6 +635,7 @@
ROOT: 'data-root',
EVENT: 'data-event-key',
ROUND: 'data-round-key',
SCHEME: 'data-round-scheme',
SORT: 'data-sort-key'
},
@ -704,6 +725,10 @@
});
},
updateSchemePane: function updateSchemePane() {
var schemePane = document.querySelector('.schemes');
},
updateSortPane: function updateSortPane(sort) {
var sortItems = document.querySelectorAll('.sort-item');
UI.clearActive(sortItems);
@ -807,6 +832,26 @@
});
},
buildSchemePane: function buildSchemePane(onClick) {
var schemePane = document.querySelector('.schemes');
var scheme1 = document.createElement('div');
var scheme2 = document.createElement('div');
var scheme3 = document.createElement('div');
var scheme4 = document.createElement('div');
var scheme5 = document.createElement('div');
scheme1.className = UI.CLASSNAMES.SCHEME.SCHEME1;
scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2;
scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3;
scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4;
schemePane.appendChild(scheme1);
schemePane.appendChild(scheme2);
schemePane.appendChild(scheme3);
schemePane.appendChild(scheme4);
},
buildRoundsPane: function buildRoundsPane(onClick) {
var roundsList = [{ text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM }, { text: 'Round of 16', value: UI.ROUND_TYPES.ROUNDOF16 }, { text: 'Quarterfinals', value: UI.ROUND_TYPES.QUARTERFINAL }, { text: 'Semifinals', value: UI.ROUND_TYPES.SEMIFINAL }, { text: 'Consolation', value: UI.ROUND_TYPES.CONSOLATION }, { text: 'Final', value: UI.ROUND_TYPES.FINAL }];
@ -925,5 +970,11 @@
// removed by extract-text-webpack-plugin
/***/ },
/* 12 */
/***/ function(module, exports) {
// removed by extract-text-webpack-plugin
/***/ }
/******/ ]);

13
js/diagram.js
Unescape View File

@ -158,17 +158,16 @@ const Diagram = {
const ribbon = d3.ribbon()
.radius(innerRadius);
// const color = d3.scaleOrdinal(d3.schemeCategory20);
// const color = d3.scaleOrdinal(d3.schemeCategory10);
const len = data.tourneys[eventKey].teams.length;
// const len = data.tourneys[eventKey].teams.length;
// const color = d3.scaleLinear().domain([0, len]).range(["#edf8b1", "#081d58"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb);
const color = d3.scaleLinear().domain([0, len]).range(["gainsboro", "darkgreen"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb);
// const colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"];
// const colors = ["#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
// const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
const colors = ["#f70000","#fbad20","#f5eb13","#b8d433","#6bc9c6","#058bc5","#34469d","#7e4d9f","#c63d96"];
// const color = i => colors[i % colors.length];
// const color = d3.scaleOrdinal(d3.schemeCategory20);
const color = d3.scaleOrdinal(d3.schemeCategory10);
const g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

14
js/index.js
Unescape View File

@ -9,6 +9,7 @@ require('../css/events.scss');
require('../css/tourney.scss');
require('../css/diagram.scss');
require('../css/sort.scss');
require('../css/schemes.scss');
require('../css/rounds.scss');
const main = {
@ -24,6 +25,12 @@ const main = {
main.updateUI();
},
changeScheme: (e) => {
const target = UI.findRoot(e.target);
main.setState({ scheme: target.getAttribute(UI.DATA.SCHEME) });
main.updateUI();
},
changeRound: (e) => {
const target = UI.findRoot(e.target);
const r = target.getAttribute(UI.DATA.ROUND)
@ -61,6 +68,7 @@ const main = {
UI.buildTourneyPane();
UI.buildEventsPane(main.changeEvent);
UI.buildSortPane(main.changeSort);
UI.buildSchemePane(main.changeScheme);
UI.buildRoundsPane(main.changeRound);
},
@ -74,6 +82,7 @@ const main = {
UI.updateTourneyPane(state.eventKey);
UI.updateEventsPane(state.eventKey);
UI.updateSortPane(state.sort);
UI.updateSchemePane(state.scheme);
UI.updateRoundsPane(state.rounds.split(','), main.json.rounds);
},
@ -117,6 +126,10 @@ const main = {
state.sort = null;
}
if (state.scheme === undefined) {
state.scheme = null;
}
if (state.rounds === undefined) {
state.rounds = Object.values(UI.ROUND_TYPES);
}
@ -130,6 +143,7 @@ const main = {
state.eventKey = next.eventKey || state.eventKey;
state.rounds = next.rounds || state.rounds;
state.scheme = next.scheme || state.scheme;
state.sort = next.sort || state.sort || null;
const params = [];

34
js/ui.js
Unescape View File

@ -12,6 +12,13 @@ const UI = {
FLAG: 'event-flag',
},
SCHEME: {
SCHEME1: 'scheme scheme1',
SCHEME2: 'scheme scheme2',
SCHEME3: 'scheme scheme3',
SCHEME4: 'scheme scheme4',
},
SORT: {
ICON: 'sort-icon',
ITEM: 'sort-item',
@ -46,6 +53,7 @@ const UI = {
ROOT: 'data-root',
EVENT: 'data-event-key',
ROUND: 'data-round-key',
SCHEME: 'data-round-scheme',
SORT: 'data-sort-key',
},
@ -137,6 +145,12 @@ const UI = {
});
},
updateSchemePane: () => {
const schemePane = document.querySelector('.schemes');
},
updateSortPane: (sort) => {
const sortItems = document.querySelectorAll('.sort-item');
UI.clearActive(sortItems);
@ -265,6 +279,26 @@ const UI = {
});
},
buildSchemePane: (onClick) => {
const schemePane = document.querySelector('.schemes');
const scheme1 = document.createElement('div');
const scheme2 = document.createElement('div');
const scheme3 = document.createElement('div');
const scheme4 = document.createElement('div');
const scheme5 = document.createElement('div');
scheme1.className = UI.CLASSNAMES.SCHEME.SCHEME1;
scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2;
scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3;
scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4;
schemePane.appendChild(scheme1);
schemePane.appendChild(scheme2);
schemePane.appendChild(scheme3);
schemePane.appendChild(scheme4);
},
buildRoundsPane: (onClick) => {
const roundsList = [
{ text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM },

1
package.json
Unescape View File

@ -30,6 +30,7 @@
"extend": "^3.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"extsprintf": "^1.0.2",
"file-loader": "^0.9.0",
"forever-agent": "^0.6.1",
"form-data": "^2.0.0",
"generate-function": "^2.0.0",

249
res/scheme.svg
Unescape View File

@ -0,0 +1,249 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
x="0"
y="0"
width="128"
height="32"
viewBox="0 0 128 32"
id="svg3523"
inkscape:version="0.91 r13725"
sodipodi:docname="scheme.svg"
inkscape:export-filename="/Users/tonklin/Development/bb/d3-worldcup/res/scheme.png"
inkscape:export-xdpi="90"
inkscape:export-ydpi="90">
<metadata
id="metadata3548">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3546" />
<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1440"
inkscape:window-height="802"
id="namedview3544"
showgrid="false"
inkscape:zoom="4.6874995"
inkscape:cx="65.440001"
inkscape:cy="-3.5158174"
inkscape:window-x="0"
inkscape:window-y="1"
inkscape:window-maximized="1"
inkscape:current-layer="svg3523" />
<g
id="g4763">
<path
d="m 27.312837,4.6920596 c 2.754127,2.7739766 4.265826,6.0183444 4.619633,9.9099774 l -4.663804,0.406041 -1.21e-4,-0.0012 -1.676447,0.14589 c -0.20904,-2.247323 -1.194133,-4.361983 -2.77415,-5.9661281 l 4.494889,-4.4946073 z"
id="path3526"
inkscape:connector-curvature="0"
style="fill:#818e81;fill-opacity:1" />
<path
d="m 31.936514,14.598033 c 0.325655,3.895636 -0.599089,7.353076 -2.830495,10.561326 l -1.949477,-1.363611 -4.45e-4,6.88e-4 -3.268719,-2.287568 c 1.27855,-1.849291 1.881603,-4.100659 1.70472,-6.356073 l 3.152186,-0.274348 3.19223,-0.280414 z"
id="path3528"
inkscape:connector-curvature="0"
style="fill:#7a9e7a;fill-opacity:1" />
<path
d="m 23.887378,21.504864 1.381048,0.967721 0.002,-0.0028 3.835571,2.685561 c -2.255473,3.192071 -5.186444,5.246466 -9.010001,6.287758 l -1.214197,-4.534932 0.0033,-9.71e-4 -0.433491,-1.627199 c 1.680572,-0.458339 3.180217,-1.326683 4.382319,-2.528831 0.386004,-0.385899 0.739811,-0.804034 1.053412,-1.246275 z"
id="path3530"
inkscape:connector-curvature="0"
style="fill:#6a9a6a;fill-opacity:1" />
<path
d="m 11.946365,24.692971 c 2.042388,0.936739 4.362297,1.137758 6.505282,0.591003 l 1.033228,3.859437 -0.0091,0.0023 0.616199,2.30132 c -3.731051,0.976983 -7.297272,0.663402 -10.8433904,-0.972898 l 1.0068144,-2.158139 -0.0017,-7.69e-4 1.692626,-3.622259 z"
id="path3532"
inkscape:connector-curvature="0"
style="fill:#589358;fill-opacity:1" />
<path
d="m 7.3026246,20.049521 c 0.4784705,1.013102 1.1257749,1.925734 1.9218504,2.725764 0.796076,0.796026 1.71277,1.44329 2.721931,1.921731 l -0.707655,1.519612 0,0 -0.01966,0.04215 -0.96135,2.064506 -0.0014,-6.47e-4 -1.0037405,2.151506 C 7.4674944,29.633945 5.9718544,28.600701 4.685295,27.310137 3.3986951,26.023698 2.3613821,24.528112 1.5210958,22.743131 l 4.2577767,-1.98604 7.686e-4,0.0015 1.5229835,-0.709106 z"
id="path3534"
inkscape:connector-curvature="0"
style="fill:#509450;fill-opacity:1" />
<path
d="m 0.56819964,11.852207 4.53922046,1.21408 -0.00113,0.0046 1.6213957,0.433626 C 6.1647984,15.687487 6.3658701,18.00725 7.3026271,20.049511 L 3.6761369,21.742072 3.675692,21.741101 1.5210983,22.747125 C -0.11522565,19.197234 -0.42886673,15.635281 0.56819964,11.852207 Z"
id="path3536"
inkscape:connector-curvature="0"
style="fill:#3a833a;fill-opacity:1" />
<path
d="m 6.8402527,2.903034 1.3663652,1.9502854 6.472e-4,-4.853e-4 1.0709666,1.5301281 0.2517542,0.3594068 -1.214e-4,1.213e-4 0.9651115,1.3788586 C 10.052708,8.4348895 9.6345464,8.7927189 9.2485826,9.1746948 8.0464806,10.376722 7.1780014,11.876272 6.7316878,13.512572 L 2.8934879,12.482119 0.56819964,11.860215 C 1.5934589,8.0891536 3.6479819,5.1584067 6.8402527,2.903034 Z"
id="path3538"
inkscape:connector-curvature="0"
style="fill:#1b871b;fill-opacity:1" />
<path
d="m 15.605012,0.0038353 c 0.598604,-0.01520785 1.196561,0.01678526 1.793223,0.0608314 l -0.208352,2.371737 0.0033,2.427e-4 -0.345798,3.9720397 c -2.255513,-0.1809168 -4.507023,0.4261838 -6.35647,1.704614 L 9.5245657,6.732581 9.5219366,6.7343202 6.8362483,2.8949851 C 9.0207742,1.3632796 11.555224,0.36522398 14.213286,0.0878425 14.824873,0.02405851 14.989379,0.02777958 15.605012,0.0038353 Z"
id="path3540"
inkscape:connector-curvature="0"
style="fill:#058105;fill-opacity:1" />
<path
d="M 22.809899,9.1826627 C 21.205694,7.5987004 19.090861,6.6177132 16.839352,6.4086861 l 0.349802,-3.9720397 6.48e-4,8.09e-5 0.208433,-2.3720606 c 3.891876,0.35782939 7.136447,1.8694331 9.910597,4.619344 l -4.498933,4.498652 z"
id="path3542"
inkscape:connector-curvature="0"
style="fill:#aaaaaa;fill-opacity:1" />
</g>
<g
id="g4783">
<path
style="fill:#edf8b1;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3605"
d="m 59.312838,4.6920596 c 2.754127,2.7739766 4.265826,6.0183444 4.619633,9.9099774 l -4.663804,0.406041 -1.21e-4,-0.0012 -1.676447,0.14589 c -0.20904,-2.247323 -1.194133,-4.361983 -2.77415,-5.9661281 l 4.494889,-4.4946073 z" />
<path
style="fill:#c7e9b4;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3607"
d="m 63.936515,14.598033 c 0.325655,3.895636 -0.599089,7.353076 -2.830495,10.561326 l -1.949477,-1.363611 -4.45e-4,6.88e-4 -3.268719,-2.287568 c 1.27855,-1.849291 1.881603,-4.100659 1.70472,-6.356073 l 3.152186,-0.274348 3.19223,-0.280414 z" />
<path
style="fill:#7fcdbb;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3609"
d="m 55.887379,21.504864 1.381048,0.967721 0.002,-0.0028 3.835571,2.685561 c -2.255473,3.192071 -5.186444,5.246466 -9.010001,6.287758 l -1.214197,-4.534932 0.0033,-9.71e-4 -0.433491,-1.627199 c 1.680572,-0.458339 3.180217,-1.326683 4.382319,-2.528831 0.386004,-0.385899 0.739811,-0.804034 1.053412,-1.246275 z" />
<path
style="fill:#41b6c4;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3611"
d="m 43.946366,24.692971 c 2.042388,0.936739 4.362297,1.137758 6.505282,0.591003 l 1.033228,3.859437 -0.0091,0.0023 0.616199,2.30132 c -3.731051,0.976983 -7.297272,0.663402 -10.84339,-0.972898 l 1.006814,-2.158139 -0.0017,-7.69e-4 1.692626,-3.622259 z" />
<path
style="fill:#1d91c0;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3613"
d="m 39.302626,20.049521 c 0.47847,1.013102 1.125774,1.925734 1.92185,2.725764 0.796076,0.796026 1.71277,1.44329 2.721931,1.921731 l -0.707655,1.519612 0,0 -0.01966,0.04215 -0.96135,2.064506 -0.0014,-6.47e-4 -1.003741,2.151506 c -1.785106,-0.840198 -3.280746,-1.873442 -4.567305,-3.164006 -1.2866,-1.286439 -2.323913,-2.782025 -3.164199,-4.567006 l 4.257776,-1.98604 7.69e-4,0.0015 1.522984,-0.709106 z" />
<path
style="fill:#225ea8;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3615"
d="m 32.568201,11.852207 4.53922,1.21408 -0.0011,0.0046 1.621396,0.433626 c -0.562888,2.182974 -0.361816,4.502737 0.574941,6.544998 l -3.62649,1.692561 -4.45e-4,-9.71e-4 -2.154594,1.006024 C 31.884775,19.197234 31.571134,15.635281 32.568201,11.852207 Z" />
<path
style="fill:#253494;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3617"
d="m 38.840254,2.903034 1.366365,1.9502854 6.47e-4,-4.853e-4 1.070967,1.5301281 0.251754,0.3594068 -1.22e-4,1.213e-4 0.965112,1.3788586 c -0.442268,0.3135406 -0.86043,0.67137 -1.246393,1.0533459 -1.202102,1.2020272 -2.070582,2.7015772 -2.516895,4.3378772 l -3.8382,-1.030453 -2.325288,-0.621904 C 33.59346,8.0891536 35.647983,5.1584067 38.840254,2.903034 Z" />
<path
style="fill:#081d58;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3619"
d="m 47.605013,0.0038353 c 0.598604,-0.01520785 1.196561,0.01678526 1.793223,0.0608314 l -0.208352,2.371737 0.0033,2.427e-4 -0.345798,3.9720397 c -2.255513,-0.1809168 -4.507023,0.4261838 -6.35647,1.704614 L 41.524567,6.732581 41.521967,6.734321 38.836278,2.8949859 C 41.020775,1.3632796 43.555225,0.36522398 46.213287,0.0878425 46.824874,0.02405851 46.98938,0.02777958 47.605013,0.0038353 Z" />
<path
style="fill:#ffffcc;fill-opacity:1"
inkscape:connector-curvature="0"
id="path3621"
d="M 54.8099,9.1826627 C 53.205695,7.5987004 51.090862,6.6177132 48.839353,6.4086861 l 0.349802,-3.9720397 6.48e-4,8.09e-5 0.208433,-2.3720606 c 3.891876,0.35782939 7.136447,1.8694331 9.910597,4.619344 L 54.8099,9.1826627 Z" />
</g>
<g
id="g4803">
<path
d="m 91.312838,4.6920596 c 2.754127,2.7739766 4.265826,6.0183444 4.619633,9.9099774 l -4.663804,0.406041 -1.21e-4,-0.0012 -1.676447,0.14589 c -0.20904,-2.247323 -1.194133,-4.361983 -2.77415,-5.9661281 l 4.494889,-4.4946073 z"
id="path3625"
inkscape:connector-curvature="0"
style="fill:#df0020;fill-opacity:1" />
<path
d="m 95.936515,14.598033 c 0.325655,3.895636 -0.599089,7.353076 -2.830495,10.561326 l -1.949477,-1.363611 -4.45e-4,6.88e-4 -3.268719,-2.287568 c 1.27855,-1.849291 1.881603,-4.100659 1.70472,-6.356073 l 3.152186,-0.274348 3.19223,-0.280414 z"
id="path3627"
inkscape:connector-curvature="0"
style="fill:#b70048;fill-opacity:1" />
<path
d="m 87.887379,21.504864 1.381048,0.967721 0.002,-0.0028 3.835571,2.685561 c -2.255473,3.192071 -5.186444,5.246466 -9.010001,6.287758 l -1.214197,-4.534932 0.0033,-9.71e-4 -0.433491,-1.627199 c 1.680572,-0.458339 3.180217,-1.326683 4.382319,-2.528831 0.386004,-0.385899 0.739811,-0.804034 1.053412,-1.246275 z"
id="path3629"
inkscape:connector-curvature="0"
style="fill:#9f0060;fill-opacity:1" />
<path
d="m 75.946366,24.692971 c 2.042388,0.936739 4.362297,1.137758 6.505282,0.591003 l 1.033228,3.859437 -0.0091,0.0023 0.616199,2.30132 c -3.731051,0.976983 -7.297272,0.663402 -10.84339,-0.972898 l 1.006814,-2.158139 -0.0017,-7.69e-4 1.692626,-3.622259 z"
id="path3631"
inkscape:connector-curvature="0"
style="fill:#800080;fill-opacity:1" />
<path
d="m 71.302626,20.049521 c 0.47847,1.013102 1.125774,1.925734 1.92185,2.725764 0.796076,0.796026 1.71277,1.44329 2.721931,1.921731 l -0.707655,1.519612 0,0 -0.01966,0.04215 -0.96135,2.064506 -0.0014,-6.47e-4 -1.003741,2.151506 c -1.785106,-0.840198 -3.280746,-1.873442 -4.567305,-3.164006 -1.2866,-1.286439 -2.323913,-2.782025 -3.164199,-4.567006 l 4.257777,-1.98604 7.68e-4,0.0015 1.522984,-0.709106 z"
id="path3633"
inkscape:connector-curvature="0"
style="fill:#70008f;fill-opacity:1" />
<path
d="m 64.568201,11.852207 4.53922,1.21408 -0.0011,0.0046 1.621396,0.433626 c -0.562888,2.182974 -0.361816,4.502737 0.574941,6.544998 l -3.62649,1.692561 -4.45e-4,-9.71e-4 -2.154594,1.006024 C 63.884775,19.197234 63.571134,15.635281 64.568201,11.852207 Z"
id="path3635"
inkscape:connector-curvature="0"
style="fill:#5000af;fill-opacity:1" />
<path
d="m 70.840254,2.903034 1.366365,1.9502854 6.47e-4,-4.853e-4 1.070967,1.5301281 0.251754,0.3594068 -1.22e-4,1.213e-4 0.965112,1.3788586 c -0.442268,0.3135406 -0.86043,0.67137 -1.246393,1.0533459 -1.202102,1.2020272 -2.070582,2.7015772 -2.516895,4.3378772 l -3.8382,-1.030453 -2.325288,-0.621904 C 65.59346,8.0891536 67.647983,5.1584067 70.840254,2.903034 Z"
id="path3637"
inkscape:connector-curvature="0"
style="fill:#2800d7;fill-opacity:1" />
<path
d="m 79.605013,0.0038353 c 0.598604,-0.01520785 1.196561,0.01678526 1.793223,0.0608314 l -0.208352,2.371737 0.0033,2.427e-4 -0.345798,3.9720397 c -2.255513,-0.1809168 -4.507023,0.4261838 -6.35647,1.704614 L 73.524567,6.732581 73.521967,6.734321 70.836278,2.8949859 C 73.020775,1.3632796 75.555225,0.36522398 78.213287,0.0878425 78.824874,0.02405851 78.98938,0.02777958 79.605013,0.0038353 Z"
id="path3639"
inkscape:connector-curvature="0"
style="fill:#0000ff;fill-opacity:1" />
<path
d="M 86.8099,9.1826627 C 85.205695,7.5987004 83.090862,6.6177132 80.839353,6.4086861 l 0.349802,-3.9720397 6.48e-4,8.09e-5 0.208433,-2.3720606 c 3.891876,0.35782939 7.136447,1.8694331 9.910597,4.619344 L 86.8099,9.1826627 Z"
id="path3641"
inkscape:connector-curvature="0"
style="fill:#ff0000;fill-opacity:1" />
</g>
<g
id="g4647"
transform="translate(-32.000127,0)">
<path
d="m 155.31284,4.6920596 c 2.75412,2.7739766 4.26582,6.0183444 4.61963,9.9099774 l -4.6638,0.406041 -1.3e-4,-0.0012 -1.67644,0.14589 c -0.20904,-2.247323 -1.19414,-4.361983 -2.77415,-5.9661281 l 4.49489,-4.4946073 z"
id="path3665"
inkscape:connector-curvature="0"
style="fill:#fbad20" />
<path
d="m 159.93651,14.598033 c 0.32566,3.895636 -0.59909,7.353076 -2.83049,10.561326 l -1.94948,-1.363611 -4.4e-4,6.88e-4 -3.26872,-2.287568 c 1.27855,-1.849291 1.8816,-4.100659 1.70472,-6.356073 l 3.15218,-0.274348 3.19223,-0.280414 z"
id="path3667"
inkscape:connector-curvature="0"
style="fill:#f5eb13" />
<path
d="m 151.88738,21.504864 1.38105,0.967721 0.002,-0.0028 3.83557,2.685561 c -2.25548,3.192071 -5.18645,5.246466 -9.01,6.287758 l -1.2142,-4.534932 0.003,-9.71e-4 -0.43349,-1.627199 c 1.68057,-0.458339 3.18021,-1.326683 4.38232,-2.528831 0.386,-0.385899 0.73981,-0.804034 1.05341,-1.246275 z"
id="path3669"
inkscape:connector-curvature="0"
style="fill:#b8d433" />
<path
d="m 139.94637,24.692971 c 2.04238,0.936739 4.36229,1.137758 6.50528,0.591003 l 1.03322,3.859437 -0.009,0.0023 0.6162,2.30132 c -3.73105,0.976983 -7.29727,0.663402 -10.84339,-0.972898 l 1.00682,-2.158139 -0.002,-7.69e-4 1.69262,-3.622259 z"
id="path3671"
inkscape:connector-curvature="0"
style="fill:#6bc9c6" />
<path
d="m 135.30262,20.049521 c 0.47848,1.013102 1.12578,1.925734 1.92185,2.725764 0.79608,0.796026 1.71277,1.44329 2.72194,1.921731 l -0.70766,1.519612 0,0 -0.0197,0.04215 -0.96135,2.064506 -0.001,-6.47e-4 -1.00374,2.151506 c -1.78511,-0.840198 -3.28075,-1.873442 -4.56731,-3.164006 -1.28659,-1.286439 -2.32391,-2.782025 -3.16419,-4.567006 l 4.25777,-1.98604 7.7e-4,0.0015 1.52298,-0.709106 z"
id="path3673"
inkscape:connector-curvature="0"
style="fill:#058bc5" />
<path
d="m 128.5682,11.852207 4.53922,1.21408 -10e-4,0.0046 1.6214,0.433626 c -0.56289,2.182974 -0.36182,4.502737 0.57494,6.544998 l -3.62649,1.692561 -4.5e-4,-9.71e-4 -2.15459,1.006024 c -1.63633,-3.549891 -1.94997,-7.111844 -0.9529,-10.894918 z"
id="path3675"
inkscape:connector-curvature="0"
style="fill:#34469d" />
<path
d="m 134.84025,2.903034 1.36637,1.9502854 6.5e-4,-4.853e-4 1.07096,1.5301281 0.25176,0.3594068 -1.3e-4,1.213e-4 0.96512,1.3788586 c -0.44227,0.3135406 -0.86043,0.67137 -1.2464,1.0533459 -1.2021,1.2020272 -2.07058,2.7015772 -2.51689,4.3378772 l -3.8382,-1.030453 -2.32529,-0.621904 c 1.02526,-3.7710614 3.07978,-6.7018083 6.27205,-8.957181 z"
id="path3677"
inkscape:connector-curvature="0"
style="fill:#7e4d9f" />
<path
d="m 143.60501,0.0038353 c 0.59861,-0.01520785 1.19656,0.01678526 1.79322,0.0608314 l -0.20835,2.371737 0.003,2.427e-4 -0.3458,3.9720397 c -2.25551,-0.1809168 -4.50702,0.4261838 -6.35647,1.704614 l -0.96634,-1.3807191 -0.003,0.00174 -2.68569,-3.8393351 c 2.18452,-1.5317055 4.71897,-2.52976112 7.37704,-2.8071426 0.61158,-0.06378399 0.77609,-0.06006292 1.39172,-0.0840072 z"
id="path3679"
inkscape:connector-curvature="0"
style="fill:#c63d96" />
<path
d="m 150.8099,9.1826627 c -1.60421,-1.5839623 -3.71904,-2.5649495 -5.97055,-2.7739766 l 0.3498,-3.9720397 6.5e-4,8.09e-5 0.20843,-2.3720606 c 3.89188,0.35782939 7.13645,1.8694331 9.9106,4.619344 l -4.49893,4.498652 z"
id="path3681"
inkscape:connector-curvature="0"
style="fill:#f70000;fill-opacity:1" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

8
webpack.config.js
Unescape View File

@ -19,12 +19,8 @@ module.exports = {
loader: ExtractTextPlugin.extract('css!sass?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'),
},
{
test: /\.png$/,
loader: "file?name=[path][name].[ext]"
},
{
test : /\.woff2?$/,
loader : 'file-loader'
test : /\.svg$/,
loader : 'file-loader?name=../[path][name].[ext]'
}
]
},

Write Preview
Loading…
Cancel
Save