Tobias/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

test123

Browse Source
This commit is contained in:
Tobias
2022-12-30 15:01:16 +01:00
parent c04af44c34
commit f0d6c6b442
24 changed files with 1383 additions and 1034 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored
View File

@@ -21,3 +21,26 @@
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*
yarn-error.log* yarn-error.log*
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

70
README.md
View File

@@ -1,70 +0,0 @@
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Available Scripts
In the project directory, you can run:
### `npm start`
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
The page will reload when you make changes.\
You may also see any lint errors in the console.
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

1900
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 113 KiB

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 23 KiB

2
public/manifest.json
View File

@@ -4,7 +4,7 @@
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "256x256 128x128 64x64 48x48 32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {

36
src/App.css
View File

@@ -1,38 +1,10 @@
.App { .App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; height: 100vh;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
} }
.App-link { .App-body {
color: #61dafb; flex-grow: 1;
} overflow: auto;
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
} }

26
src/App.js
View File

@@ -1,23 +1,19 @@
import logo from './logo.svg'; import Menu from './components/Menu.js';
import Foot from './components/Foot';
import './App.css'; import './App.css';
//import {ReactComponent as NotFound} from './images/not_found.svg';
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<header className="App-header"> <Menu/>
<img src={logo} className="App-logo" alt="logo" /> <div className='App-body'>
<p> start
Edit <code>src/App.js</code> and save to reload. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>1
</p> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>2
<a <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>end
className="App-link" </div>
href="https://reactjs.org" <Foot/>
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div> </div>
); );
} }

24
src/components/Foot.css Normal file
View File

@@ -0,0 +1,24 @@
.foot-section {
position: sticky;
bottom: 0;
box-sizing: border-box;
width: 100%;
padding: 5px;
font-size: 12px;
font-weight: 500;
color: #9190a5;
text-align: center;
background: #081624;
border-top: 1px solid #b01ba5;
}
.foot-section a {
text-decoration: none;
outline: none;
color: #9190a5;
}
.foot-section a:hover {
text-decoration: underline;
}

12
src/components/Foot.js Normal file
View File

@@ -0,0 +1,12 @@
import './Foot.css';
function Foot() {
return (
<footer className='foot-section'>
<a href='/'>@letsstein.de</a> 2022 All rights reserved
</footer>
);
}
export default Foot;

39
src/components/LogoText.css Normal file
View File

@@ -0,0 +1,39 @@
.logotext {
font-family: 'ALGER';
text-transform: uppercase;
color: #b01ba5;
text-decoration: none;
outline: none;
display: inline-block;
}
.logotext div:nth-child(1) {
font-size: 30px;
line-height: 1em;
}
.logotext div:nth-child(1) i {
color: #ddd;
}
.logotext div:nth-child(2) {
font-size: 15px;
line-height: 1em;
display: flex;
}
.logotext div:nth-child(2) i {
background-color: #b01ba550;
}
.logotext mark {
flex-grow: 1;
background-color: transparent; /*remove default*/
background-image: linear-gradient(to right, transparent, #b01ba550);
}
.logotext i {
font-style: normal; /*remove default*/
}

19
src/components/LogoText.js Normal file
View File

@@ -0,0 +1,19 @@
import '../font/ALGER.css';
import './LogoText.css';
function LogoText() {
return (
<div className='logotext'>
<div>
Lets<i>Stein</i>
</div>
<div>
<mark/>
<i>Gaming Server</i>
</div>
</div>
);
}
export default LogoText;

90
src/components/Menu.css Normal file
View File

@@ -0,0 +1,90 @@
.menu-section {
position: sticky;
top: 0;
box-sizing: border-box;
width: 100%;
padding: 0.5em;
background: #081624;
border-bottom: 1px solid #b01ba5;
display: flex;
align-items: stretch;
justify-content: space-between;
}
.menu-section > div {
display: flex;
align-items: stretch;
gap: 1.5em;
}
.menu-section a {
text-decoration: none;
outline: none;
}
.menu-entry {
position: relative;
display: flex;
align-items: center;
color: #ddd;
font-size: 16px;
cursor: pointer;
}
.menu-entry:hover {
color: #b01ba5;
}
.menu-entry:hover nav {
display: flex;
gap: 0.2em;
}
.menu-entry:hover .menu-rotate {
transform: rotate(180deg);
}
.menu-entry label {
cursor: pointer;
font-weight: bold;
}
.menu-entry nav {
position: absolute;
right: 0;
top: 100%;
padding: 0.5em;
display: none;
flex-direction: column;
text-align: left;
background: #081624;
border-left: 0.1em solid #b01ba5;
border-right: 0.1em solid #b01ba5;
border-bottom: 0.1em solid #b01ba5;
border-radius: 0 0 1em 1em;
}
.menu-entry a {
color: #ddd;
font-weight: bold;
}
.menu-entry a:hover {
color: #b01ba5;
}
.menu-section svg {
height: 1.5em;
width: 1.5em;
margin-right: 0.25em;
}
/* Large Mobile :480px. */
@media only screen and (max-width: 767px) {
.menu-entry label {
display: none;
}
}

36
src/components/Menu.js Normal file
View File

@@ -0,0 +1,36 @@
import {ReactComponent as DownloadIcon} from '../images/cloud-download.svg';
import {ReactComponent as CloudIcon} from '../images/cloud.svg';
import {ReactComponent as Arrow} from '../images/arrow.svg';
import LogoText from './LogoText';
import './Menu.css';
function Menu() {
return (
<header className='menu-section'>
<a href="/">
<LogoText/>
</a>
<div>
<a href="/download" className='menu-entry'>
<DownloadIcon/>
<label>Downloads</label>
</a>
<a href="https://cloud.letsstein.de" className='menu-entry'>
<CloudIcon/>
<label>Cloud</label>
</a>
<div className='menu-entry'>
<Arrow className='menu-rotate'/>
<label>Other</label>
<nav>
<a href="/polytopia">Polytopia</a>
<a href="/civ">Civilization</a>
</nav>
</div>
</div>
</header>
);
}
export default Menu;

6
src/font/ALGER.css Normal file
View File

@@ -0,0 +1,6 @@
@font-face {
font-family: 'ALGER';
src: url('./ALGER.eot');
src: local('ALGER'), url('./ALGER.woff') format('woff'), url('./ALGER.ttf') format('truetype');
}
/* Font downloaded from FontsForWeb.com */

BIN
src/font/ALGER.eot Normal file
View File

Binary file not shown.

BIN
src/font/ALGER.ttf Normal file
View File

Binary file not shown.

BIN
src/font/ALGER.woff Normal file
View File

Binary file not shown.

7
src/images/arrow.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(5.1967e-17 .84868 -1.444 8.8421e-17 106.98 -46.596)">
<path d="m64.331 74.088v-22.16l18.852 11.08-18.852 11.08z" fill="currentColor"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 506 B

4
src/images/cloud-download.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="m1194.7 974.53q0-13.066-8.4-21.466t-21.467-8.4h-209.07v-328.53q0-12.133-8.866-21-8.867-8.866-21-8.866h-179.2q-12.134 0-21 8.866-8.867 8.867-8.867 21v328.53h-209.07q-12.133 0-21 8.866-8.866 8.867-8.866 21 0 13.067 8.4 21.467l328.53 328.53q8.4 8.4 21.467 8.4 13.066 0 21.466-8.4l327.6-327.6q9.334-11.2 9.334-22.4zm597.33 209.07q0 148.4-105 253.4t-253.4 105h-1015.5q-172.67 0-295.4-122.73-122.73-122.73-122.73-295.4 0-121.33 65.333-224 65.334-102.67 175.47-154-1.867-28-1.867-40.134 0-197.87 140-337.87t337.87-140q145.6 0 266.47 81.2 120.87 81.2 175.93 215.6 66.267-57.867 154.93-57.867 98.934 0 168.93 70t70 168.93q0 70.934-38.267 128.8 121.33 28.934 199.27 126.47 77.933 97.533 77.933 222.6z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 834 B

4
src/images/cloud.svg Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
<path d="m1792 1173.6q0 148.4-105 253.4t-253.4 105h-1015.5q-172.67 0-295.4-122.73-122.73-122.73-122.73-295.4 0-123.2 66.267-225.4 66.266-102.2 174.53-152.6-1.867-26.134-1.867-40.134 0-197.87 140-337.87t337.87-140q147.47 0 267.4 82.133t175 214.67q65.333-57.867 154.93-57.867 98.934 0 168.93 70t70 168.93q0 70-38.267 128.8 120.4 28 198.8 125.53 78.4 97.533 78.4 223.53z" fill="currentColor"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

116
src/images/not_found.svg Normal file
View File

@@ -0,0 +1,116 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/">
<g transform="translate(93.112 97.58)">
<path d="m84.858-70.564h-102.95v50.141h-27.133v50.818h26.733v51.618l-7.615 11.376h-18.555v12.979h25.7v26.214h77.915v-26.214h26.025v-24.622l26-0.124v-17.866h-16.924l-9.585-8.566v-50.763h26.509v-23.993h-26.053l-0.063-50.998z"/>
</g>
<g transform="translate(148.11 98.58)">
<rect x="39.115" y="121.61" width="16.871" height="9.922"/>
</g>
<g transform="translate(0 98.58)">
<rect x="22.334" y="62.538" width="14.648" height="17.956"/>
</g>
<g transform="translate(170.11 19.58)">
<rect x="46.986" y="112.48" width="13.041" height="20.737"/>
</g>
<rect x="22.164" y="51.814" width="14.648" height="20.061"/>
<path d="m178.03 78.014h1.377l-36.437 152.15h-68.827v-26.213h-23.338l3.087-12.98h13.106l7.615-11.376v-51.618h-5.613l20.831-86.985 88.199 21.122v15.902zm-68.716 35.605-12.687-3.046-9.562 39.828 12.879 3.092 3.006-12.52 22.644 5.436-3.141 13.085 12.491 2.999 9.562-39.828-12.141-2.915 3.141-13.085-23.186-5.567-3.006 12.521zm9.938-39.235-23.762-5.705-6.369 26.525 23.763 5.705 6.368-26.525zm46 11-23.762-5.705-6.369 26.525 23.763 5.705 6.368-26.525z" fill="url(#a)"/>
<g serif:id="Cutout">
<g transform="matrix(.45646 0 0 .047652 68.508 14.27)">
<path d="m257.41-5.567h-258.49l15.334 273.06h225.69l17.468-273.06z" fill="#97989c"/>
</g>
<g transform="matrix(.45646 0 0 .047652 180.59 76.227)">
<path d="m77.402-46.146h-65.543l-17.468 83.66h57.076l25.935-83.66z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 173.63 136.48)">
<path d="m72.394-53.008h-51.29v78.017l51.29 13.169v-91.186z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 182.63 166.48)">
<path d="m114.65 19.532h-139.53l49.11 15.05h153.66l-63.247-15.05z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 154.63 198.48)">
<path d="m125.34 8.398h-139.04l21.378 23.018h166.16l-48.491-23.018z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 121.63 226.48)">
<path d="m162.6 5.656h-416.28l-37.555 28.773h475.21l-21.377-28.773z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 57.627 203.48)">
<path d="m88.255 0.723h-137.3l-61.148 23.129h160.9l37.555-23.129z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 57.627 134.48)">
<path d="m90.77-9.981h-142.83l-59.342 5.014h161.48l40.685-5.014z" fill="#97989c"/>
</g>
<g transform="matrix(.18717 0 0 .65148 59.627 85.478)">
<path d="m44.825-20.38h-166.91l59.342 7.608h144.96l-37.393-7.608z" fill="#97989c"/>
</g>
<g transform="matrix(.029597 0 0 .24616 178.35 14.906)">
<path d="m258.63-3.665-269.41 52.858v207.17l269.41-16.195v-243.84z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 204.56 74.496)">
<path d="m258.63-4.365-269.41 37.15v223.58h269.41v-260.73z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 204.56 161.5)">
<path d="m258.63-1.365h-269.41v166.36l269.41 91.369v-257.73z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 178.56 190.5)">
<path d="m195.77-13.874-206.56-90.216v229.45l206.56 139.74v-278.97z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 149.56 224.5)">
<path d="m147.98-51.733-91.061-139.74v244.28l91.061 174.68v-279.21z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 59.56 224.5)">
<path d="m331.94-191.47-159.97 140.41v278.54l159.97-174.68v-244.28z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 23.56 203.5)">
<path d="m566.36-116.73h-260.47v261.36l260.47-140.41v-120.95z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 53.56 164.5)">
<path d="m479.19-340.33-173.3 30.443v556.58l173.3-106.01v-481.01z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 18.56 108.5)">
<path d="m667.33-292.04-252.78-46.188v550.18l252.78-30.442v-473.56z" fill="#3d3d40"/>
</g>
<g transform="matrix(.043941 0 0 .10731 29.56 43.496)">
<path d="m1034.5-153.57-159.28-121.25v542.31l159.28 46.188v-467.24z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole4">
<g transform="matrix(.18717 0 0 .65148 192.63 223.48)">
<path d="m61.288 10.18h-90.137v29.105h153.91l-63.777-29.105z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 209.56 219.5)">
<path d="m147.36 6.445h-271.67v92.461l271.67 176.69v-269.15z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole3">
<g transform="matrix(.18717 0 0 .65148 9.6266 213.48)">
<path d="m146.15-52.807h-78.258l-77.619 18.1h155.88v-18.1z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 26.56 165.5)">
<path d="m-96.183-40.793h-330.63v277.21l330.63-109.89v-167.33z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole2">
<g transform="matrix(.18717 0 0 .65148 215.63 136.48)">
<path d="m77.538 25.051h-69.675v12.505h149.1l-79.425-12.505z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 232.56 132.5)">
<path d="m283.24-4.053h-338.32v193.24l338.32 75.917v-269.15z" fill="#3d3d40"/>
</g>
</g>
<g serif:id="Hole1">
<g transform="matrix(.18717 0 0 .65148 5.6266 126.48)">
<path d="m166.61-127.92h-154.07l75.814 13.314h78.258v-13.314z" fill="#97989c"/>
</g>
<g transform="matrix(.043941 0 0 .10731 22.56 78.496)">
<path d="m-9.018-248.64-322.94-80.83v267.77c113.45-0.132 258.01-0.972 322.94 0v-186.94z" fill="#3d3d40"/>
</g>
</g>
<defs>
<linearGradient id="a" x2="1" gradientTransform="matrix(-52.589 186.54 -186.54 -52.589 136.93 52.258)" gradientUnits="userSpaceOnUse"><stop stop-color="#4dcb40" offset="0"/><stop stop-color="#4dcb40" stop-opacity="0" offset="1"/></linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

1
src/logo.svg
View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB