Exámenes - Dos dibujos con círculos

En este ejercicio se debe crear un programa que muestre dos dibujos SVG que contienen círculos.

Dos dibujos con círculos - Comentarios

Dos dibujos con círculos - Ejemplo de código HTML

  <p>Actualice la página para mostrar dos nuevos dibujos de 5 círculos</p>

  <p>
    <svg width="160" height="160" style="border: black 1px solid">
      <circle cx="20" cy="20" r="20" fill="white" stroke="black" />
      <circle cx="40" cy="40" r="30" fill="black" stroke="black" />
      <circle cx="60" cy="60" r="40" fill="white" stroke="black" />
      <circle cx="80" cy="80" r="50" fill="black" stroke="black" />
      <circle cx="100" cy="100" r="60" fill="white" stroke="black" />
    </svg>

    <svg width="160" height="160" style="border: black 1px solid">
      <circle cx="140" cy="20" r="20" fill="black" stroke="black" />
      <circle cx="120" cy="40" r="30" fill="white" stroke="black" />
      <circle cx="100" cy="60" r="40" fill="black" stroke="black" />
      <circle cx="80" cy="80" r="50" fill="white" stroke="black" />
      <circle cx="60" cy="100" r="60" fill="black" stroke="black" />
    </svg>
  </p>

  <p>Actualice la página para mostrar dos nuevos dibujos de 6 círculos</p>

<p>
  <svg width="190" height="190" style="border: black 1px solid">
    <circle cx="20" cy="20" r="20" fill="white" stroke="black" />
    <circle cx="40" cy="40" r="30" fill="black" stroke="black" />
    <circle cx="60" cy="60" r="40" fill="white" stroke="black" />
    <circle cx="80" cy="80" r="50" fill="black" stroke="black" />
    <circle cx="100" cy="100" r="60" fill="white" stroke="black" />
    <circle cx="120" cy="120" r="70" fill="black" stroke="black" />
  </svg>

  <svg width="190" height="190" style="border: black 1px solid">
    <circle cx="170" cy="20" r="20" fill="black" stroke="black" />
    <circle cx="150" cy="40" r="30" fill="white" stroke="black" />
    <circle cx="130" cy="60" r="40" fill="black" stroke="black" />
    <circle cx="110" cy="80" r="50" fill="white" stroke="black" />
    <circle cx="90" cy="100" r="60" fill="black" stroke="black" />
    <circle cx="70" cy="120" r="70" fill="white" stroke="black" />
  </svg>
</p>

  <p>Actualice la página para mostrar dos nuevos dibujos de 7 círculos</p>

<p>
  <svg width="220" height="220" style="border: black 1px solid">
    <circle cx="20" cy="20" r="20" fill="white" stroke="black" />
    <circle cx="40" cy="40" r="30" fill="black" stroke="black" />
    <circle cx="60" cy="60" r="40" fill="white" stroke="black" />
    <circle cx="80" cy="80" r="50" fill="black" stroke="black" />
    <circle cx="100" cy="100" r="60" fill="white" stroke="black" />
    <circle cx="120" cy="120" r="70" fill="black" stroke="black" />
    <circle cx="140" cy="140" r="80" fill="white" stroke="black" />
  </svg>

  <svg width="220" height="220" style="border: black 1px solid">
    <circle cx="200" cy="20" r="20" fill="black" stroke="black" />
    <circle cx="180" cy="40" r="30" fill="white" stroke="black" />
    <circle cx="160" cy="60" r="40" fill="black" stroke="black" />
    <circle cx="140" cy="80" r="50" fill="white" stroke="black" />
    <circle cx="120" cy="100" r="60" fill="black" stroke="black" />
    <circle cx="100" cy="120" r="70" fill="white" stroke="black" />
    <circle cx="80" cy="140" r="80" fill="black" stroke="black" />
  </svg>
</p>