Gráficos SVG - Bucles - Ejercicios (3)

El objetivo de estos ejercicios es practicar los bucles for y la creación de gráficos SVG que se tratan en las lecciones SVG y Formas SVG de los apuntes de HTML y CSS.

Los dibujos se generarán utilizando la biblioteca Brython. Cada dibujo se puede guardar en un fichero distinto que se puede llamar svg_3_X_Y.html, donde X es el número de dibujo e Y el número de dibujo. Las imágenes SVG se muestran con un borde negro. En cada ejercicio se propociona una plantilla de la página html que indica la porción del plano SVG mostrado en la imagen. En cada ejercicio se porporciona también una imagen con la posición de los ejes. Las figuras se han dibujado siempre en una zona de 300px x 300px con un margen de 10px alrededor, por lo que el tamaño total de las imágenes es de 320px x 320px.

Se pueden consultar unas posibles soluciones.

Se pueden consultar también unos ejemplos de ejercicios resueltos.

Gráficos SVG (3) - 1 - Una fórmula, una forma

Cree las siguientes imágenes SVG a partir de la plantilla siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>SVG (3) 1. Ejercicios SVG (3). Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

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

Nota: Los valores de la imagen SVG se han elegido para mostrar el primer cuadrante y los ejes de coordenadas. La posición de los ejes sería la siguiente:

Plantilla de ejercicio


Escriba seis programas que generen las siguientes imágenes:

SVG (3) 1 1 SVG (3) 1 2 SVG (3) 1 3

SVG (3) 1 4 SVG (3) 1 5 SVG (3) 1 6

Gráficos SVG (3) - 2 - Varias fórmulas, una forma

Cree las siguientes imágenes SVG a partir de la plantilla siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>SVG (3) 2. Ejercicios SVG (3). Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

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

Nota: Los valores de la imagen SVG se han elegido para mostrar el primer cuadrante y los ejes de coordenadas. La posición de los ejes sería la siguiente:

Plantilla de ejercicio


Escriba seis programas que generen las siguientes imágenes:

SVG (3) 2 1 SVG (3) 2 2 SVG (3) 2 3

SVG (3) 2 4 SVG (3) 2 5 SVG (3) 2 6

Gráficos SVG (3) - 3 - Varias fórmulas, varias formas

Cree las siguientes imágenes SVG a partir de la plantilla siguiente.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>SVG (3) 3. Ejercicios SVG (3). Brython. Python</title>
  <script type="text/javascript" src="http://brython.info/src/brython_dist.js"></script>
  <script type="text/python3">
# Aquí se escribiría el programa de Python
  </script>
</head>

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

Nota: Los valores de la imagen SVG se han elegido para mostrar el primer cuadrante y los ejes de coordenadas. La posición de los ejes sería la siguiente:

Plantilla de ejercicio


Escriba seis programas que generen las siguientes imágenes:

SVG (3) 3 1 SVG (3) 3 2 SVG (3) 3 3

SVG (3) 3 4 SVG (3) 3 5 SVG (3) 3 6