SVG.Gradient

by linzoey

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.min.js"></script>
<a>click here to download this svg!</a>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #595f9c;
}

JavaScript

var draw = SVG().addTo('body').size(1920,1080)

//Earth
let circle2 = draw.circle(200).move(500,50).fill('#8ad190')
let ellipse = draw.ellipse(100, 70).move(540, 60).fill('#8aaad1')
let ellipse1 = draw.ellipse(80, 90).move(590, 140).fill('#8aaad1')

//Moon
let circle3 = draw.circle(300).move(1000,70).fill('#a8a5a5')
let circle4 = draw.circle(100).move(1030,170).fill('#615b5b')
let circle5 = draw.circle(75).move(1150,100).fill('#615b5b')
let circle6 = draw.circle(40).move(1140,300).fill('#615b5b')

//Sun
let circle7 = draw.circle(250).move(80,200).fill('#ff7f50')


class Astronaut {
  constructor (xposition,yposition, size, aPosition)
  { 
    this.x = xposition;
    this.y = yposition;
    this.astronautSize = size;
    this.astronautPosition = aPosition;
  
  }

  draw () {

//tree
let ellipse2 = draw.ellipse(150, 250).move(this.x-95, this.y+20).fill('#74c76f')
var rect8 = draw.rect(50, 150).move(this.x-40, this.y+205).fill('#a88b7b')
//astronaut
let circle = draw.circle(100).move(this.x+70, this.y+90).fill('#ffffff')
let circle1 = draw.circle(70).move(this.x+85, this.y+105).fill('#e0e0e0')
var rect = draw.rect(100, 100).move(this.x+70, this.y+187).fill('#ffffff')
var rect1 = draw.rect(35, 100).move(this.x+35, this.y+187).fill('#e0e0e0')
var rect2 = draw.rect(35, 100).move(this.x+170, this.y+187).fill('#e0e0e0')
var rect3 = draw.rect(45, 70).move(this.x+70, this.y+287).fill('#e0e0e0')
var rect4 = draw.rect(45, 70).move(this.x+125, this.y+287).fill('#e0e0e0')
var rect5 = draw.rect(60, 60).move(this.x+90, this.y+200).fill('#d1c5db')
var rect6 = draw.rect(45, 45).move(this.x+97, this.y+205).fill('#be91e6')


}
}
//land
var rect7 = draw.rect(1920, 100).move(0,980).fill('#be91e6')

function astronautArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Astronaut ((i*300),640, 1000, 1000))
    }
    return outputArray
}

let myAstronaut = astronautArray(7);
  for(let i = 0; i < myAstronaut.length ; i++){
   ...