Add sleepy lucy
This commit is contained in:
Lily Rose
parent
61381e2d3c
commit
16c67b3b2e
214
index.html
214
index.html
|
|
@ -142,49 +142,52 @@
|
||||||
<p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p>
|
<p>Credit to <a href="https://github.com/giacomocavalieri">Jak</a> for the original design idea.</p>
|
||||||
</header>
|
</header>
|
||||||
<form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()">
|
<form id="settings" oninput="updatePreview()" onchange="updateSaveHrefs()">
|
||||||
<label for="widthInput">Width</label>
|
<label for="width">Width</label>
|
||||||
<input id="widthRange" name="widthRange" type="range" min="200" max="8192" value="1920" oninput="this.form.widthInput.value = this.value">
|
<input name="widthSlider" type="range" min="200" max="8192" value="1920" oninput="this.form.width.value = this.value">
|
||||||
<input id="widthInput" name="widthInput" type="number" min="200" max="8192" value="1920" oninput="this.form.widthRange.value = this.value">
|
<input id="width" name="width" type="number" min="200" max="8192" value="1920" oninput="this.form.widthSlider.value = this.value">
|
||||||
|
|
||||||
<label for="heightInput">Height</label>
|
<label for="height">Height</label>
|
||||||
<input id="heightRange" name="heightRange" type="range" min="200" max="8192" value="1080" oninput="this.form.heightInput.value = this.value">
|
<input name="heightSlider" type="range" min="200" max="8192" value="1080" oninput="this.form.height.value = this.value">
|
||||||
<input id="heightInput" name="heightInput" type="number" min="200" max="8192" value="1080" oninput="this.form.heightRange.value = this.value">
|
<input id="height" name="height" type="number" min="200" max="8192" value="1080" oninput="this.form.heightSlider.value = this.value">
|
||||||
|
|
||||||
<label for="logoScaleInput">Logo Scale</label>
|
<label for="logoScale">Logo Scale</label>
|
||||||
<input id="logoScaleRange" name="logoScaleRange" type="range" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleInput.value = this.value">
|
<input name="logoScaleSlider" type="range" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScale.value = this.value">
|
||||||
<input id="logoScaleInput" name="logoScaleInput" type="number" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleRange.value = this.value">
|
<input id="logoScale" name="logoScale" type="number" min="0.1" max="8" step=".01" value="0.7" oninput="this.form.logoScaleSlider.value = this.value">
|
||||||
|
|
||||||
<label for="logoRotationInput">Logo Rotation</label>
|
<label for="logoRotation">Logo Rotation</label>
|
||||||
<input id="logoRotationRange" name="logoRotationRange" type="range" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationInput.value = this.value">
|
<input name="logoRotationSlider" type="range" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotation.value = this.value">
|
||||||
<input id="logoRotationInput" name="logoRotationInput" type="number" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationRange.value = this.value">
|
<input id="logoRotation" name="logoRotation" type="number" min="0" max="360" step=".5" value="348" oninput="this.form.logoRotationSlider.value = this.value">
|
||||||
|
|
||||||
<label for="patternScaleInput">Pattern Scale</label>
|
<label for="patternScale">Pattern Scale</label>
|
||||||
<input id="patternScaleRange" name="patternScaleRange" type="range" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleInput.value = this.value">
|
<input name="patternScaleSlider" type="range" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScale.value = this.value">
|
||||||
<input id="patternScaleInput" name="patternScaleInput" type="number" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleRange.value = this.value">
|
<input id="patternScale" name="patternScale" type="number" min="0.1" max="8" step=".01" value="1" oninput="this.form.patternScaleSlider.value = this.value">
|
||||||
|
|
||||||
<label for="patternSpacingInput">Pattern Spacing</label>
|
<label for="patternSpacing">Pattern Spacing</label>
|
||||||
<input id="patternSpacingRange" name="patternSpacingRange" type="range" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingInput.value = this.value">
|
<input name="patternSpacingSlider" type="range" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacing.value = this.value">
|
||||||
<input id="patternSpacingInput" name="patternSpacingInput" type="number" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingRange.value = this.value">
|
<input id="patternSpacing" name="patternSpacing" type="number" min="1" max="4" step=".01" value="1.1" oninput="this.form.patternSpacingSlider.value = this.value">
|
||||||
|
|
||||||
<label for="patternRotationInput">Pattern Rotation</label>
|
<label for="patternRotation">Pattern Rotation</label>
|
||||||
<input id="patternRotationRange" name="patternRotationRange" type="range" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationInput.value = this.value">
|
<input name="patternRotationSlider" type="range" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotation.value = this.value">
|
||||||
<input id="patternRotationInput" name="patternRotationInput" type="number" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationRange.value = this.value">
|
<input id="patternRotation" name="patternRotation" type="number" min="0" max="360" step=".5" value="325" oninput="this.form.patternRotationSlider.value = this.value">
|
||||||
|
|
||||||
<label for="patternLucyRotationInput">Pattern Lucy Rotation</label>
|
<label for="patternLucyRotation">Pattern Lucy Rotation</label>
|
||||||
<input id="patternLucyRotationRange" name="patternLucyRotationRange" type="range" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationInput.value = this.value">
|
<input name="patternLucyRotationSlider" type="range" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotation.value = this.value">
|
||||||
<input id="patternLucyRotationInput" name="patternLucyRotationInput" type="number" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationRange.value = this.value">
|
<input id="patternLucyRotation" name="patternLucyRotation" type="number" min="0" max="360" step=".5" value="17.5" oninput="this.form.patternLucyRotationSlider.value = this.value">
|
||||||
|
|
||||||
<label for="winkingLucyEnabledInput">Winking Lucy</label>
|
<label>Winking Lucy</label>
|
||||||
<div class="checkboxGroup">
|
<div class="checkboxGroup">
|
||||||
<label for="winkingLucyLEnabledInput">Left Eye</label>
|
<label for="winkingLucyLEnabled">Left Eye</label>
|
||||||
<input id="winkingLucyLEnabledInput" name="winkingLucyLEnabledInput" type="checkbox">
|
<input id="winkingLucyLEnabled" name="winkingLucyLEnabled" type="checkbox">
|
||||||
|
|
||||||
<label for="winkingLucyREnabledInput">Right Eye</label>
|
<label for="winkingLucyREnabled">Right Eye</label>
|
||||||
<input id="winkingLucyREnabledInput" name="winkingLucyREnabledInput" type="checkbox">
|
<input id="winkingLucyREnabled" name="winkingLucyREnabled" type="checkbox">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label for="colorSchemeInput">Color Scheme</label>
|
<label for="sleepyLucyEnabled">Sleepy Lucy</label>
|
||||||
<select id="colorSchemeInput" name="colorSchemeInput">
|
<input id="sleepyLucyEnabled" name="sleepyLucyEnabled" type="checkbox">
|
||||||
|
|
||||||
|
<label for="colorScheme">Color Scheme</label>
|
||||||
|
<select id="colorScheme" name="colorScheme">
|
||||||
<option value="light" selected>Light</option>
|
<option value="light" selected>Light</option>
|
||||||
<option value="dark">Dark</option>
|
<option value="dark">Dark</option>
|
||||||
<option value="blurple">Blurple</option>
|
<option value="blurple">Blurple</option>
|
||||||
|
|
@ -192,57 +195,57 @@
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<div id="colorSchemeInputs" class="hidden">
|
<div id="colorSchemeInputs" class="hidden">
|
||||||
<label for="textPrimaryColorInput">Text Primary Color</label>
|
<label for="textPrimaryColor">Text Primary Color</label>
|
||||||
<input id="textPrimaryColorInput" name="textPrimaryColorInput" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = normalizeColor(this.value)">
|
<input id="textPrimaryColor" name="textPrimaryColor" type="text" value="#ffaff3" oninput="this.form.textPrimaryColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="textPrimaryColorPicker" name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColorInput.value = this.value">
|
<input name="textPrimaryColorPicker" type="color" value="#ffaff3" oninput="this.form.textPrimaryColor.value = this.value">
|
||||||
|
|
||||||
<label for="textShadowColorInput">Text Shadow Color</label>
|
<label for="textShadowColor">Text Shadow Color</label>
|
||||||
<input id="textShadowColorInput" name="textShadowColorInput" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = normalizeColor(this.value)">
|
<input id="textShadowColor" name="textShadowColor" type="text" value="#a6f0fc" oninput="this.form.textShadowColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="textShadowColorPicker" name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColorInput.value = this.value">
|
<input name="textShadowColorPicker" type="color" value="#a6f0fc" oninput="this.form.textShadowColor.value = this.value">
|
||||||
|
|
||||||
<label for="lucyColorInput">Lucy Color</label>
|
<label for="lucyColor">Lucy Color</label>
|
||||||
<input id="lucyColorInput" name="lucyColorInput" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = normalizeColor(this.value)">
|
<input id="lucyColor" name="lucyColor" type="text" value="#ffaff3" oninput="this.form.lucyColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="lucyColorPicker" name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColorInput.value = this.value">
|
<input name="lucyColorPicker" type="color" value="#ffaff3" oninput="this.form.lucyColor.value = this.value">
|
||||||
|
|
||||||
<label for="lucyFaceColorInput">Lucy Face Color</label>
|
<label for="lucyFaceColor">Lucy Face Color</label>
|
||||||
<input id="lucyFaceColorInput" name="lucyFaceColorInput" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = normalizeColor(this.value)">
|
<input id="lucyFaceColor" name="lucyFaceColor" type="text" value="#fefefc" oninput="this.form.lucyFaceColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="lucyFaceColorPicker" name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColorInput.value = this.value">
|
<input name="lucyFaceColorPicker" type="color" value="#fefefc" oninput="this.form.lucyFaceColor.value = this.value">
|
||||||
|
|
||||||
<label for="lambdaColorInput">Lambda Color</label>
|
<label for="lambdaColor">Lambda Color</label>
|
||||||
<input id="lambdaColorInput" name="lambdaColorInput" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = normalizeColor(this.value)">
|
<input id="lambdaColor" name="lambdaColor" type="text" value="#a6f0fc" oninput="this.form.lambdaColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="lambdaColorPicker" name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColorInput.value = this.value">
|
<input name="lambdaColorPicker" type="color" value="#a6f0fc" oninput="this.form.lambdaColor.value = this.value">
|
||||||
|
|
||||||
<label for="outlineColorInput">Outline Color</label>
|
<label for="outlineColor">Outline Color</label>
|
||||||
<input id="outlineColorInput" name="outlineColorInput" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = normalizeColor(this.value)">
|
<input id="outlineColor" name="outlineColor" type="text" value="#fefefc" oninput="this.form.outlineColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="outlineColorPicker" name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColorInput.value = this.value">
|
<input name="outlineColorPicker" type="color" value="#fefefc" oninput="this.form.outlineColor.value = this.value">
|
||||||
|
|
||||||
<label for="backgroundColorInput">BG Color</label>
|
<label for="backgroundColor">BG Color</label>
|
||||||
<input id="backgroundColorInput" name="backgroundColorInput" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = normalizeColor(this.value)">
|
<input id="backgroundColor" name="backgroundColor" type="text" value="#fcc3fb" oninput="this.form.backgroundColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="backgroundColorPicker" name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColorInput.value = this.value">
|
<input name="backgroundColorPicker" type="color" value="#fcc3fb" oninput="this.form.backgroundColor.value = this.value">
|
||||||
|
|
||||||
<label for="backgroundLucyColorInput">BG Lucy Color</label>
|
<label for="backgroundLucyColor">BG Lucy Color</label>
|
||||||
<input id="backgroundLucyColorInput" name="backgroundLucyColorInput" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = normalizeColor(this.value)">
|
<input id="backgroundLucyColor" name="backgroundLucyColor" type="text" value="#fdb7f6" oninput="this.form.backgroundLucyColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="backgroundLucyColorPicker" name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColorInput.value = this.value">
|
<input name="backgroundLucyColorPicker" type="color" value="#fdb7f6" oninput="this.form.backgroundLucyColor.value = this.value">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<label for="vignetteEnabledInput">Vignette</label>
|
<label for="vignetteEnabled">Vignette</label>
|
||||||
<input id="vignetteEnabledInput" name="vignetteEnabledInput" type="checkbox">
|
<input id="vignetteEnabled" name="vignetteEnabled" type="checkbox">
|
||||||
|
|
||||||
<div id="vignetteInputs" class="hidden">
|
<div id="vignetteInputs" class="hidden">
|
||||||
<label for="vignetteColorInput">Vignette Color</label>
|
<label for="vignetteColor">Vignette Color</label>
|
||||||
<input id="vignetteColorInput" name="vignetteColorInput" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = normalizeColor(this.value)">
|
<input id="vignetteColor" name="vignetteColor" type="text" value="#916dab" oninput="this.form.vignetteColorPicker.value = normalizeColor(this.value)">
|
||||||
<input id="vignetteColorPicker" name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColorInput.value = this.value">
|
<input name="vignetteColorPicker" type="color" value="#916dab" oninput="this.form.vignetteColor.value = this.value">
|
||||||
|
|
||||||
<label for="vignetteStartInput">Vignette Start</label>
|
<label for="vignetteStart">Vignette Start</label>
|
||||||
<input id="vignetteStartRange" name="vignetteStartRange" type="range" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartInput.value = this.value">
|
<input name="vignetteStartSlider" type="range" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStart.value = this.value">
|
||||||
<input id="vignetteStartInput" name="vignetteStartInput" type="number" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartRange.value = this.value">
|
<input id="vignetteStart" name="vignetteStart" type="number" min="0" max="2" step=".01" value="0.3" oninput="this.form.vignetteStartSlider.value = this.value">
|
||||||
|
|
||||||
<label for="vignetteEndInput">Vignette End</label>
|
<label for="vignetteEnd">Vignette End</label>
|
||||||
<input id="vignetteEndRange" name="vignetteEndRange" type="range" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndInput.value = this.value">
|
<input name="vignetteEndSlider" type="range" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEnd.value = this.value">
|
||||||
<input id="vignetteEndInput" name="vignetteEndInput" type="number" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndRange.value = this.value">
|
<input id="vignetteEnd" name="vignetteEnd" type="number" min="0" max="2" step=".01" value="0.7" oninput="this.form.vignetteEndSlider.value = this.value">
|
||||||
|
|
||||||
<label for="vignetteBlendModeInput">Vignette Blend Mode</label>
|
<label for="vignetteBlendMode">Vignette Blend Mode</label>
|
||||||
<select id="vignetteBlendModeInput" name="vignetteBlendModeInput">
|
<select id="vignetteBlendMode" name="vignetteBlendMode">
|
||||||
<option value="normal">Normal</option>
|
<option value="normal">Normal</option>
|
||||||
<option value="multiply" selected>Multiply</option>
|
<option value="multiply" selected>Multiply</option>
|
||||||
<option value="screen">Screen</option>
|
<option value="screen">Screen</option>
|
||||||
|
|
@ -271,7 +274,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="preview"></div>
|
<div id="preview"></div>
|
||||||
<script>
|
<script>
|
||||||
const createSVG = ({ width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }) =>
|
const createSVG = ({
|
||||||
|
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
|
||||||
|
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled,
|
||||||
|
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode
|
||||||
|
}) =>
|
||||||
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
|
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}">
|
||||||
<defs>
|
<defs>
|
||||||
<path id="lucy" d="M905.5 137.63c41.483-73.507 147.51-73.507 189 0l217.42 385.27c26.9 47.672 73.23 81.278 126.9 92.095l434.05 87.471c82.87 16.699 115.52 117.34 58.4 179.4l-299.67 325.58a188.15 188.15 0 0 0-48.49 149.06l50.83 439.33c9.69 83.71-75.98 146.04-152.89 110.88l-402.64-184.05a188.55 188.55 0 0 0-156.82 0l-402.63 184.05c-76.916 35.15-162.58-27.17-152.9-110.88l50.837-439.33c6.292-54.37-11.413-108.78-48.488-149.06l-299.68-325.58c-57.118-62.055-24.463-162.7 58.403-179.4l434.05-87.471c53.674-10.817 100-44.423 126.9-92.095z"/>
|
<path id="lucy" d="M905.5 137.63c41.483-73.507 147.51-73.507 189 0l217.42 385.27c26.9 47.672 73.23 81.278 126.9 92.095l434.05 87.471c82.87 16.699 115.52 117.34 58.4 179.4l-299.67 325.58a188.15 188.15 0 0 0-48.49 149.06l50.83 439.33c9.69 83.71-75.98 146.04-152.89 110.88l-402.64-184.05a188.55 188.55 0 0 0-156.82 0l-402.63 184.05c-76.916 35.15-162.58-27.17-152.9-110.88l50.837-439.33c6.292-54.37-11.413-108.78-48.488-149.06l-299.68-325.58c-57.118-62.055-24.463-162.7 58.403-179.4l434.05-87.471c53.674-10.817 100-44.423 126.9-92.095z"/>
|
||||||
|
|
@ -301,13 +308,13 @@
|
||||||
</g>
|
</g>
|
||||||
<g transform="translate(518 208) scale(0.13) rotate(31 1000 1000)">
|
<g transform="translate(518 208) scale(0.13) rotate(31 1000 1000)">
|
||||||
<use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/>
|
<use href="#lucy" fill="${colorScheme.lucy}" stroke="none"/>
|
||||||
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M937 1194c16 69 110 69 126 0"/>
|
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M937 1194c16 69 110 69 126 0"/>${sleepyLucyEnabled ? `
|
||||||
${winkingLucyLEnabled ?
|
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M607 994c16 69 110 69 126 0"/>
|
||||||
`<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M603 978.5l85 50l-85 50"/>` :
|
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M1267 994c16 69 110 69 126 0"/>` : `${winkingLucyLEnabled ? `
|
||||||
`<circle fill="${colorScheme.lucyFace}" stroke="none" cx="678.6" cy="1049.6" r="78.571"/>`}
|
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M613 978.5l85 50l-85 50"/>` : `
|
||||||
${winkingLucyREnabled ?
|
<circle fill="${colorScheme.lucyFace}" stroke="none" cx="678.6" cy="1049.6" r="78.571"/>`}${winkingLucyREnabled ? `
|
||||||
`<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M1397 978.5l-85 50l85 50"/>` :
|
<path fill="none" stroke="${colorScheme.lucyFace}" stroke-width="80" d="M1387 978.5l-85 50l85 50"/>` : `
|
||||||
`<circle fill="${colorScheme.lucyFace}" stroke="none" cx="1321.4" cy="1049.6" r="78.571"/>`}
|
<circle fill="${colorScheme.lucyFace}" stroke="none" cx="1321.4" cy="1049.6" r="78.571"/>`}`}
|
||||||
</g>
|
</g>
|
||||||
<g fill="${colorScheme.textShadow}" stroke="none" transform="translate(-18 13)">
|
<g fill="${colorScheme.textShadow}" stroke="none" transform="translate(-18 13)">
|
||||||
<use href="#gleam"/>
|
<use href="#gleam"/>
|
||||||
|
|
@ -397,34 +404,39 @@
|
||||||
|
|
||||||
const getFormData = () => {
|
const getFormData = () => {
|
||||||
const formData = new FormData(form)
|
const formData = new FormData(form)
|
||||||
const width = +formData.get("widthInput")
|
const width = +formData.get("width")
|
||||||
const height = +formData.get("heightInput")
|
const height = +formData.get("height")
|
||||||
const logoScale = +formData.get("logoScaleInput")
|
const logoScale = +formData.get("logoScale")
|
||||||
const logoRotation = +formData.get("logoRotationInput")
|
const logoRotation = +formData.get("logoRotation")
|
||||||
const patternScale = +formData.get("patternScaleInput")
|
const patternScale = +formData.get("patternScale")
|
||||||
const patternSpacing = +formData.get("patternSpacingInput")
|
const patternSpacing = +formData.get("patternSpacing")
|
||||||
const patternRotation = +formData.get("patternRotationInput")
|
const patternRotation = +formData.get("patternRotation")
|
||||||
const patternLucyRotation = +formData.get("patternLucyRotationInput")
|
const patternLucyRotation = +formData.get("patternLucyRotation")
|
||||||
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabledInput")
|
const winkingLucyLEnabled = !!formData.get("winkingLucyLEnabled")
|
||||||
const winkingLucyREnabled = !!formData.get("winkingLucyREnabledInput")
|
const winkingLucyREnabled = !!formData.get("winkingLucyREnabled")
|
||||||
const colorSchemeName = `${formData.get("colorSchemeInput")}`
|
const sleepyLucyEnabled = !!formData.get("sleepyLucyEnabled")
|
||||||
|
const colorSchemeName = `${formData.get("colorScheme")}`
|
||||||
const isCustomColorScheme = colorSchemeName === "custom"
|
const isCustomColorScheme = colorSchemeName === "custom"
|
||||||
const colorScheme = isCustomColorScheme ? {
|
const colorScheme = isCustomColorScheme ? {
|
||||||
textPrimary: `${formData.get("textPrimaryColorInput")}`,
|
textPrimary: `${formData.get("textPrimaryColor")}`,
|
||||||
textShadow: `${formData.get("textShadowColorInput")}`,
|
textShadow: `${formData.get("textShadowColor")}`,
|
||||||
lucy: `${formData.get("lucyColorInput")}`,
|
lucy: `${formData.get("lucyColor")}`,
|
||||||
lucyFace: `${formData.get("lucyFaceColorInput")}`,
|
lucyFace: `${formData.get("lucyFaceColor")}`,
|
||||||
lambda: `${formData.get("lambdaColorInput")}`,
|
lambda: `${formData.get("lambdaColor")}`,
|
||||||
outline: `${formData.get("outlineColorInput")}`,
|
outline: `${formData.get("outlineColor")}`,
|
||||||
background: `${formData.get("backgroundColorInput")}`,
|
background: `${formData.get("backgroundColor")}`,
|
||||||
backgroundLucy: `${formData.get("backgroundLucyColorInput")}`,
|
backgroundLucy: `${formData.get("backgroundLucyColor")}`,
|
||||||
} : colorSchemes.get(colorSchemeName)
|
} : colorSchemes.get(colorSchemeName)
|
||||||
const vignetteEnabled = !!formData.get("vignetteEnabledInput")
|
const vignetteEnabled = !!formData.get("vignetteEnabled")
|
||||||
const vignetteColor = `${formData.get("vignetteColorInput")}`
|
const vignetteColor = `${formData.get("vignetteColor")}`
|
||||||
const vignetteStart = +formData.get("vignetteStartInput")
|
const vignetteStart = +formData.get("vignetteStart")
|
||||||
const vignetteEnd = +formData.get("vignetteEndInput")
|
const vignetteEnd = +formData.get("vignetteEnd")
|
||||||
const vignetteBlendMode = `${formData.get("vignetteBlendModeInput")}`
|
const vignetteBlendMode = `${formData.get("vignetteBlendMode")}`
|
||||||
const props = { width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation, patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode }
|
const props = {
|
||||||
|
width, height, logoScale, logoRotation, patternScale, patternSpacing, patternRotation,
|
||||||
|
patternLucyRotation, winkingLucyLEnabled, winkingLucyREnabled, sleepyLucyEnabled,
|
||||||
|
colorScheme, vignetteEnabled, vignetteColor, vignetteStart, vignetteEnd, vignetteBlendMode
|
||||||
|
}
|
||||||
const svg = createSVG(props)
|
const svg = createSVG(props)
|
||||||
return { ...props, colorSchemeName, isCustomColorScheme, svg }
|
return { ...props, colorSchemeName, isCustomColorScheme, svg }
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue