tweak some svg attribs

master
Ondřej Hruška 4 years ago
parent 0be65da90a
commit e5d7ae7c48
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 8
      .idea/workspace.xml
  2. 284
      images/orb-metal-inksc.svg
  3. 2
      index.html
  4. 11
      script.js

@ -2,11 +2,9 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="ae846324-9595-4559-bb25-c8da4b9670ce" name="Default Changelist" comment="">
<change afterPath="$PROJECT_DIR$/.idea/codeStyles/codeStyleConfig.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/script.js" beforeDir="false" afterPath="$PROJECT_DIR$/script.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/style.css" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -88,7 +86,7 @@
<workItem from="1575580634353" duration="8432000" />
<workItem from="1575636807263" duration="5000" />
<workItem from="1575669235802" duration="6368000" />
<workItem from="1575727237976" duration="3992000" />
<workItem from="1575727237976" duration="6073000" />
</task>
<task id="LOCAL-00001" summary="shading line end tweaks">
<created>1575588833718</created>
@ -124,9 +122,9 @@
<screen x="1920" y="0" width="1600" height="1200" />
</state>
<state x="1920" y="30" width="1408" height="1092" key="dock-window-1/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575583022330" />
<state width="626" height="205" key="javadoc.popup.new" timestamp="1575729648411">
<state width="626" height="205" key="javadoc.popup.new" timestamp="1575733473943">
<screen x="0" y="30" width="1920" height="1170" />
</state>
<state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575729648411" />
<state width="626" height="205" key="javadoc.popup.new/0.30.1920.1170/1920.0.1600.1200@0.30.1920.1170" timestamp="1575733473943" />
</component>
</project>

@ -0,0 +1,284 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="100"
height="100"
viewBox="-50 -50 100 100"
version="1.1"
id="svg8"
enable-background="new"
sodipodi:docname="orb-metal-inksc.svg"
inkscape:version="0.92.4 5da689c313, 2019-01-14">
<defs
id="defs2">
<linearGradient
inkscape:collect="always"
id="linearGradient922">
<stop
id="stop920"
offset="0"
style="stop-color:#000000;stop-opacity:0;" />
<stop
id="stop918"
offset="1"
style="stop-color:#000000;stop-opacity:0.99297422" />
</linearGradient>
<linearGradient
id="linearGradient4653"
inkscape:collect="always">
<stop
id="stop4649"
offset="0"
style="stop-color:#ffffff;stop-opacity:0.84330988" />
<stop
id="stop4651"
offset="1"
style="stop-color:#ffffff;stop-opacity:0;" />
</linearGradient>
<linearGradient
inkscape:collect="always"
id="linearGradient4637">
<stop
style="stop-color:#ffffff;stop-opacity:1;"
offset="0"
id="stop4633" />
<stop
style="stop-color:#ffffff;stop-opacity:0;"
offset="1"
id="stop4635" />
</linearGradient>
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4637"
id="radialGradient4639"
cx="2.2236617"
cy="-95.8965"
fx="2.2236617"
fy="-95.8965"
r="33.125"
gradientTransform="matrix(1.1078691,0,0,0.7627688,-0.94566995,47.164715)"
gradientUnits="userSpaceOnUse" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient4653"
id="radialGradient4645"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.72177816,0,0,0.38047885,0.55112178,40.171783)"
cx="1.1293175"
cy="11.306266"
fx="1.1293175"
fy="11.306266"
r="33.125" />
<radialGradient
inkscape:collect="always"
xlink:href="#linearGradient922"
id="radialGradient924"
cx="-6.7772191e-08"
cy="19.390772"
fx="-6.7772191e-08"
fy="19.390772"
r="50"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(1.1755206,0,0,1.8030383,4.1701369e-7,-18.355162)" />
<linearGradient
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
<linearGradient
gradientTransform="translate(-1.6071431,-12.162378)"
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400-9"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
<linearGradient
gradientTransform="matrix(0.952,0,0,0.84951179,0.57857129,-22.110875)"
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400-6"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
<linearGradient
gradientTransform="matrix(0.936,0,0,0.80651516,-0.83571431,14.12833)"
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400-8"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
<linearGradient
gradientTransform="matrix(0.784,0,0,0.61303033,-0.87857136,26.847611)"
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400-0"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
<linearGradient
gradientTransform="matrix(0.898,0,0,0.82801348,0.18035709,-32.116272)"
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400-6-5"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
<linearGradient
gradientTransform="matrix(0.784,0,0,0.61303033,-2.1285704,-41.545246)"
inkscape:collect="always"
xlink:href="#linearGradient922"
id="linearGradient1400-0-8"
x1="-43.75"
y1="8.0552349"
x2="45.535713"
y2="8.0552349"
gradientUnits="userSpaceOnUse" />
</defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.89803922"
inkscape:pageshadow="2"
inkscape:zoom="2.8"
inkscape:cx="5.2647845"
inkscape:cy="44.864954"
inkscape:document-units="px"
inkscape:current-layer="layer2"
showgrid="false"
units="px"
inkscape:pagecheckerboard="true"
inkscape:window-width="1920"
inkscape:window-height="1139"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<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>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
style="display:inline">
<circle
style="display:inline;opacity:1;fill:#008ed3;fill-opacity:0.81338028;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path4520"
cx="0"
cy="0"
r="50"
mask="none"
inkscape:label="disc"
sodipodi:insensitive="true" />
<circle
inkscape:label="dark"
mask="none"
r="50"
cy="0"
cx="0"
id="circle916"
style="display:inline;opacity:1;fill:url(#radialGradient924);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
sodipodi:insensitive="true" />
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Layer 2"
style="opacity:0.36053132">
<path
style="fill:url(#linearGradient1400);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M -43.75,9.2857139 C -30.010378,16.025483 26.753132,-7.8871183 45.535714,11.964285 15.246713,-2.1819387 -29.821429,19.702381 -43.75,9.2857139 Z"
id="path1392"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;opacity:1;fill:url(#linearGradient1400-9);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M -45.357143,-2.8766642 C -31.617521,3.8631045 25.145989,-20.049496 43.928571,-0.19809327 13.63957,-14.344317 -31.428572,7.5400025 -45.357143,-2.8766642 Z"
id="path1392-0"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;opacity:1;fill:url(#linearGradient1400-6);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m -41.071429,-14.222551 c 13.08012,5.7255132 67.118982,-14.588524 85,2.275477 -28.835129,-12.017384 -71.74,6.5736044 -85,-2.275477 z"
id="path1392-1"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;opacity:1;fill:url(#linearGradient1400-8);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999994px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="M -41.785714,21.6174 C -28.925428,27.053125 24.205217,7.7672504 41.785714,23.777708 13.435209,12.368564 -28.748572,30.018599 -41.785714,21.6174 Z"
id="path1392-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;opacity:1;fill:url(#linearGradient1400-0);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999982px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m -35.178572,32.540035 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.746577,-8.672064 -59.08,4.743688 -70,-1.642045 z"
id="path1392-7"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;opacity:1;fill:url(#linearGradient1400-6-5);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m -39.107144,-24.427576 c 12.33818,5.58062 63.311813,-14.219337 80.178571,2.217893 -27.199522,-11.713264 -67.670714,6.407248 -80.178571,-2.217893 z"
id="path1392-1-2"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
<path
style="display:inline;opacity:1;fill:url(#linearGradient1400-0-8);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.99999982px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m -36.428571,-35.852822 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.7465774,-8.672064 -59.08,4.743688 -70,-1.642045 z"
id="path1392-7-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
<ellipse
ry="13.214285"
rx="28.125"
cy="36.607143"
cx="0.80357033"
id="ellipse4643"
style="opacity:1;fill:url(#radialGradient4645);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
inkscape:label="bottom-highlight"
sodipodi:insensitive="true" />
<ellipse
style="display:inline;opacity:1;fill:url(#radialGradient4639);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path4631"
cx="0.446428"
cy="-23.303572"
rx="33.125"
ry="24.017857"
inkscape:label="top-highlight"
sodipodi:insensitive="true" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 11 KiB

@ -12,7 +12,7 @@
</head>
<body>
<div id="wrap">
<svg version="1.1" baseProfile="full" width="1100" height="1000"
<svg version="1.1" baseProfile="full" width="1100" height="980"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
id="board">

@ -16,6 +16,7 @@ class Board {
constructor() {
this.$boardbg = document.getElementById('boardbg');
this.$orbs = document.getElementById('orbs');
this.$svg = document.getElementById('board');
this.initOrb();
this.initGlyphs();
@ -86,6 +87,12 @@ class Board {
o.classList.add('highlight');
}
highlight(symbol=null) {
if (symbol !== null) {
//this.$svg
}
}
xyToIndex(x, y) {
return y * 11 + x
}
@ -94,8 +101,8 @@ class Board {
const gap = 6;
const xstep = 86+gap;
const ystep = 75+gap;
const xbase = 370;
const ybase = 90;
const xbase = (this.$svg.getAttribute('width') - 5.5 * ystep - gap*2) / 2;
const ybase = (this.$svg.getAttribute('height') - 10 * ystep - gap*2) / 2;
let rx = xbase + xstep * x - y*Math.floor(xstep/2);
let ry = ybase + ystep * y;

Loading…
Cancel
Save