Interaction Designer, Creative Technologist, Professor and Researcher
Published
Edited
Jun 1, 2022
<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>
<rect x=0 y=0 width=500 height=500 fill="#FF0000" />
<line x1=10 y1=10 x2=250 y2=300 stroke="#FFFFFF" stroke-width=10 />
</svg>
<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>
<style>
.minhalinha {
x: 10;
y: 10;
stroke: #FFFFFF;
stroke-width: 25;
}
</style>
<rect style="x: 0; y: 0; width: 500; height: 500; fill: #00FF00;" />
<line x2=300 y2=400 class="minhalinha" />
</svg>
<svg viewBox="0 20 500 330" style="width: 500; height: 350;">
<style>
.pontos {
stroke: black;
stroke-width: 3;
fill: black;
}
.letras {
font-family: Helvetica, Arial, sans-serif;
font-size: 30;
fill: black;
stroke: none;
text-anchor: middle;
}
</style>
<path id="AB" d="M 100 350 l 150 -300" stroke="red" stroke-width=3 fill="none" />
<path id="BC" d="M 250 50 l 150 300" stroke="red" stroke-width=3 fill="none" />
<path d="M 175 200 l 150 0" stroke="green" stroke-width=3 fill="none" />
<path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width=5 fill="none" />
<!-- Pontos -->
<circle class="pontos" id="pontoA" cx=100 cy=350 r=3 />
<circle class="pontos" id="pontoB" cx=250 cy=50 r=3 />
<circle class="pontos" id="pontoC" cx=400 cy=350 r=3 />
<!-- Letras -->
<text class="letras" x=100 y=350 dx=-30>A</text>
<text class="letras" x=250 y=50 dy=-10>B</text>
<text class="letras" x=400 y=350 dx=30>C</text>
</svg>
<style>
@keyframes vaievolta {
0% {
x: 10;
y: 30;
fill: red;
}
50% {
x: 200;
y: 10;
fill: yellow;
}
100% {
x: 10;
y: 30;
fill: red;
}
}
.anima {
animation-name: vaievolta;
animation-duration: 4s;
animation-iteration-count: infinite;
}
</style>
<svg viewBox="0 0 500 100" style='width: 500px; height: 100px; border: 1px solid black;'>
<rect class="anima" width=60 height=60 />
</svg>
<svg onmousemove="move(event)" viewBox="0 0 500 500" style='width: 500px; border: 1px solid black'>
<rect id='teste' style="width: 250; x: 100; y: 50; height:100; fill: #FF0000" />
</svg>
<script>
function move(event) {
document.getElementById('teste').style.x = event.clientX;
document.getElementById('teste').style.y = event.clientY;
}
</script>
<svg id="meusvg" viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>
</svg>
<script>
let conteudo = "";
for (let k = 0; k < 5; k++) {
conteudo += `<rect x=` + (Math.random() * 400) + ` y=` + (Math.random() * 400) +
` width=100 height=100 stroke='#FF0000' stroke-width=2 fill="none" />`;
}
document.getElementById('meusvg').innerHTML = conteudo;
</script>
injectsvg = function () {
let conteudo = `<svg viewBox="0 0 500 500" style='width: 500px; height: 500px; border: 1px solid black;'>`;
for (let k = 0; k < 5; k++) {
conteudo +=
`<rect x=` +
Math.random() * 400 +
` y=` +
Math.random() * 400 +
` width=100 height=100 stroke='#FF0000' stroke-width=2 fill="none" />`;
}
conteudo += `</svg>`;
return conteudo;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.