Created logo generator WITH SVG downloader.
This commit is contained in:
Greenscreener
parent
39676bbf86
commit
9f835ca8ce
7
content/logo-generator.md
Normal file
7
content/logo-generator.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: "Logo generator"
|
||||
date: 2020-02-22T16:42:34+01:00
|
||||
draft: false
|
||||
authors: [ "Greenscreener" ]
|
||||
---
|
||||
{{< logo-generator >}}
|
||||
33
themes/patek/assets/css/logo-generator.scss
Normal file
33
themes/patek/assets/css/logo-generator.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -8,6 +8,9 @@ $primary: #0b2a37;
|
||||
@import "./bulma/bulma.sass";
|
||||
// /Bulma import
|
||||
|
||||
|
||||
@import "logo-generator";
|
||||
|
||||
// Custom styles
|
||||
|
||||
* {
|
||||
|
||||
@ -1 +1 @@
|
||||
Subproject commit 0a5cf1419b3555f16a069eaa562ebb122b2f6f5d
|
||||
Subproject commit 73b5844991b475f6468bd8a49604d0d4a263f795
|
||||
123
themes/patek/layouts/shortcodes/logo-generator.html
Normal file
123
themes/patek/layouts/shortcodes/logo-generator.html
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user