GOOV logo generator

by PhilQ

HTML

<h1>GOOV logo/beeldmerk</h1>
<div id="main">
	<div>Variant:<select id="variant"></select></div>
	<div>Marges:<select id="size"></select></div>
	<div>Kleur 1:<select id="c1"></select><input type="color" id="c1_custom" value="#000000" /></div>
	<div>Kleur 2:<select id="c2"></select><input type="color" id="c2_custom" value="#000000" /></div>
	<div>Achtergrond:<select id="back"></select><input type="color" id="back_custom" value="#000000" /></div>
	<div class="buttons">
		<button id="downloadSVG">Download .svg</button>
	</div>
</div>
<br />
<div id="png">
	<div><select id="dimension">
		<option value="Breedte">Breedte</option>
		<option value="Hoogte">Hoogte</option>
	</select></div>
	<div>=</div>
	<div><input type="number" id="length" value="500" /></div>
	<div><input type="checkbox" id="make_square" /></div>
	<div class="buttons">
		<button id="downloadPNG">Download .png</button>
	</div>
</div>
<br />
<div id="svg"></div>

SCSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
	text-align: center;
}

h1 {
	text-align: center;
	color: #fff;
	margin: 20px;
}

#main, #png {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 16px;
  display: inline-flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
	
	div {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		text-align: left;
		
		&.buttons {
			gap: 10px;
		}
	}
	
	label {
		text-align: left;
	}
	
	select, option, input {
		font-size: 16px;
		padding: 5px 10px;
		margin-top: 5px;
	}
	
	input[type="checkbox"] {
		width: 1.4em;
		height: 1.4em;
	}
  
  button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
		cursor: pointer;
  }
	
	#c1_custom,
	#c2_custom,
	#back_custom {
		display: none;
	}
}

#png {
	margin-top: 20px;
}

#svg {
	position: relative;
	display: inline-flex;
  background: #fff;
  border-radius: 4px;
  border: 10px solid white;
  font-size: 16px;
	min-width: 50px;
	min-height: 50px;
	margin: 50px auto 0;
	background: #eee;
	background-image: linear-gradient(45deg, rgba(0,0,0,.25) 25%,
                  	transparent 0, transparent 75%, rgba(0,0,0,.25) 0),
                  	linear-gradient(45deg, rgba(0,0,0,.25) 25%,
                  	transparent 0, transparent 75%, rgba(0,0,0,.25) 0);
	background-position: 0 0, 10px 10px;
	background-size: 20px 20px;
	
	ssvg {
		width: auto;
		height: 250px;
	}
}

JavaScript

const svgs = {
    'Logo': `<g id="OV_Muziektheater">
      <path class="color2" d="M313.604,139.939c0,.187-.187.281-.562.281.094,0,0,0-.281,0h-5.342c-.375,0-.562-.094-.562-.187s0-.187.094-.187.469,0,1.031-.094c.469,0,.75-.094.75-.187s.094-.469.094-1.218v-10.215c-.375,1.031-1.031,2.812-1.874,5.248-.469,1.5-1.125,3.374-1.874,5.623-.187.656-.375,1.031-.469,1.031-.187,0-.375-.281-.562-.843-.469-1.5-1.874-5.061-4.311-10.872v10.872c0,.281.094.469.281.469h1.125c.281,0,.375.094.375.187,0,.187-.187.281-.656.281h-3.655c-.281,0-.469-.094-.469-.281s.375-.187,1.031-.281c.469,0,.75-.094.843-.187s.094-.469.094-1.031v-10.59c0-.75-.094-1.125-.187-1.218-.094-.094-.562-.187-1.406-.187-.281,0-.375-.094-.375-.281,0-.094.187-.187.562-.187h3.843l.094.375c.094.187.281.562.375,1.031l.75,1.874c.187.562.562,1.406,1.031,2.624l1.687,4.124c.281-1.031.562-1.781.75-2.249l2.718-7.779h3.843c.562,0,.843.094.843.281s-.187.281-.562.281c-.562,0-.843.094-.937.094-.281.094-.469.375-.469.75v11.246c0,.843.094,1.312.187,1.406s.656.094,1.5.094c.562-.281.75-.187.656-.094h0Z"/>
      <path class="color2" d="M328.88,125.975c0,.187-.187.187-.469.187h-.843c-.375,0-.469.187-.469.656v5.811c0,2.062,0,3.374-.094,3.936s-.281,1.218-.656,1.781c-.843,1.312-2.249,1.968-4.405,1.968-1.781,0-3.093-.375-4.124-1.218-.937-.75-1.406-2.156-1.406-4.311v-6.654c0-1.125,0-1.781-.094-1.874s-.375-.187-.937-.187c-.469,0-.656-.094-.656-.281s.187-.187.469-.187h5.061c.375,0,.562.094.562.281s-.375.281-1.125.281c-.187,0-.375,0-.375.094s-.094.281-.094.75v7.591c0,2.062.281,3.374.843,4.03.562.656,1.5,1.031,2.624,1.031,1.593,0,2.718-.656,3.374-2.062.281-.656.469-1.781.469-3.28v-7.498c0-.281-.094-.469-.187-.469-.094-.094-.375-.094-.937-.094s-.75-.094-.75-.281.094-.187.375-.187h3.561c.094-.094.281,0,.281.187h0Z"/>
      <path class="color2"...