Gráficos SVG - Brython - Soluciones (3)

Se ofrecen a continuación unas posibles soluciones de los ejercicios SVG Brython (3).

Gráficos SVG Brython (3) - 1

Gráficos SVG Brython (3) - 1 - Figura 1

SVG Brython (3) 1 1
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 1 1. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(4):
    for j in range(11):
        document["imagen"] <= svg.circle(cx=30*j, cy=30*i, r=5, fill="black")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por once puntos.

SVG Brython (3) 1 1 a

Para generarla se pueden utilizar bucles anidados.

for i in range(4):
    for j in range(11):
        ...

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Brython (3) 1 1 b

El bucle anidado podría ser:

for i in range(4):
    for j in range(11):
        document["imagen"] <= svg.circle(cx=30*j, cy=30*i, r=5, fill="black")

Gráficos SVG Brython (3) - 1 - Figura 2

SVG Brython (3) 1 2
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 1 2. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(9):
    for j in range(6):
        document["imagen"] <= svg.circle(cx=60*j, cy=30*i, r=5, fill="black")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como nueve filas formadas por seis puntos.

SVG Brython (3) 1 2 a

Para generarla se pueden utilizar bucles anidados.

for i in range(9):
    for j in range(6):
        ...

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Brython (3) 1 2 b

El bucle anidado podría ser:

for i in range(9):
    for j in range(6):
        document["imagen"] <= svg.circle(cx=60*j, cy=30*i, r=5, fill="black")

Gráficos SVG Brython (3) - 1 - Figura 3

SVG Brython (3) 1 3
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 1 3. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(4):
    for j in range(8):
        document["imagen"] <= svg.circle(cx=60*j+60, cy=60*i+60, r=60,
                                         stroke="black", stroke_width=1, fill="none")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por ocho círculos. Para dibujar los círculos, lo importante es conocer los centros de los círculos, que se indican en la imagen siguiente.

SVG Brython (3) 1 3 a

Para generarla se pueden utilizar bucles anidados.

for i in range(4):
    for j in range(8):
        ...

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Brython (3) 1 3 b

El bucle anidado podría ser:

for i in range(4):
    for j in range(8):
        document["imagen"] <= svg.circle(cx=60*j+60, cy=60*i+60, r=60,
                                         stroke="black", stroke_width=1, fill="none")

Gráficos SVG Brython (3) - 1 - Figura 4

SVG Brython (3) 1 4
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 1 4. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(4):
    for j in range(12):
        document["imagen"] <= svg.rect(x=40*j, y=40*i, width=20, height=20,
                                       stroke="black", stroke_width=1, fill="none")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por doce cuadrados. Para dibujar los cuadrados, lo importante es conocer las esquinas superiores izquierda de los cuadrados, que se indican en la imagen siguiente.

SVG Brython (3) 1 4 a

Para generarla se pueden utilizar bucles anidados.

for i in range(4):
    for j in range(12):
        ...

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Brython (3) 1 4 b

El bucle anidado podría ser:

for i in range(4):
    for j in range(12):
        document["imagen"] <= svg.rect(x=40*j, y=40*i, width=20, height=20,
                                       stroke="blue", stroke_width=1, fill="none")

Gráficos SVG Brython (3) - 1 - Figura 5

SVG Brython (3) 1 5
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 1 5. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(4):
    for j in range(20):
        document["imagen"] <= svg.rect(x=30*j, y=80*i, width=20, height=20,
                                       stroke="black", stroke_width=1, fill="none")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como cuatro filas formadas por veinte cuadrados. Para dibujar los cuadrados, lo importante es conocer las esquinas superiores izquierda de los cuadrados, que se indican en la imagen siguiente.

SVG Brython (3) 1 5 a

Para generarla se pueden utilizar bucles anidados.

for i in range(4):
    for j in range(20):
        ...

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Brython (3) 1 5 b

El bucle anidado podría ser:

for i in range(4):
    for j in range(20):
        document["imagen"] <= svg.rect(x=30*j, y=80*i, width=20, height=20,
                                       stroke="blue", stroke_width=1, fill="none")

Gráficos SVG Brython (3) - 1 - Figura 6

SVG Brython (3) 1 6
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 1 6. Ejercicios SVG (). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(6):
    for j in range(12):
        document["imagen"] <= svg.rect(x=50*j, y=50*i, width=46, height=46,
                                       stroke="black", stroke_width=1, fill="none")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como seis filas formadas por doce cuadrados. Para dibujar los cuadrados, lo importante es conocer las esquinas superiores izquierda de los cuadrados, que se indican en la imagen siguiente.

SVG Brython (3) 1 6 a

Para generarla se pueden utilizar bucles anidados.

for i in range(6):
    for j in range(12):
        ...

Ahora hay que relacionar los valores de i y j con las coordenadas de los puntos.

SVG Brython (3) 1 6 b

El bucle anidado podría ser:

for i in range(6):
    for j in range(12):
        document["imagen"] <= svg.rect(x=50*j, y=50*i, width=46, height=46,
                                       stroke="blue", stroke_width=1, fill="none")

Gráficos SVG Brython (3) - 2

Gráficos SVG Brython (3) - 2 - Figura 1

SVG Brython (3) 2 1
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 1. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(5):
    for j in range(10):
        document["imagen"] <= svg.line(x1=60*j, y1=60*i, x2=60*j+40, y2=60*i+40,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+40, y1=60*i, x2=60*j, y2=60*i+40,
                                       stroke="black", stroke_width=1)

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como cinco filas formadas por diez cruces.

SVG Brython (3) 2 1 a

Para generarla se pueden utilizar bucles anidados.

for i in range(5):
    for j in range(10):
        ...

Para dibujar las cruces, habrá que dibujar dos segmentos en cada iteración. Para cada segmento, habrá que conocer sus vértices, que se indican en la imagen siguiente.

SVG Brython (3) 2 1 b

Ahora hay que relacionar los valores de i y j con las coordenadas de cada uno de los puntos.

SVG Brython (3) 2 1 c

Finalmente, el bucle anidado podría ser:

for i in range(5):
    for j in range(10):
        document["imagen"] <= svg.line(x1=60*j, y1=60*i, x2=60*j+40, y2=60*i+40,
                                      stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+40, y1=60*i, x2=60*j, y2=60*i+40,
                                      stroke="black", stroke_width=1)

Cada uno de los parámetros del dibujo interviene en el bucle:

Gráficos SVG Brython (3) - 2 - Figura 2

SVG Brython (3) 2 2
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 2. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(15):
    for j in range(30):
        document["imagen"] <= svg.line(x1=20*j, y1=20*i, x2=20*j+15, y2=20*i+15,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=20*j+15, y1=20*i, x2=20*j, y2=20*i+15,
                                       stroke="black", stroke_width=1)

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Este ejercicio es muy similar al anterior. La diferencia con respecto al anterior es que las cruces son más pequeñas y hay más cruces.

Si el código del ejercicio anterior era:

for i in range(5):
    for j in range(10):
        document["imagen"] <= svg.line(x1=60*j, y1=60*i, x2=60*j+40, y2=60*i+40,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+40, y1=60*i, x2=60*j, y2=60*i+40,
                                       stroke="black", stroke_width=1)

Habría que cambiar:

Con lo que el bucle anidado quedaría:

for i in range(15):
    for j in range(30):
        document["imagen"] <= svg.line(x1=20*j, y1=20*i, x2=20*j+15, y2=20*i+15,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=20*j+15, y1=20*i, x2=20*j, y2=20*i+15,
                                       stroke="black", stroke_width=1)

Gráficos SVG Brython (3) - 2 - Figura 3

SVG Brython (3) 2 3
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 3. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(7):
    for j in range(15):
        document["imagen"] <= svg.line(x1=40*j, y1=40*i, x2=40*j+40, y2=40*i+40,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=40*j+40, y1=40*i, x2=40*j, y2=40*i+40,
                                       stroke="black", stroke_width=1)

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Este ejercicio vuelve a ser muy similar a los anteriores, aunque a primera vista pueda no parecerlo. La diferencia con respecto al anterior es que las cruces son más grandes y no hay espacio entre ellas.

SVG Brython (3) 2 3 a

Si el ancho del dibujo son 600 unidades y hay quince cruces por fila, cada cruz tiene un ancho de 40. Como las cruces son cuadradas, la altura de cada fila es también 40.

Si el código del primer ejercicio era:

for i in range(5):
    for j in range(10):
        document["imagen"] <= svg.line(x1=60*j, y1=60*i, x2=60*j+40, y2=60*i+40,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+40, y1=60*i, x2=60*j, y2=60*i+40,
                                       stroke="black", stroke_width=1)

Habría que cambiar:

Con lo que el bucle anidado quedaría:

for i in range(7):
    for j in range(15):
        document["imagen"] <= svg.line(x1=40*j, y1=40*i, x2=40*j+40, y2=20*i+40,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=40*j+40, y1=40*i, x2=40*j, y2=40*i+40,
                                       stroke="black", stroke_width=1)

Gráficos SVG Brython (3) - 2 - Figura 4

SVG Brython (3) 2 4
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 4. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(6):
    for j in range(8):
        document["imagen"] <= svg.line(x1=40*j+20, y1=40*i, x2=40*j+20, y2=40*i+20,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=40*j+10, y1=40*i+10, x2=40*j+30, y2=40*i+10,
                                       stroke="black", stroke_width=1)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

La imagen que queremos obtener se puede interpretar como seis filas formadas por ocho cruces.

SVG Brython (3) 2 4 a

Para generarla se pueden utilizar bucles anidados.

for i in range(6):
    for j in range(8):
        ...

Para dibujar las cruces, habrá que dibujar dos segmentos en cada iteración. Para cada segmento, habrá que conocer sus vértices, que se indican en la imagen siguiente.

SVG Brython (3) 2 4 b

Ahora hay que relacionar los valores de i y j con las coordenadas de cada uno de los puntos.

Así, los valores de las coordenadas de los puntos serían:

SVG Brython (3) 2 4 c

Finalmente, el bucle anidado podría ser:

for i in range(6):
    for j in range(8):
        document["imagen"] <= svg.line(x1=40*j+20, y1=40*i, x2=40*j+20, y2=40*i+20,
                                      stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=40*j+10, y1=40*i+10, x2=40*j+30, y2=40*i+10,
                                      stroke="black", stroke_width=1)

Gráficos SVG Brython (3) - 2 - Figura 5

SVG Brython (3) 2 5
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 5. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(6):
    for j in range(11):
        document["imagen"] <= svg.line(x1=50*j+10, y1=50*i, x2=50*j+50, y2=50*i+10,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=50*j+50, y1=50*i+10, x2=50*j+40, y2=50*i+50,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=50*j+40, y1=50*i+50, x2=50*j, y2=50*i+40,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=50*j, y1=50*i+40, x2=50*j+10, y2=50*i,
                                       stroke="black", stroke_width=1)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 2 - Figura 6

SVG Brython (3) 2 6
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 6. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(4):
    for j in range(9):
        document["imagen"] <= svg.line(x1=60*j+30, y1=60*i, x2=60*j+30, y2=60*i+15,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+30, y1=60*i+45, x2=60*j+30, y2=60*i+60,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j, y1=60*i+30, x2=60*j+15, y2=60*i+30,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+45, y1=60*i+30, x2=60*j+60, y2=60*i+30,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+30, y1=60*i+15, x2=60*j+45, y2=60*i+30,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+45, y1=60*i+30, x2=60*j+30, y2=60*i+45,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+30, y1=60*i+45, x2=60*j+15, y2=60*i+30,
                                       stroke="black", stroke_width=1)
        document["imagen"] <= svg.line(x1=60*j+15, y1=60*i+30, x2=60*j+30, y2=60*i+15,
                                       stroke="black", stroke_width=1)
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 3

Gráficos SVG Brython (3) - 3 - Figura 1

SVG Brython (3) 3 1
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 1. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(6):
    for j in range(6):
        document["imagen"] <= svg.line(x1=120*j, y1=0, x2=120*i, y2=300,
                                       stroke="black", stroke_width=1)

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 3 - Figura 2

SVG Brython (3) 3 2
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 2. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(11):
    for j in range(11):
        document["imagen"] <= svg.line(x1=60*j, y1=0, x2=60*i, y2=300,
                                       stroke="black", stroke_width=1)

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 3 - Figura 3

SVG Brython (3) 3 3
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 3. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(6):
    for j in range(12):
        document["imagen"] <= svg.circle(cx=50*j, cy=50*i, r=5,
                                         fill="black")
        document["imagen"] <= svg.circle(cx=50*j+25, cy=50*i+25, r=5,
                                         fill="red")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 3 - Figura 4

SVG Brython (3) 3 4
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 4. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(6):
    for j in range(12):
        document["imagen"] <= svg.circle(cx=50*j, cy=50*i, r=5,
                                         fill="black")

for i in range(5):
    for j in range(11):
        document["imagen"] <= svg.circle(cx=50*j+25, cy=50*i+25, r=5,
                                         fill="red")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 3 - Figura 5

SVG Brython (3) 3 5
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 5. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(7):
    for j in range(13):
        document["imagen"] <= svg.circle(cx=50*j, cy=50*i, r=5,
                                         fill="black")

for i in range(6):
    for j in range(12):
        document["imagen"] <= svg.circle(cx=50*j+25, cy=50*i+25, r=5,
                                         fill="black")

  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>

Gráficos SVG Brython (3) - 3 - Figura 6

SVG Brython (3) 3 6
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>SVG (3) 2 6. Ejercicios SVG (3). Brython. Python. Bartolomé Sintes Marco</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/brython@3.9.0/brython_stdlib.js"></script>
  <script type="text/python3">
from browser import document
import browser.svg as svg

for i in range(5):
    for j in range(10):
        document["imagen"] <= svg.rect(x=60*j, y=60*i, width=40, height=40,
                                       stroke="black", stroke_width=1, fill="none")

for i in range(4):
    for j in range(9):
        document["imagen"] <= svg.rect(x=60*j+30, y=60*i+30, width=40, height=40,
                                       stroke="black", stroke_width=1, fill="none")
  </script>
</head>

<body onload="brython()">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    width="620" height="320" viewBox="-10 -10 620 320"
    style="border: black 1px solid" id="imagen">
  </svg>
</body>
</html>