Replace generate_theme.py with an interactive website

This commit is contained in:
Lonami Exo 2017-05-09 20:51:36 +02:00
parent 69397fcb97
commit 7b3b1f7a09
4 changed files with 332 additions and 407 deletions

View file

@ -1,19 +0,0 @@
There are currently two ways to create a new theme for Klooni:
The easy way
============
1. Copy the ``template.svg`` and paste it under this directory.
2. Name the copied file the way you wish to call the theme (e.g. `mytheme.svg`).
3. Modify the file with a .svg editor, preferrably Inkscape.
4. When you're done, run ``python3 generate_theme.py`` and follow the wizard.
5. Done!
The "hard" way
==============
1. Go into ``Klooni/android/assets/themes``.
2. Copy any theme file.
3. Modify the hexadecimal values of the colors with a text editor.
4. Remember to add your new theme filename to the ``theme.list`` file.
5. Done!

332
themes/create-theme.html Normal file
View file

@ -0,0 +1,332 @@
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #fff;
background-color: #070707;
}
#mainDiv {
width: 1000px;
padding: 10px;
margin: 20px auto;
border-radius: 4px;
background-color: #171717;
}
canvas {
border: 2px solid #077;
border-radius: 2px;
margin: 10px;
}
td {
vertical-align: top;
}
code {
color: #ffccaa;
}
</style>
</head>
<body>
<div id="mainDiv">
<table>
<tr>
<td>
<h1>Game elements</h1>
<p><i>Touch any element to modify its color using the color property.</i></p>
<canvas id="screenCanvas" width="400" height="400"></canvas>
<h2>More information</h2>
<p>Once you're done with the theme, if you really think it should be
included, feel free to make a pull request. I will check it out, and
if I like it enough, it will be included in the game :)</p>
</td>
<td style="width:100%;">
<h1>Theme properties</h1>
<p><i>Change the theme name, price, shape and elements' color.</i></p>
<label for="themeName" autocomplete="off">Theme name:</label>
<input id="themeName" type="text" placeholder="Name..."
onchange="updateJson()">
<br />
<label for="themePrice">Theme name:</label>
<input id="themePrice" type="number" min="0" max="1000"
placeholder="Price..." onchange="updateJson()">
<br />
<label for="cellTexture">Cell texture:</label>
<select id="cellTexture" onchange="updateJson()">
<option value="default.png">Default</option>
<option value="circle.png">Circle</option>
<option value="bubble.png">Bubble</option>
</select>
<br />
<label for="pieceColor">Piece color:</label>
<input id="pieceColor" type="color" onchange="updateColor()">
<input id="autotriggerColor" type="checkbox">
<label for="autotriggerColor">Auto-trigger color selection</label>
<p><b>Generated JSON</b></p>
<button id="copyJson" type="submit" formaction="#">Copy JSON</button>
<br />
<textarea id="generatedJson" rows="26" cols="56" readonly></textarea>
</td>
</tr>
</table>
<p>Once you're done, copy the generated JSON, and with your file explorer
go to <code>../android/assets/themes</code>. There, create a new
<code>*.theme</code> file and paste the copied JSON in it. Add the name of the
new file (without the extension) to the <code>theme.list</code>, and all done!
<br />
You can also do this manually without using this interactive site. Just copy
any existing type and modify it at your will.</p>
</div>
<script>
// Enhancing prototypes
CanvasRenderingContext2D.prototype.clear = function() {
// http://stackoverflow.com/a/9722502/4759433
this.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.beginPath(); // Clear strokes
};
String.prototype.format = function() {
// http://stackoverflow.com/a/4673436/4759433
var args = arguments;
return this.replace(/{(\d+)}/g, function(match, number) {
return typeof args[number] != 'undefined' ? args[number] : match;
});
};
// Retrieving HTML elements
canvas = document.getElementById('screenCanvas');
c = canvas.getContext('2d');
themeName = document.getElementById('themeName');
themePrice = document.getElementById('themePrice');
cellTexture = document.getElementById('cellTexture');
pieceColor = document.getElementById('pieceColor');
autotriggerColor = document.getElementById('autotriggerColor');
generatedJson = document.getElementById('generatedJson');
copyJson = document.getElementById('copyJson');
// Declare a prototype (box) to render the selectable elements
function Box(x, y, w, h, color, text) {
this.x = x; this.y = y;
this.w = w; this.h = h;
this.text = text;
this.selected = false;
this.updateColor = function(color) {
this.color = color;
this.jsonColor = color.substring(1) + 'ff';
}
this.updateColor(color);
this.draw = function() {
c.fillStyle = this.color;
if (this.text) {
c.font = "20px Georgia";
// Arbitrary but nice
var x = this.x + this.w * 0.5 - text.length * 5;
var y = this.y + this.h * 0.5 + 6;
c.fillText(this.text, x, y);
} else {
c.fillRect(this.x, this.y, this.w, this.h);
}
if (this.selected) {
c.rect(this.x, this.y, this.w, this.h);
c.stroke();
}
}
this.inBounds = function(x, y) {
return x > this.x && y > this.y &&
x < (this.x + this.w) && y < (this.y + this.h);
}
}
var background = new Box(0, 0, 400, 400, '#ffffff');
var band = new Box(0, 20, 200, 40, '#87ceeb');
var text = new Box(20, 25, 160, 30, '#111111', 'text');
var playButton = new Box(20, 140, 160, 50, '#00ff33');
var starButton = new Box(20, 200, 50, 50, '#ffd700');
var timerButton = new Box(75, 200, 50, 50, '#2389fc');
var paletteButton = new Box(130, 200, 50, 50, '#d94848');
var foreground = new Box(40, 145, 120, 40, '#ffffff', 'play');
var emptyCell = new Box(200, 100, 200, 200, '#e6e6e6');
var piece3x3 = new Box(200, 100, 60, 60, '#4cd4ae');
var piece2x2 = new Box(260, 100, 40, 40, '#98dc53');
var piece5x1 = new Box(200, 280, 100, 20, '#da6554');
var piece4x1 = new Box(200, 260, 80, 20, '#e66a82');
var piece3x1 = new Box(200, 240, 60, 20, '#ec9548');
var piece2x1 = new Box(200, 220, 40, 20, '#fec63d');
var pieceLL = new Box(340, 240, 60, 60, '#57cb84');
var pieceL = new Box(340, 240, 40, 40, '#5abee2');
var piece1x1 = new Box(340, 240, 20, 20, '#7988bf');
var bonus = new Box(300, 200, 60, 30, '#4d4d4d', '+30');
var currentScore = new Box(220, 20, 80, 30, '#ffcc00', 'current');
var highScore = new Box(310, 20, 80, 30, '#65d681', 'high');
// They're ordered so those appearing last receive the touch first
var screenElements = [
background, band, text,
playButton, starButton, timerButton, paletteButton,
foreground, emptyCell,
piece3x3, piece2x2,
piece5x1, piece4x1, piece3x1, piece2x1,
pieceLL, pieceL, piece1x1,
bonus, currentScore, highScore];
// Rendering
function renderElements() {
c.clear();
for (var i = 0; i != screenElements.length; ++i) {
screenElements[i].draw();
if (canvas.mouseDown) {
screenElements[i].selected = false;
}
}
// Selection works backwards
anySelected = false;
if (canvas.mouseDown) {
for (var i = screenElements.length; i--; ) {
screenElements[i].selected =
screenElements[i].inBounds(canvas.mouseX, canvas.mouseY);
if (screenElements[i].selected) {
pieceColor.value = screenElements[i].color;
anySelected = true;
break;
}
}
}
canvas.style.cursor = anySelected ? "crosshair" : "default";
}
// Once always
renderElements();
// Render loop (on mouse move), mouse down selects
canvas.addEventListener('mousedown', function(e) {
canvas.mouseDown = true;
renderElements();
}, false);
canvas.addEventListener('mouseup', function(e) {
renderElements();
canvas.mouseDown = false;
if (autotriggerColor.checked)
pieceColor.click();
}, false);
canvas.addEventListener('mousemove', function(e) {
var rect = canvas.getBoundingClientRect();
canvas.mouseX = e.clientX - rect.left;
canvas.mouseY = e.clientY - rect.top;
renderElements();
}, false);
// Event for changing the selected element's color
function updateColor() {
for (var i = screenElements.length; i--; ) {
if (screenElements[i].selected) {
screenElements[i].updateColor(pieceColor.value);
renderElements();
break;
}
}
updateJson();
}
// JSON related (generating and copying the result)
function updateJson() {
var base = `{
"name": "{0}",
"price": {1},
"colors": {
"background": "{2}",
"foreground": "{3}",
"buttons": [
"{4}",
"{5}",
"{6}",
"{7}"
],
"empty_cell": "{8}",
"cells": [
"{9}", "{10}", "{11}",
"{12}", "{13}", "{14}", "{15}",
"{16}", "{17}"
],
"current_score": "{18}",
"high_score": "{19}",
"bonus": "{20}",
"band": "{21}",
"text": "{22}"
},
"cell_texture": "{23}"
}`;
var cell_texture = cellTexture.options[cellTexture.selectedIndex].value;
generatedJson.innerHTML = base.format(
themeName.value,
themePrice.value,
background.jsonColor,
foreground.jsonColor,
playButton.jsonColor,
starButton.jsonColor,
timerButton.jsonColor,
paletteButton.jsonColor,
emptyCell.jsonColor,
piece1x1.jsonColor, piece2x2.jsonColor, piece3x3.jsonColor,
piece2x1.jsonColor, piece3x1.jsonColor, piece4x1.jsonColor, piece5x1.jsonColor,
pieceL.jsonColor, pieceLL.jsonColor,
currentScore.jsonColor,
highScore.jsonColor,
bonus.jsonColor,
band.jsonColor,
text.jsonColor,
cell_texture
);
}
// Once always
updateJson();
copyJson.addEventListener('click', function(e) {
generatedJson.select();
try {
var successful = document.execCommand('copy');
if (successful) copyJson.innerHTML = 'Copied!';
else copyJson.innerHTML = 'Copy failed';
} catch (err) {
answer.innerHTML = 'Unsupported browser';
}
setTimeout(function() {
copyJson.innerHTML = 'Copy JSON';
}, 2000);
});
</script>
</body>
</html>

View file

@ -1,130 +0,0 @@
#!/usr/bin/env python3
# Generates a theme from `theme.svg`
import re
import os
import subprocess
group_id_re = \
re.compile('<g[\S\s]+?id="export_(\w+)"[\S\s]+?>')
fill_re = \
re.compile('fill:#([0-9a-f]+)')
template = '''{{
"name": "{name}",
"price": {price},
"colors": {{
"background": "{background}",
"foreground": "{foreground}",
"buttons": [
"{button_0}",
"{button_1}",
"{button_2}",
"{button_3}"
],
"empty_cell": "{empty_cell}",
"cells": [
"{cell_0}", "{cell_1}", "{cell_2}",
"{cell_3}", "{cell_4}", "{cell_5}", "{cell_6}",
"{cell_7}", "{cell_8}"
],
"current_score": "{current_score}",
"high_score": "{high_score}",
"bonus": "{bonus}",
"band": "{band}",
"text": "{text}"
}},
"cell_texture": "{cell_tex}"
}}
'''
out_dir = '../android/assets/themes/'
theme_list = os.path.join(out_dir, 'theme.list')
def price_ok(price):
try:
price = int(price)
if price < 0:
raise ValueError('Price must be ≥ 0.')
except:
print('Invalid price detected. Using 0.')
return False
return True
def main():
# Look for all the files which are not called 'template.svg'
files = [f for f in os.listdir()
if f.endswith('.svg') and f != 'template.svg']
if not files:
print('No .svg files were found. '
'Please see CREATING-THEMES.txt for more information')
return
# Work on all the files to generate the corresponding themes
for filename in files:
work(filename)
print('Updating theme.list…')
themes = []
with open(theme_list, 'r', encoding='utf-8') as f:
themes = [line.strip() for line in f]
added_names = [os.path.splitext(f)[0] for f in files]
added_count = 0
for name in added_names:
if name not in themes:
themes.append(name)
added_count += 1
with open(theme_list, 'w', encoding='utf-8') as f:
f.write('\n'.join(themes))
f.write('\n')
print('Added {} new theme(s), updated {}.'.format(
added_count, len(files) - added_count))
def work(filename):
name = os.path.splitext(filename)[0]
with open(filename, 'r', encoding='utf-8') as f:
xml = f.read().replace('\n', '')
replacements = {}
for m in group_id_re.finditer(xml):
f = fill_re.search(m.group(0))
if not f:
raise ValueError(
'Error: The object %s missing the fill attribute' % m.group(1))
# Append 'ff' because the themes require the alpha to be set
replacements[m.group(1)] = f.group(1) + 'ff'
replacements['name'] = input('Enter theme name for "{}": '.format(name))
replacements['price'] = input('Enter theme price: ')
replacements['cell_tex'] = \
input('Enter cell texture (default "basic.png"): ')
if not replacements['price'] or not price_ok(replacements['price']):
print('Invalid price detected. Using 0.')
replacements['price'] = 0
if not replacements['cell_tex']:
print('No texture specified. Using default "basic.png" texture.')
replacements['cell_tex'] = 'basic.png'
output = os.path.join(out_dir, name+'.theme')
print('Saving theme to {}'.format(output))
with open(output, 'w', encoding='utf-8') as f:
f.write(template.format_map(replacements))
print('Done!')
if __name__ == '__main__':
main()

View file

@ -1,258 +0,0 @@
<?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"
version="1.1"
id="svg2"
viewBox="0 0 800.00001 700.00001"
height="746.66669"
width="853.33331">
<defs
id="defs4" />
<metadata
id="metadata7">
<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
transform="translate(0,-352.36216)"
id="layer1">
<g
style="fill:#e3e3e3;fill-opacity:1"
id="export_empty_cell"
transform="translate(0,-199.99998)">
<rect
y="552.36218"
x="400"
height="700"
width="400"
id="rect4260"
style="opacity:1;fill:#e3e3e3;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#7988bf;fill-opacity:1"
id="export_cell_0"
transform="translate(0,-199.99998)">
<rect
y="570.0614"
x="431.72415"
height="72.314049"
width="68.965515"
id="rect4262"
style="opacity:1;fill:#7988bf;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#98dc53;fill-opacity:1"
id="export_cell_1"
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#98dc53;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4264"
width="124.13792"
height="130.16528"
x="434.48279"
y="682.87128" />
</g>
<g
style="fill:#4cd4ae;fill-opacity:1"
id="export_cell_2"
transform="translate(0,-199.99998)">
<rect
y="587.41681"
x="597.24127"
height="176.44627"
width="168.27585"
id="rect4266"
style="opacity:1;fill:#4cd4ae;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#57cb84;fill-opacity:1"
id="export_cell_7"
transform="translate(0,-199.99998)">
<path
id="path4268"
d="m 625.53912,1114.5697 v 116.5837 h 118.01372 v -58.292 H 684.5469 v -58.2917 z"
style="opacity:1;fill:#57cb84;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#5abee2;fill-opacity:1"
id="export_cell_8"
transform="translate(0,-199.99998)">
<path
id="path4270"
d="m 435.54908,1048.0408 v 177.9444 H 605.2538 V 1166.671 H 492.11671 v -118.6302 z"
style="opacity:1;fill:#5abee2;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#fec63d;fill-opacity:1"
id="export_cell_3"
transform="translate(0,-199.99998)">
<rect
y="937.41663"
x="671.724"
height="54.958675"
width="104.82758"
id="rect4272"
style="opacity:1;fill:#fec63d;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#ec9548;fill-opacity:1"
id="export_cell_4"
transform="translate(0,-199.99998)">
<rect
y="1027.0861"
x="531.03442"
height="54.958675"
width="162.75861"
id="rect4274"
style="opacity:1;fill:#ec9548;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#e66a82;fill-opacity:1"
id="export_cell_5"
transform="translate(0,-199.99998)">
<rect
y="917.16876"
x="415.17236"
height="66.528923"
width="228.9655"
id="rect4276"
style="opacity:1;fill:#e66a82;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#da6554;fill-opacity:1"
id="export_cell_6"
transform="translate(0,-199.99998)">
<rect
y="833.28448"
x="500.6897"
height="69.421486"
width="281.37927"
id="rect4278"
style="opacity:1;fill:#da6554;fill-opacity:1;stroke:none;stroke-width:0.1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
transform="translate(3.030458,-199.99998)"
style="fill:#ffffff;fill-opacity:1"
id="export_background">
<rect
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:7.78836012;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4147"
width="400"
height="700"
x="0"
y="552.36218" />
</g>
<g
style="fill:#00f230;fill-opacity:1"
id="export_button_0"
transform="translate(0,-199.99998)">
<path
id="rect4149"
d="M 26.857031,798.76837 H 378.28562 V 907.33982 H 26.857031 Z"
style="opacity:1;fill:#00f230;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#f2cc00;fill-opacity:1"
id="export_button_1"
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#f2cc00;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4151"
width="105.7143"
height="108.57145"
x="29.714174"
y="921.62555" />
</g>
<g
style="fill:#2182ef;fill-opacity:1"
id="export_button_2"
transform="translate(0,-199.99998)">
<rect
y="921.62555"
x="146.85712"
height="108.57145"
width="105.7143"
id="rect4153"
style="opacity:1;fill:#2182ef;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#ce4444;fill-opacity:1"
id="export_button_3"
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#ce4444;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4155"
width="105.7143"
height="108.57145"
x="266.85712"
y="921.62555" />
</g>
<g
style="fill:#ffcc00;fill-opacity:1"
id="export_current_score"
transform="translate(0,-199.99998)">
<path
style="opacity:1;fill:#ffcc00;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 106.16769,680.7189 a 20.572971,33.748715 52.281084 0 0 -0.3613,0.23047 h -3.5703 a 31.071428,74.892753 0 0 0 0.207,2.32227 20.572971,33.748715 52.281084 0 0 -17.67971,31.1875 20.572971,33.748715 52.281084 0 0 27.33211,9.97851 31.071428,74.892753 0 0 0 16.5234,18.62501 19.482912,22.977165 0 0 0 -14.6016,18.60157 h 38.4278 a 19.482912,22.977165 0 0 0 -15.1055,-18.75 31.071428,74.892753 0 0 0 16.3164,-18.47853 33.748715,20.572971 37.718916 0 0 27.3379,-9.97656 33.748715,20.572971 37.718916 0 0 -17.6738,-31.1836 31.071428,74.892753 0 0 0 0.2011,-2.32617 h -3.5703 a 33.748715,20.572971 37.718916 0 0 -0.3613,-0.23047 l -0.033,0.23047 h -53.3555 l -0.033,-0.23047 z m -3.2187,8.00977 a 31.071428,74.892753 0 0 0 7.5312,32.01562 16.78108,29.001088 59.891063 0 1 -22.259706,-8.39257 16.78108,29.001088 59.891063 0 1 14.728506,-23.62305 z m 59.8652,0.004 a 29.001088,16.78108 30.108937 0 1 14.7227,23.61915 29.001088,16.78108 30.108937 0 1 -22.2637,8.39062 31.071428,74.892753 0 0 0 7.541,-32.00977 z m -29.9355,4.67774 4.1054,8.31836 9.1797,1.33398 -6.6426,6.47461 1.5684,9.14453 -8.2109,-4.3164 -8.211,4.3164 1.5684,-9.14453 -6.6445,-6.47461 9.1816,-1.33398 z"
id="path4181" />
</g>
<g
style="fill:#65d681;fill-opacity:1"
id="export_high_score"
transform="translate(0,-199.99998)">
<path
id="path4233"
d="m 229.54476,680.7189 a 20.572971,33.748715 52.281084 0 0 -0.3613,0.23047 h -3.5703 a 31.071428,74.892753 0 0 0 0.207,2.32227 20.572971,33.748715 52.281084 0 0 -17.6797,31.1875 20.572971,33.748715 52.281084 0 0 27.3321,9.97851 31.071428,74.892753 0 0 0 16.5234,18.62501 19.482912,22.977165 0 0 0 -14.6015,18.60157 h 38.4277 a 19.482912,22.977165 0 0 0 -15.1055,-18.75 31.071428,74.892753 0 0 0 16.3164,-18.47853 33.748715,20.572971 37.718916 0 0 27.3379,-9.97656 33.748715,20.572971 37.718916 0 0 -17.6738,-31.1836 31.071428,74.892753 0 0 0 0.2012,-2.32617 h -3.5704 a 33.748715,20.572971 37.718916 0 0 -0.3613,-0.23047 l -0.033,0.23047 h -53.3555 l -0.033,-0.23047 z m -3.2187,8.00977 a 31.071428,74.892753 0 0 0 7.5312,32.01562 16.78108,29.001088 59.891063 0 1 -22.2597,-8.39257 16.78108,29.001088 59.891063 0 1 14.7285,-23.62305 z m 59.8652,0.004 a 29.001088,16.78108 30.108937 0 1 14.7227,23.61915 29.001088,16.78108 30.108937 0 1 -22.2637,8.39062 31.071428,74.892753 0 0 0 7.541,-32.00977 z m -29.9355,4.67774 4.1054,8.31836 9.1797,1.33398 -6.6425,6.47461 1.5683,9.14453 -8.2109,-4.3164 -8.211,4.3164 1.5684,-9.14453 -6.6445,-6.47461 9.1816,-1.33398 z"
style="opacity:1;fill:#65d681;fill-opacity:1;stroke:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
</g>
<g
style="fill:#87ceeb;fill-opacity:1"
id="export_band"
transform="translate(0,-199.99998)">
<rect
style="opacity:1;fill:#87ceeb;fill-opacity:1;stroke:none;stroke-width:25;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect4174"
width="400"
height="80"
x="0"
y="572.36218"
ry="4.1303067" />
</g>
<g
style="fill:#4d4d4d;fill-opacity:1"
id="export_bonus"
transform="translate(0,-199.99998)">
<path
style="opacity:1;fill:#4d4d4d;fill-opacity:1;stroke:none;stroke-width:7.55499983;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
d="m 198.50901,1079.2067 c -6.43568,0 -11.61524,5.1815 -11.61524,11.6172 v 11.6172 h -11.61718 c -6.43569,0 -11.61719,5.1815 -11.61719,11.6172 v 10.1015 c 0,6.4357 5.1815,11.6172 11.61719,11.6172 h 11.61718 v 11.6152 c 0,6.4357 5.17956,11.6172 11.61524,11.6172 h 10.10156 c 6.43568,0 11.61719,-5.1815 11.61719,-11.6172 v -11.6152 h 11.61719 c 6.43568,0 11.61718,-5.1815 11.61718,-11.6172 v -10.1015 c 0,-6.4357 -5.1815,-11.6172 -11.61718,-11.6172 h -11.61719 v -11.6172 c 0,-6.4357 -5.18151,-11.6172 -11.61719,-11.6172 z"
id="rect4180" />
</g>
<g
style="fill:#ffffff;fill-opacity:1"
id="export_foreground">
<path
id="path852"
d="m 240.30098,653.05414 c 0,8.10538 -63.17523,44.57962 -70.19469,40.52692 -7.01947,-4.05269 -7.01947,-77.00116 0,-81.05385 7.01946,-4.05269 70.19469,32.42154 70.19469,40.52693 z"
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.9375;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
style="fill:#1a1a1a;fill-opacity:1"
id="export_text">
<path
style="opacity:1;fill:#1a1a1a;fill-opacity:1;stroke:none;stroke-width:0.75219417;stroke-linecap:square;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 178.42743,388.9247 v 18.75 9.375 18.75 h 9.375 v -18.75 h 9.375 v 18.75 h 9.375 v -18.75 -9.375 -18.75 h -9.375 v 18.75 h -9.375 v -18.75 z m 33.77014,0 v 46.875 h 9.375 v -46.875 z"
id="rect859" />
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 13 KiB