30:[] 2e:{"title":"Introdução ao SVG","cells":[{"id":0,"value":"md`# Introdução ao SVG\n\nSVG = **S**calable **V**ector **G**raphics\n\nUm tutorial bem completo pode ser encontrado em\nhttps://www.w3schools.com/graphics/svg_intro.asp\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"md`### SVG básico\n\nElementos **rect**, **line** e **circle**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`### SVG com estilos e CSS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`### SVG Path\nGeometria dada pelo atributo **d**\n\nd = \"*cmd* *coords* *cmd* *coords* ...\" \n\nComandos para retas:\n\n - M = **M**over para\n - L = traçar **L**inha até\n - H = traçar linha **H**orizontal\n - V = traçar linha **V**ertical\n - Z = fechar o caminho\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`### Path com curvas\n - C = **C**urva Bézier cúbica\n - S = continuação **S**uave de bézier cúbica\n - Q = Bézier **Q**uadrática \n - T = continuação de Bézier quadrática`","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`### Path com coordenadas relativas\n\nComandos em minúsculas usam coordenadas relativas ao último ponto`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"html``\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`### Path com arcos de elipse\n\n**A** *rx* *ry* *ângulo-rotacao-x* *liga-arco-longo* *liga-varredura-contrária* *x* *y*\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`### Texto`","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"md`### Conteúdo variável usando reatividade`","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"desenho = ``","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`### Desenho a partir de dados`","pinned":true,"hidden":false,"mode":"ojs"},{"id":355,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":370,"value":"dados = [100,250,10,100,200,140]","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"desenho2 = \n{\n let rects = \"\";\n let y = 30;\n for (let w of dados) {\n rects += ``;\n y += 30;\n }\n return rects;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}