for (2). Soluciones. Ejercicios (sin formularios). PHP. Bartolomé Sintes Marco. www.mclibre.org

En esta página se muestran una parte de las soluciones de los ejercicios for (2), concretamente el fragmento PHP, sin el principio ni el final de la página que se pueden dejar en fragmentos HTML.

for (2) 01 - Círculos en fila (1)

El título <h2> muestra el texto en singular si sólo se dibuja un círculo y en plural si se dibujan varios, por lo que habrá que usar una estructura if ... else ....
En el código fuente HTML del programa de ejemplo se puede ver que sólo se repite una línea, la que crea los <circle>. Esa línea es la que formará el cuerpo del bucle for, que debe ejecutarse tantas veces como indique el valor obtenido al azar.

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), la tabla de valores del atributo cx es la siguiente:

Círculo	0	1	2	3	4	...	`\$\i`
cx	30	120	210	300	390	...	`\$\c\x`

Se trata de una sucesión aritmética cuya fórmula es `\$\c\x = 90 * \$\i + 30`

El programa puede ser el siguiente:

<?php
$circulos = rand(1, 10);

if ($circulos == 1) {
    print "  <h2>$circulos círculo</h2>\n";
} else {
    print "  <h2>$circulos círculos</h2>\n";
}

print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"870\" height=\"60\" style=\"border: black 1px solid\">\n";

for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"" . 90 * $i + 30 . "\" cy=\"30\" r=\"30\" fill=\"black\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Otra manera de enfocar el programa consiste en calcular los valores de la posición horizontal de los círculos cx de forma iterativa, observando que el primer valor es 30 y va aumentado de 90 en 90:

El programa puede ser el siguiente:

<?php
$circulos = rand(1, 10);

if ($circulos == 1) {
    print "  <h2>$circulos círculo</h2>\n";
} else {
    print "  <h2>$circulos círculos</h2>\n";
}

print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" width=\"870\" height=\"60\" style=\"border: black 1px solid\">\n";

$cx = 30;
for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"$cx\" cy=\"30\" r=\"30\" fill=\"black\" />\n";
    $cx = $cx + 90;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 02 - Círculos en fila (2)

Los valores del atributo cx son los mismos que los del ejercicio anterior.

El atributo width de la etiqueta <svg> no es un valor fijo, como en el ejercicio anterior, sino que depende del número total de círculos de la figura. La fórmula será una función de la variable `\$\c\i\r\c\u\l\o\s`:

Círculos	1	2	3	4	5	...	`\$\c\i\r\c\u\l\o\s`
width	60	150	240	330	420	...	`$width`

Se trata de una sucesión aritmética cuya fórmula es `$width = 90 * \$\c\i\r\c\u\l\o\s - 30`

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), el programa puede ser el siguiente:

<?php
$circulos = rand(1, 10);

if ($circulos == 1) {
    print "  <h2>$circulos círculo</h2>\n";
} else {
    print "  <h2>$circulos círculos</h2>\n";
}

print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" "
    . "width=\"" . 90 * $circulos - 30 . "\" height=\"60\" style=\"border: black 1px solid\">\n";

for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"" . 90 * $i + 30 . "\" cy=\"30\" r=\"30\" fill=\"black\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores de la posición horizontal de los círculos cx de forma iterativa, el programa puede ser el siguiente:

<?php
$circulos = rand(1, 10);

if ($circulos == 1) {
    print "  <h2>$circulos círculo</h2>\n";
} else {
    print "  <h2>$circulos círculos</h2>\n";
}

print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" "
    . "width=\"" . 90 * $circulos - 30 . "\" height=\"60\" style=\"border: black 1px solid\">\n";

$cx = 30;
for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"$cx\" cy=\"30\" r=\"30\" fill=\"black\" />\n";
    $cx = $cx + 90;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 03 - Círculos en fila (3)

Este ejercicio es una generalización del ejercicio anterior. En las fórmulas de este ejercicio debe aparecer una variable más: el radio de los círculos. Dándonos cuenta de que los valores `30`, `60` y `90` que aparecían en los ejercicios anteriores se debían a que el radio de los círculos era 30, podemos deducir cómo habrá que modificar las fórmulas de ejercicios anteriores (`30 = $radio`, `60 = 2 * $radio` y `90 = 3 * $radio`).
Otra manera de deducir estas fórmulas es analizar el dibujo en función de `$radio`, como se hace a continuación.
La altura height de la etiqueta <svg> es `$height = 2 * $radio`

En el caso del tamaño width de la etiqueta <svg>:

La tabla de valores del atributo width en función del número de círculos es la siguiente:

Círculos	1	2	3	4	5	...	`\$\c\i\r\c\u\l\o\s`
width	`2 * $radio`	`5 * $radio`	`8 * $radio`	`11 * $radio`	`14 * $radio`	...	`$width`

Se trata de una sucesión aritmética cuya fórmula es `$width = (3 * \$\c\i\r\c\u\l\o\s - 1) * $radio = 3 * $radio * \$\c\i\r\c\u\l\o\s - $radio`.

En el caso de la posición cx:

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), la tabla de valores del atributo cx es la siguiente:

Círculo	0	1	2	3	4	...	`\$\i`
cx	`1 * $radio`	`4 * $radio`	`7 * $radio`	`10 * $radio`	`13 * $radio`	...	`\$\c\x`

Se trata de una sucesión aritmética cuya fórmula es `\$\c\x = (3 * \$\i + 1) * $radio = 3 * $radio * \$\i + $radio`.

El programa puede ser el siguiente:

<?php
$circulos = rand(1, 10);
$radio    = rand(10, 50);

if ($circulos == 1) {
    print "  <h2>$circulos círculo de $radio px</h2>\n";
} else {
    print "  <h2>$circulos círculos de $radio px</h2>\n";
}

print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" "
    . "width=\"" . 3 * $radio * $circulos - $radio . "\" height=\"" . 2 * $radio
    . "\" style=\"border: black 1px solid\">\n";

for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"" . 3 * $radio * $i + $radio . "\" cy=\"$radio\" r=\"$radio\" fill=\"black\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores de la posición horizontal de los círculos cx de forma iterativa, el programa puede ser el siguiente:

<?php
$circulos = rand(1, 10);
$radio    = rand(10, 50);

if ($circulos == 1) {
    print "  <h2>$circulos círculo de $radio px</h2>\n";
} else {
    print "  <h2>$circulos círculos de $radio px</h2>\n";
}

print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" "
    . "width=\"" . 3 * $radio * $circulos - $radio . "\" height=\"" . 2 * $radio
    . "\" style=\"border: black 1px solid\">\n";

$cx = $radio;
for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"$cx\" cy=\"$radio\" r=\"$radio\" fill=\"black\" />\n";
    $cx = $cx + 3 * $radio;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 04 - Líneas (1)

En el código fuente HTML del programa de ejemplo se puede ver que sólo se repite una línea, la que crea los <line>. Esa línea es la que formará el cuerpo del bucle for, que debe ejecutarse tantas veces como indique el valor obtenido al azar.

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), la tabla de valores del atributo x2 es la siguiente:

Línea	0	1	2	3	4	...	`$i`
x2	10	60	110	160	210	...	`$x2`

Se trata de una sucesión aritmética cuya fórmula es `$x2 = 50 * $i + 10` y el programa puede ser el siguiente:

<?php
$lineas = rand(3, 10);

print "  <h2>$lineas líneas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"500\" height=\"100\" style=\"border: black 1px solid\" >\n";

for ($i = 0; $i < $lineas; $i++) {
    print "      <line x1=\"10\" y1=\"0\" x2=\"" . 50 * $i + 10 . "\" y2=\"100\" stroke=\"red\" stroke-width=\"1\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores de la posición horizontal del extremo inferior de cada línea x2 de forma iterativa, el programa puede ser el siguiente:

<?php
$lineas = rand(3, 10);

print "  <h2>$lineas líneas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"500\" height=\"100\" style=\"border: black 1px solid\" >\n";

$x2 = 10;
for ($i = 0; $i < $lineas; $i++) {
    print "      <line x1=\"10\" y1=\"0\" x2=\"$x2\" y2=\"100\" stroke=\"red\" stroke-width=\"1\" />\n";
    $x2 = $x2 + 50;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 05 - Líneas (2)

En el código fuente HTML del programa de ejemplo se puede ver que sólo se repite una línea, la que crea los <line>. Esa línea es la que formará el cuerpo del bucle for, que debe ejecutarse tantas veces como indique el valor obtenido al azar.

Los valores de los atributos width y viewBox dependen del número de líneas del dibujo y son los siguientes:

Líneas	3	4	5	6	7	...	`$l\i\n\eas`
width	150	200	250	300	350	...	`$width`

Se trata de una sucesión aritmética cuya fórmula es `$width = 50 * $l\i\n\eas`.

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), la tabla de valores del atributo x2 es la siguiente:

Línea	0	1	2	3	4	...	`\$\i`
x2	0	50	100	150	200	...	`\$\x\2`

Se trata de una sucesión aritmética cuya fórmula es `$x2 = 50 * $i`.

El programa puede ser el siguiente:

<?php
$lineas = rand(3, 10);

print "  <h2>$lineas líneas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 50 * $lineas . "\" height=\"120\" "
    . " viewBox=\" -10 -10 " . 50 * $lineas . " 120\" style=\"border: black 1px solid\" >\n";

for ($i = 0; $i < $lineas; $i++) {
    print "      <line x1=\"0\" y1=\"0\" x2=\"" . 50 * $i . "\" y2=\"100\" stroke=\"green\" stroke-width=\"1\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores de la posición horizontal del extremo inferior de cada línea x2 de forma iterativa, el programa puede ser el siguiente:

<?php
$lineas = rand(3, 10);

print "  <h2>$lineas líneas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 50 * $lineas . "\" height=\"120\" "
    . " viewBox=\" -10 -10 " . 50 * $lineas . " 120\" style=\"border: black 1px solid\" >\n";

$x2 = 0;
for ($i = 0; $i < $lineas; $i++) {
    print "      <line x1=\"0\" y1=\"0\" x2=\"$x2\" y2=\"100\" stroke=\"green\" stroke-width=\"1\" />\n";
    $x2 = $x2 + 50;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 06 - Líneas (3)

En el código fuente HTML del programa de ejemplo se puede ver que sólo se repite una línea, la que crea los <line>. Esa línea es la que formará el cuerpo del bucle for, que debe ejecutarse tantas veces como indique el valor obtenido al azar.

Los valores de los atributos width y view dependen del número de líneas del dibujo y son los siguientes:

Líneas	3	4	5	6	7	...	`$l\i\n\eas`
width	125	175	225	275	325	...	`$width`

Se trata de una sucesión aritmética cuya fórmula es `$width = 50 * $l\i\n\eas - 25`.

Los valores del atributo x1 dependen del número de líneas del dibujo y son los siguientes:

Líneas	3	4	5	6	7	...	`$l\i\n\eas`
x1	50	75	100	125	150	...	`$x1`

Se trata de una sucesión aritmética cuya fórmula es `$x1 = 25 * $l\i\n\eas - 25`.

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), los valores del atributo x2 son los siguientes:

Línea	0	1	2	3	4	...	`$i`
x2	0	50	100	150	200	...	`$x2`

Se trata de una sucesión aritmética cuya fórmula es `$x2 = 50 * $i`.

El programa puede ser el siguiente:

<?php
$lineas = rand(3, 10);

print "  <h2>$lineas líneas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 50 * $lineas - 25 . "\" height=\"120\" "
    . " viewBox=\" -10 -10 " . 50 * $lineas - 25 . " 120\" style=\"border: black 1px solid\">\n";

for ($i = 0; $i < $lineas; $i++) {
    print "      <line x1=\"" . 25 * $lineas - 25 . "\" y1=\"0\" x2=\"" . 50 * $i
        . "\" y2=\"100\" stroke=\"blue\" stroke-width=\"1\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores de la posición horizontal del extremo inferior de cada línea x2 de forma iterativa, el programa puede ser el siguiente:

<?php
$lineas = rand(3, 10);

print "  <h2>$lineas líneas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 50 * $lineas - 25 . "\" height=\"120\" "
    . " viewBox=\" -10 -10 " . 50 * $lineas - 25 . " 120\" style=\"border: black 1px solid\">\n";

$x2 = 0;
for ($i = 0; $i < $lineas; $i++) {
    print "      <line x1=\"" . 25 * $lineas - 25 . "\" y1=\"0\" x2=\"$x2\" y2=\"100\" stroke=\"blue\" stroke-width=\"1\" />\n";
    $x2 = $x2 + 50;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 07 - Arco iris circular

Los valores de los atributos width, height y viewBox (3º y 4º valor) dependen del número de círculos del dibujo y son los siguientes:

Círculos	3	4	5	6	7	...	`$c\í\r\c\u\l\o\s`
width	180	240	300	360	420	...	`$width`

Se trata de una sucesión aritmética cuya fórmula es `$width = 60 * $c\í\r\c\u\l\o\s`.

El 1º y 2º valor del atributo viewBox (el origen de la zona visible del dibujo) dependen del número de círculos del dibujo y son los siguientes:

Círculos	3	4	5	6	7	...	`$c\í\r\c\u\l\o\s`
viewBox	-90	-120	-150	-180	-210	...	`$\o\r\i\g\e\n`

Se trata de una sucesión aritmética cuya fórmula es `$\o\r\i\g\e\n = -30 * $c\í\r\c\u\l\o\s`.

El incremento de los colores de los círculos (el incremento del primer valor del atributo fill de la etiqueta circle) depende del número de círculos del dibujo, como ilustran los siguientes círculos cromáticos:

El valor de los incrementos de los colores de los círculos son los siguientes:

Círculos	3	4	5	6	...	`$c\í\r\c\u\l\o\s`
paso	120	90	72	60	...	`$paso`

No se trata de una sucesión aritmética. La fórmula es `$paso = 360 / {$c\í\r\c\u\l\o\s}`

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), los valores del radio de los círculos (atributo r de circle) son los siguientes. Como son valores decrecientes, para expresar la fórmula hay que tener en cuenta que el valor inicial depende del número de círculos y ese valor se va reduciendo en los círculos siguientes. Por ejemplo, en el caso de seis círculos:

Círculo	0	1	2	3	4	5	`$i`
r	180	150	120	90	60	30	`$r`
r	180 - 0	180 - 30	180 - 60	180 - 90	180 - 120	180 - 150	`$r`

Se trata de una sucesión aritmética cuya fórmula es `$r = 30 * $\c\i\r\c\u\l\o\s - 30 * $i = -30 * $i + 30 * $\c\i\r\c\u\l\o\s`.

Por otro lado, los valores de los colores de cada círculo (atributo fill de circle) son los siguiente:

Círculo	0	1	2	3	4	...	`$i`
fill	0	$paso	2 * $paso	3 * $paso	4 * $paso	...	`$fill`

Se trata de una sucesión aritmética cuya fórmula es `$fill = $\paso * $i`. Para obtener un número entero, se puede redondear el resultado

El programa puede ser el siguiente:

<?php
$circulos = rand(3, 10);
$paso     = 360 / $circulos;

print "  <h2>$circulos colores</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 60 * $circulos . "\" height=\"" . 60 * $circulos . "\" "
    . "viewBox=\"" . - 30 * $circulos . " " . - 30 * $circulos . " " . 60 * $circulos . " " . 60 * $circulos . "\">\n";

for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"0\" cy=\"0\" r=\"" . -30 * $i + 30 * $circulos
        . "\" fill=\"hwb(" . round($paso * $i) . " 10% 10%)\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores del radio de los círculos r y de su color fill de forma iterativa, el programa puede ser el siguiente:

<?php
$circulos = rand(3, 10);
$paso     = 360 / $circulos;

print "  <h2>$circulos colores</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 60 * $circulos . "\" height=\"" . 60 * $circulos . "\" "
    . "viewBox=\"" . - 30 * $circulos . " " . - 30 * $circulos . " " . 60 * $circulos . " " . 60 * $circulos . "\">\n";

$r     = 30 * $circulos;
$color = 0;
for ($i = 0; $i < $circulos; $i++) {
    print "      <circle cx=\"0\" cy=\"0\" r=\"$r\" fill=\"hwb(" . round($color) . " 10% 10%)\" />\n";
    $r     = $r - 30;
    $color = $color + $paso;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 08 - Arco iris semicircular

Los valores de los atributos width y viewBox (3º valor) dependen del número de semicírculos del dibujo y son los siguientes:

Semicírculos	3	4	5	6	7	...	`$\s\e\m\i\c\í\r\c`
width	200	260	320	380	440	...	`$\o\r\i\g\e\n`

Se trata de una sucesión aritmética cuya fórmula es `$width = 60 * $\s\e\m\i\c\í\r\c + 20`.

Los valores del atributo viewBox (1º y 2º valor, el origen de la zona visible del dibujo) son la mitad de los valores anteriores (con signo negativo).
Se trata de una sucesión aritmética cuya fórmula es `$\o\r\i\g\e\n = {- $width } / 2 = -30 * $\s\e\m\i\c\í\r\c - 10`.

Los valores de los atributos height y viewBox (4º valor) dependen del número de semicírculos del dibujo y son los siguientes:

Semicírculos	3	4	5	6	7	...	`$\s\e\m\i\c\í\r\c`
height	110	140	170	200	230	...	`$height`

Se trata de una sucesión aritmética cuya fórmula es `$height = 30 * $\s\e\m\i\c\í\r\c + 20`.

El incremento de los colores de los semicírculos (el primer valor del atributo fill de la etiqueta circle) es el mismo del ejercicio anterior.
No se trata de una sucesión aritmética. La fórmula es `$fill = 360 / {$\s\e\m\i\c\í\r\c}`

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), los valores que definen los semicírculos (atributo d de path) son los siguientes. Como son valores decrecientes, para expresar la fórmula hay que tener en cuenta que el valor inicial depende del número de semicírculos y ese valor se va reduciendo en los semicírculos siguientes. Por ejemplo, en el caso de cinco semicírculos:

Semicírculo	0	1	2	3	4	`$i`
d	150	120	90	60	30	`$d`
d	180 - 30	180 - 60	180 - 90	180 - 120	180 - 150	`$d`

Se trata de una sucesión aritmética cuya fórmula es `$d = 30 * $\s\e\m\i\c\í\r\c - 30 * $i = -30 * $i + 30 * $\s\e\m\i\c\í\r\c`.

Por otro lado, el color de cada semicírculo (atributo fill de path) es el siguiente:

Semicírculo	0	1	2	3	4	...	`$i`
fill	0	$paso	2 * $paso	3 * $paso	4 * $paso	...	`$fill`

Se trata de una sucesión aritmética cuya fórmula es `$fill = $i * $\paso = $\paso * $i`. Para obtener un número entero, se puede redondear el resultado

El programa puede ser el siguiente:

<?php
$semicirc = rand(3, 10);
$paso     = 360 / $semicirc;

print "  <h2>$semicirc franjas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 60 * $semicirc + 20 . "\" height=\"" . 30 * $semicirc + 20 . "\""
    . " viewBox=\"" . - 30 * $semicirc - 10 . " " . - 30 * $semicirc - 10 . " " . 60 * $semicirc + 20 . " "
    . 30 * $semicirc + 20 . "\" style=\"border: black 1px solid; background-color: white;\">\n";

for ($i = 0; $i < $semicirc; $i++) {
    $d = -30 * $i + 30 * $semicirc;
    print "      <path d=\"M -$d,0 L $d,0 A $d $d 0 0 0 -$d,0 z\" fill=\"hwb(" . round($paso * $i) . " 10% 10%)\" />\n";
}

print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores que definen los semicírculos d y de su color fill de forma iterativa, el programa puede ser el siguiente:

<?php
$semicirc = rand(3, 10);
$paso     = 360 / $semicirc;

print "  <h2>$semicirc franjas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 60 * $semicirc + 20 . "\" height=\"" . 30 * $semicirc + 20 . "\""
    . " viewBox=\"" . - 30 * $semicirc - 10 . " " . - 30 * $semicirc - 10 . " " . 60 * $semicirc + 20 . " "
    . 30 * $semicirc + 20 . "\" style=\"border: black 1px solid; background-color: white;\">\n";

$d     = 30 * $semicirc;
$color = 0;
for ($i = 0; $i < $semicirc; $i++) {
    print "      <path d=\"M -$d,0 L $d,0 A $d $d 0 0 0 -$d,0 z\" fill=\"hwb(" . round($color) . " 10% 10%)\" />\n";
    $d     = $d - 30;
    $color = $color + $paso;
}

print "    </svg>\n";
print "  </p>\n";
?>

for (2) 09 - Arco iris

Los valores de los atributos width y viewBox (3º valor) son los mismos del ejercicio anterior.
Se trata de una sucesión aritmética cuya fórmula es `$width = 60 * $\s\e\m\i\c\í\r\c + 20`.
Los valores del atributo viewBox (1º y 2º valor, el origen de la zona visible del dibujo) son los mismos del ejercicio anterior.
Se trata de una sucesión aritmética cuya fórmula es `$viewbo\x = {- $width } / 2 = -30 * $\s\e\m\i\c\í\r\c - 10`.
Los valores de los atributos height y viewBox (4º valor) son los mismos del ejercicio anterior.
Se trata de una sucesión aritmética cuya fórmula es `$height = 30 * $\s\e\m\i\c\í\r\c + 20`.
El incremento de los colores de los semicírculos (el primer valor del atributo fill de la etiqueta circle) es el mismo del ejercicio anterior.
No se trata de una sucesión aritmética. La fórmula es `$fill = 360 / {$\s\e\m\i\c\í\r\c}`

El último semircírculo es distinto al resto, pues es de color blanco. Los valores que lo definen (atributo d de path) dependen únicamente del número de semicírculos del dibujo. Los valores son los siguientes.

Semicírculos	3	4	5	6	...	`$i`
d	45	60	75	90	...	`$d`

Se trata de una sucesión aritmética cuya fórmula es `$d = 15 * $\s\e\m\i\c\í\r\c`.

Si la variable de control $i del bucle for se hace empezar por 0 (la opción más habitual y recomendada), los valores que definen los semicírculos (atributo d de path) son los siguientes. Como son valores decrecientes, para expresar la fórmula hay que tener en cuenta que el valor inicial depende del número de círculos y ese valor se va reduciendo en los círculos siguientes. Por ejemplo, en el caso de cinco semicírculos:

Semicírculo	0	1	2	3	4	`$i`
d	150	135	120	105	90	`$d`
d	150 - 0	150 - 15	150 - 30	150 - 45	150 - 60	`$d`

Se trata de una sucesión aritmética cuya fórmula es `$d = 30 * $\s\e\m\i\c\í\r\c - 15 * $i = -15 * $i + 30 * $\s\e\m\i\c\í\r\c`.

Por otro lado, el color de cada semicírculo (atributo fill de path) es el siguiente:

Semicírculo	0	1	2	3	4	...	`$i`
fill	0	$paso	2 * $paso	3 * $paso	4 * $paso	...	`$fill`

Se trata de una sucesión aritmética cuya fórmula es `$fill = $\paso * $i`. Para obtener un número entero, se puede redondear el resultado

El programa puede ser el siguiente:

<?php
$semicirc = rand(3, 10);
$paso = 360 / $semicirc;

print "  <h2>$semicirc franjas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 60 * $semicirc + 20 . "\" height=\"" . 30 * $semicirc + 20 . "\""
    . " viewBox=\"" . - 30 * $semicirc - 10 . " " . - 30 * $semicirc - 10 . " "
    . 60 * $semicirc + 20 . " " . 30 * $semicirc + 20
    . "\" style=\"border: black 1px solid; background-color: white;\">\n";

for ($i = 0; $i < $semicirc; $i++) {
    $d = -15 * $i + 30 * $semicirc;
    print "      <path d=\"M -$d,0 L $d,0 A $d $d 0 0 0 -$d,0 z\" fill=\"hwb("
        . round($i * $paso) . " 10% 10%)\" />\n";
}

$d = 15 * $semicirc;
print "      <path d=\"M -$d,0 L $d,0 A $d $d 0 0 0 -$d,0 z\" fill=\"white\" stroke=\"white\" />\n";
print "    </svg>\n";
print "  </p>\n";
?>

Calculando los valores que definen los semicírculos d y de su color fill de forma iterativa, el programa puede ser el siguiente:

<?php
$semicirc = rand(3, 10);
$paso     = 360 / $semicirc;

print "  <h2>$semicirc franjas</h2>\n";
print "\n";
print "  <p>\n";
print "    <svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" \n";
print "      width=\"" . 60 * $semicirc + 20 . "\" height=\"" . 30 * $semicirc + 20 . "\""
    . " viewBox=\"" . - 30 * $semicirc - 10 . " " . - 30 * $semicirc - 10 . " "
    . 60 * $semicirc + 20 . " " . 30 * $semicirc + 20
    . "\" style=\"border: black 1px solid; background-color: white;\">\n";

$d     = 30 * $semicirc;
$color = 0;
for ($i = 0; $i < $semicirc; $i++) {
    print "      <path d=\"M -$d,0 L $d,0 A $d $d 0 0 0 -$d,0 z\" fill=\"hwb(" . round($color) . " 10% 10%)\" />\n";
    $d     = $d - 15;
    $color = $color + $paso;
}

print "      <path d=\"M -$d,0 L $d,0 A $d $d 0 0 0 -$d,0 z\" fill=\"white\" stroke=\"white\" />\n";
print "    </svg>\n";
print "  </p>\n";
?>

Ejercicios (sin formularios) - for (2) - Soluciones

for (2) 01 - Círculos en fila (1)

for (2) 02 - Círculos en fila (2)

for (2) 03 - Círculos en fila (3)

for (2) 04 - Líneas (1)

for (2) 05 - Líneas (2)

for (2) 06 - Líneas (3)

for (2) 07 - Arco iris circular

for (2) 08 - Arco iris semicircular

for (2) 09 - Arco iris