En esto, hablaremos sobre cómo podemos crear un arcoíris usando HTML5. Para crear el arcoíris tenemos que saber cómo funciona la etiqueta SVG y sus atributos.
Acercarse:
- Primero, tenemos que usar el atributo de ancho y alto de la etiqueta SVG para crear la base para la estructura del arcoíris.
- Ahora usaremos el elemento círculo para crear la estructura del arcoíris y rellenarlo con los colores respectivos.
<!DOCTYPE html> <html> <body> <!-- Here the background color is aqua --> <!-- To make the circle 1/2 in order to create the rainbow structure we need to give a height that makes the circle 1/2 --> <svg width="800" height="400" style="background-color: aqua;"> <!-- In order to create the rainbow we have to use the circle element --> <!-- Here we will use circle attribute to properly align the half circle with a radius at correct position --> <!-- Here to make the color red we have to use the attribute fill--> <!-- stroke-width defines the thickness--> <circle cx="400" cy="450" r="400" stroke="none" stroke-width="2" fill="red" /> <!-- r defines the radius of the circle --> <circle cx="400" cy="450" r="300" stroke="none" stroke-width="2" fill="yellow" /> <circle cx="400" cy="450" r="250" stroke="none" stroke-width="2" fill="green" /> <circle cx="400" cy="450" r="200" stroke="none" stroke-width="2" fill="blue" /> <circle cx="400" cy="450" r="150" stroke="none" stroke-width="2" fill="indigo" /> <circle cx="400" cy="450" r="100" stroke="none" stroke-width="2" fill="violet" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por codingbeast12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA