2b:null 2c:["$","title",null,{"children":"Logotipo Generativo VISSE rev. 2 | Guilherme Ranoya | Observable"}] 31:T8fb,O logotipo gera automaticamente um conjunto de cores para composição da letra "E". Quando indicada uma cor de fundo, as cores geradas se modificam apenas em relação à saturação desta mesma cor, gerando um resultado mais próximo da monocromia; quando a cor de fundo escura é indicada, as cores geradas se tornam automaticamente mais claras. Também é possível indicar uma cor para as letras/plano de frente. ------ ## Versões Há 2 versões com 2 variações cada: As versões **logo** são a construção completa e horizontal do logotipo; as versões **sintese** são uma redução do logotipo ao formato quadrado contando apenas com o desenho do "V" sublinhado. Ambas as versões possuem variações com, ou sem, borda de reserva. ----- ## Uso / Aplicação É possível baixar um arquivo SVG com os logotipos já presentes como exemplos de aplicação neste documento, ou construir um novo (que de fato terá uma coloração diferente cada vez que for acessado) através de javascript. Para aplicar o logotipo em um documento web, siga estas instruções: ---- ### 1. Carregue o código do logotipo no documento HTML: ```html ``` ---- #### 2. Gere o código do logotipo com o formato desejado: 'sintesevisse_lean()`
Cria um logotipo reduzido e sem borda; `sintesevisse_borda()`
Cria um logotipo reduzido com borda; `logovisse_lean()`
Cria um logotipo horizontal sem borda; `logovisse_borda()`
Cria um logotipo horizontal com borda; **Parâmetros disponíveis**
`corBackground`
Registro RGB da cor de fundo `corPredominante`
Registro RGB da cor de frente (para letras e borda) **Exemplo** ```javascript let meucodigodologo = logovisse_lean({corProdominante: '#FFFF00', corBackground: '#222200'}); document.getElementById('divdologo').innerHTML = meucodigodologo.svg; ``` ----- ### 3. Defina tamanhos ou aplicações através de CSS Os códigos SVG gerados aplicam a class `logovisse` ao elemento `
\n## Exemplos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":780,"value":"html`${logovisse_lean().svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"html`${sintesevisse_border().svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"html`${logovisse_border().svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"html`${sintesevisse_border({ corBackground: \"#ffeecc\" }).svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"html`${\n logovisse_border({ corBackground: \"#debe34\", corPredominante: \"#000000\" }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"html`${sintesevisse_lean().svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"html`${\n sintesevisse_lean({\n corBackground: \"#000000\",\n corPredominante: \"#FFFFFF\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"html`${logovisse_lean({ corPredominante: \"#446622\" }).svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"html`${\n logovisse_border({\n corBackground: \"#450023\",\n corPredominante: \"#FFFFee\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"html`${logovisse_lean({ corBackground: \"#ffeecc\" }).svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":941,"value":"html`${\n sintesevisse_border({\n corBackground: \"#222244\",\n corPredominante: \"#FFFFFF\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"html`${logovisse_lean({ corBackground: \"#ffffff\" }).svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":839,"value":"html`${sintesevisse_lean({ corBackground: \"#eeffcc\" }).svg}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"html`${\n sintesevisse_lean({\n corBackground: \"#881177\",\n corPredominante: \"#FFFFFF\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":768,"value":"html`${\n logovisse_lean({\n corBackground: \"#450023\",\n corPredominante: \"#FF88ee\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"html`${\n sintesevisse_border({\n corBackground: \"#881177\",\n corPredominante: \"#FFFFFF\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1056,"value":"html`${\n sintesevisse_pluri({\n corBackground: \"#336677\",\n corPredominante: \"#FFFFFF\"\n }).svg\n}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1146,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"## Histórico e processo\n\nA presente versão do logotipo é o resultado da fusão de um primeiro [experimento generativo](https://observablehq.com/@ranoya/logotipo-visse) com um desenho formal elaborado posteriormente (abaixo):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"$32","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1091,"value":"viewof corA = Inputs.color({ label: \"cor de frente\", value: \"#214031\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1094,"value":"viewof corB = Inputs.color({ label: \"cor de fundo\", value: \"#ced9a6\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1098,"value":"apresentalogo = html`${logotipos(corA, corB)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"

\n## Apêndice\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"### Dimensionamento por CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"
\n### Gerador de Logotipo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":546,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":814,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":844,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1054,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"logotipos = function (cA, cB) {\n let code = `

`;\n\n code += `

${\n sintesevisse_pluri({\n corBackground: cB,\n corPredominante: cA\n }).svg\n }

`;\n\n code += `

${\n sintesevisse_border({\n corBackground: cB,\n corPredominante: cA\n }).svg\n }

`;\n\n code += `

${\n logovisse_border({\n corBackground: cB,\n corPredominante: cA\n }).svg\n }

`;\n\n code += `

${\n sintesevisse_pluri({\n corPredominante: cA\n }).svg\n }

`;\n\n code += `

${\n sintesevisse_border({\n corPredominante: cA\n }).svg\n }

`;\n\n code += `

${\n logovisse_border({\n corPredominante: cA\n }).svg\n }

`;\n\n code += `

${sintesevisse_pluri().svg}

`;\n\n code += `

${sintesevisse_border().svg}

`;\n\n code += `

${logovisse_border().svg}

`;\n\n code += `

`;\n\n return code;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":935,"value":"
\n### Funções para construção dos blocos coloridos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"
\n### Funções de extração de cor HSL e RGB","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"rgb2hsl = function (r, g, b) {\n let rabs, gabs, babs, rr, gg, bb, h, s, v, diff, diffc, percentRoundFn;\n rabs = r / 255;\n gabs = g / 255;\n babs = b / 255;\n (v = Math.max(rabs, gabs, babs)), (diff = v - Math.min(rabs, gabs, babs));\n diffc = (c) => (v - c) / 6 / diff + 1 / 2;\n percentRoundFn = (num) => Math.round(num * 100) / 100;\n if (diff == 0) {\n h = s = 0;\n } else {\n s = diff / v;\n rr = diffc(rabs);\n gg = diffc(gabs);\n bb = diffc(babs);\n\n if (rabs === v) {\n h = bb - gg;\n } else if (gabs === v) {\n h = 1 / 3 + rr - bb;\n } else if (babs === v) {\n h = 2 / 3 + gg - rr;\n }\n if (h < 0) {\n h += 1;\n } else if (h > 1) {\n h -= 1;\n }\n }\n return {\n h: Math.round(h * 360),\n s: percentRoundFn(s * 100),\n v: percentRoundFn(v * 100)\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"hex2rgb = function (hex) {\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result\n ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n }\n : null;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"function hsl2hex(h, s, l) {\n l /= 100;\n const a = (s * Math.min(l, 1 - l)) / 100;\n const f = (n) => {\n const k = (n + h / 30) % 12;\n const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);\n return Math.round(255 * color)\n .toString(16)\n .padStart(2, \"0\"); // convert to Hex and prefix \"0\" if needed\n };\n return `#${f(0)}${f(8)}${f(4)}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body"