diff --git a/content/logo-generator.md b/content/logo-generator.md
new file mode 100644
index 0000000..c846792
--- /dev/null
+++ b/content/logo-generator.md
@@ -0,0 +1,7 @@
+---
+title: "Logo generator"
+date: 2020-02-22T16:42:34+01:00
+draft: false
+authors: [ "Greenscreener" ]
+---
+{{< logo-generator >}}
diff --git a/themes/patek/assets/css/logo-generator.scss b/themes/patek/assets/css/logo-generator.scss
new file mode 100644
index 0000000..faafb8f
--- /dev/null
+++ b/themes/patek/assets/css/logo-generator.scss
@@ -0,0 +1,33 @@
+#logo-target {
+	width: 100%;
+	height: 30rem;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	patek-logo {
+		font-size: 5rem;
+		padding: 2rem 2rem 12rem 2rem;
+		position: relative;
+		top: -0.75rem;
+	}
+	background-image: linear-gradient(45deg, #acacac 25%, transparent 25%), linear-gradient(-45deg, #acacac 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #acacac 75%), linear-gradient(-45deg, transparent 75%, #acacac 75%);
+	background-size: 20px 20px;
+	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+.input.color {
+	width: 3rem;
+	&:hover {
+		cursor: pointer;
+	}
+	margin-left: 0.5rem;
+}
+#inputs {
+	input[type=range] {
+		margin-left: 0.5em;
+	}
+}
+.svg-in-button {
+	margin-left: -5px;
+	margin-right: 5px;
+}
diff --git a/themes/patek/assets/css/main.scss b/themes/patek/assets/css/main.scss
index 510d7fe..b0fd6c0 100644
--- a/themes/patek/assets/css/main.scss
+++ b/themes/patek/assets/css/main.scss
@@ -8,6 +8,9 @@ $primary: #0b2a37;
 @import "./bulma/bulma.sass";
 // /Bulma import
 
+
+@import "logo-generator";
+
 // Custom styles
 
 * {
diff --git a/themes/patek/assets/js/patek-logo-custom-element b/themes/patek/assets/js/patek-logo-custom-element
index 0a5cf14..73b5844 160000
--- a/themes/patek/assets/js/patek-logo-custom-element
+++ b/themes/patek/assets/js/patek-logo-custom-element
@@ -1 +1 @@
-Subproject commit 0a5cf1419b3555f16a069eaa562ebb122b2f6f5d
+Subproject commit 73b5844991b475f6468bd8a49604d0d4a263f795
diff --git a/themes/patek/layouts/shortcodes/logo-generator.html b/themes/patek/layouts/shortcodes/logo-generator.html
new file mode 100644
index 0000000..9a75186
--- /dev/null
+++ b/themes/patek/layouts/shortcodes/logo-generator.html
@@ -0,0 +1,123 @@
+<div class="card">
+	<div class="card-header">
+		<div class="navbar">
+			<div class="navbar-start" id="inputs">
+				<span class="navbar-item"><input id="titip" type="text" class="input" placeholder="Title"></span>
+				<span class="navbar-item"><input id="subip" type="text" class="input" placeholder="Subtitle"></span>
+				<span class="navbar-item"><label class="label" for="fgip">Foreground: </label><input id="fgip" type="color" class="input color" placeholder="Foreground" value="#ffffff"></span>
+				<span class="navbar-item"><label class="label" for="bgip">Background: </label><input id="bgip" type="color" class="input color" placeholder="Background" value="#0b2a37"></span>
+				<span class="navbar-item"><label for="padip" class="label">Padding: </label><input id="padip" type="range" min="0" value="32" max="384" class="range"></span>
+			</div>
+		</div>
+	</div>
+	<div class="card-content">
+		<div id="logo-target">
+			<patek-logo id="patek-logo" style="color: #fff; background-color: #0b2a37"></patek-logo>
+		</div>
+	</div>
+	<div class="card-footer">
+		<div class="navbar">
+			<div class="navbar-start" id="outputs">
+				<span class="navbar-item"><button class="button is-primary" onclick="downloadSvg()"><svg class="svg-in-button" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="#fff" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>  Download SVG</button></span>
+			</div>
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+	const svgTemplate = document.createElement("template");
+	svgTemplate.innerHTML = `
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 322.67578 160">
+		    <rect width="322.67578" height="160" x="0" y="0" fill="#0b2a37" rx="0" ry="0"/>
+		    <g id="content">
+				<path id="circle0" fill="#fff" d="M162.68928 79.500341c.00001 32.335449 19.43462 62.028599 49.38074 74.430609 29.87414 12.37423 64.31674 5.52319 87.17895-17.34172 22.86505-22.86506 29.71595-57.306944 17.34172-87.178952C304.18797 19.467723 274.53544.016 242.20284.016v14.377329c26.562 0 50.97695 16.042665 61.11362 40.514624 10.16518 24.540368 4.55826 52.727797-14.22412 71.508967-18.78259 18.7826-46.97003 24.3893-71.50897 14.22412-24.46839-10.13524-40.51462-34.5787-40.51462-61.141412z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<path id="circle1" fill="#fff" d="M180.12863 79.543096c.00001 25.091914 15.14765 47.753174 38.32981 57.355394 23.18216 9.60223 49.91162 4.28427 67.65454-13.45879 17.74292-17.74292 23.06102-44.472381 13.45879-67.654542-9.60222-23.18216-32.26348-38.316266-57.35539-38.316266V28.61745c20.61182 0 39.15428 12.397739 47.04271 31.440432 7.88772 19.043405 3.53804 40.915818-11.03668 55.490538-14.57472 14.57471-36.44784 18.92511-55.49054 11.03668-19.0434-7.88772-31.44043-26.43018-31.44043-47.042716z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<path id="circle2" fill="#fff" d="M194.24088 79.543096c0 19.388302 11.70509 36.895354 29.6169 44.314894 17.9118 7.41955 38.56567 3.31286 52.2753-10.39677 13.70962-13.709624 17.81631-34.363496 10.39677-52.275299-7.41955-17.912516-24.9266-29.60336-44.3149-29.60336v8.615281c15.92651 0 30.25895 9.572297 36.35378 24.286684 6.09483 14.714387 2.7301 31.619293-8.53191 42.881154-11.26186 11.26186-28.16677 14.62674-42.88115 8.53191-14.71439-6.09476-24.28669-20.427269-24.28669-36.353781z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<path id="circle3" fill="#fff" d="M205.76497 79.543096c-.00001 14.732202 8.89462 28.029954 22.5052 33.667294 13.61057 5.63763 29.29053 2.52565 39.70796-7.89128 10.41673-10.416728 13.54288-26.110934 7.90554-39.72151-5.63763-13.610576-18.93509-22.505195-33.66729-22.505195v6.55531c12.1013-.000007 22.98192 7.274889 27.61308 18.454801 4.63108 11.180625 2.08527 24.024449-6.4718 32.582014-8.55684 8.55684-21.40138 11.11649-32.58201 6.48568-11.18062-4.63101-18.4548-15.525316-18.4548-27.627327z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<path id="circle4" fill="#fff" d="M215.271 79.543096c-.00001 10.890599 6.57041 20.717294 16.63198 24.885264 10.06114 4.16762 21.66576 1.86914 29.36678-5.831597 7.70102-7.701021 9.99914-19.304928 5.8316-29.366778-4.16762-10.061138-13.99467-16.631982-24.88527-16.631982v4.843441c8.94593 0 16.99398 5.374539 20.41729 13.639793 3.42331 8.265254 1.538 17.766434-4.78779 24.092145-6.32578 6.325788-15.82675 8.211238-24.09214 4.787788-8.26469-3.423452-13.63979-11.471364-13.63979-20.41729z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<path id="circle5" fill="#fff" d="M223.05112 79.543096c0 7.74734 4.67249 14.738616 11.83051 17.703726 7.15802 2.965108 15.39848 1.330772 20.87691-4.14752 5.4783-5.478293 7.12596-13.733143 4.16142-20.890454-2.96483-7.158023-9.95639-11.830512-17.70373-11.830512v3.437704c6.36412 0 12.08064 3.834976 14.51629 9.714816 2.43565 5.87984 1.09027 12.632895-3.40991 17.132936-4.50012 4.500113-11.25331 5.845351-17.13294 3.409913-5.8797-2.435438-9.70056-8.166346-9.70056-14.530537z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<path id="circle6" fill="#fff" d="M228.521 79.543096c0 5.535728 3.33381 10.532876 8.44782 12.651423 5.1143 2.118404 11.00533.949819 14.92033-2.96454 3.915-3.914359 5.09684-9.819568 2.97844-14.933867-2.11841-5.114298-7.1157-8.447821-12.65143-8.447821v2.463443c4.54729 0 8.62882 2.729954 10.36898 6.931133 1.74016 4.201179.77979 9.032149-2.43565 12.248093-3.21545 3.215944-8.03238 4.175811-12.23384 2.435652-4.20147-1.740158-6.93113-5.835445-6.93113-10.382518z" paint-order="markers fill stroke" style="font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-decoration-line:none;text-decoration-style:solid;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal"/>
+				<text x="234.51401" y="68.234459" fill="#fff" stroke-width="1.9459722" font-family="sans-serif" font-size="77.83888245" font-weight="400" letter-spacing="0" style="line-height:1.25;text-align:end" text-anchor="end" word-spacing="0">
+					<tspan id="title" x="234.51402" y="68.234459" font-family="Fira Code" font-weight="700" style="-inkscape-font-specification:'Fira Code Bold';text-align:end"></tspan>
+				</text>
+				<text x="159.64459" y="120.83648" fill="#fff" stroke-width="1.17030752" font-family="sans-serif" font-size="46.81230164" font-weight="400" letter-spacing="0" style="line-height:1.25;text-align:end" text-anchor="end" word-spacing="0">
+					<tspan id="subtitle" x="159.64459" y="120.83648" font-family="Fira Code" font-weight="700" style="-inkscape-font-specification:'Fira Code Bold';text-align:end"></tspan>
+				</text>
+		    </g>
+		</svg>
+`;
+	document.addEventListener("DOMContentLoaded", () => {
+		const fn = () => {
+			const patekLogo = document.getElementById("patek-logo");
+			patekLogo.style.color = document.getElementById("fgip").value;
+			patekLogo.style.backgroundColor = document.getElementById("bgip").value;
+			const padding = document.getElementById("padip").value - 1 + 1;
+			patekLogo.style.padding = `${padding}px ${padding}px ${padding + 160}px`;
+			patekLogo.setAttribute("title", document.getElementById("titip").value);
+			patekLogo.setAttribute("subtitle", document.getElementById("subip").value);
+		};
+		fn();
+		document.querySelectorAll("#inputs input").forEach(e => {
+			e.addEventListener("keyup", fn);
+			e.addEventListener("change", fn);
+
+		});
+	});
+	function downloadSvg () {
+		const svg = svgTemplate.content.cloneNode(true);
+		const patekLogo = document.getElementById("patek-logo");
+		const binary = PatekLogo.calculateBinary(document.getElementById("titip").value);
+
+		for (let i = 0; i < 7; i++) {
+			if (binary[i] === "0") {
+				svg.getElementById("circle" + i.toString()).parentElement.removeChild(svg.getElementById("circle" + i.toString()));
+			}
+		}
+
+		svg.getElementById("title").innerHTML = document.getElementById("titip").value;
+		svg.getElementById("subtitle").innerHTML = document.getElementById("subip").value;
+
+		svg.querySelectorAll("path, text").forEach(e => e.attributes.fill.value = document.getElementById("fgip").value);
+		svg.querySelector("rect").attributes.fill.value = document.getElementById("bgip").value;
+
+		const width = patekLogo.clientWidth - 5.158;
+		const height = patekLogo.clientHeight;
+		const padding = parseInt(document.getElementById("padip").value);
+
+		const originalWidth = 322.67578;
+
+		const offsetX = -padding + width - originalWidth + 1.9;
+		const offsetY = padding;
+
+		svg.querySelector("rect").attributes.width.value = width;
+		svg.querySelector("rect").attributes.height.value = height;
+
+		svg.querySelector("svg").attributes.viewBox.value = `0 0 ${width} ${height}`;
+
+		/*
+		svg.querySelectorAll("#content *").forEach(e => {
+			if (typeof e.attributes.x === "undefined") {
+				e.setAttribute("x", offsetX);
+			} else {
+				e.attributes.x.value = parseFloat(e.attributes.x.value) + offsetX;
+			}
+			if (typeof e.attributes.y === "undefined") {
+				e.setAttribute("y", offsetY);
+			} else {
+				e.attributes.y.value = parseFloat(e.attributes.y.value) + offsetY;
+			}
+		});
+		*/
+		svg.querySelector("#content").setAttribute("transform", `translate(${offsetX},${offsetY})`);
+
+		console.log(svg.querySelector("svg").outerHTML);
+
+		const a = document.createElement('a');
+		a.href = URL.createObjectURL(new Blob([svg.querySelector("svg").outerHTML], {type: "image/svg+xml"}))
+		a.download = "patek-logo.svg";
+
+		a.style.display = "none";
+		document.body.append(a);
+		a.click();
+		document.body.removeChild(a);
+	}
+</script>