Generate SVG Paper People

Share Your Love

Here in this post collects the information from Codepen for generate SVG paper people. Here two implementation one is SCSS and another one is Javascript.

Michelle Barker cuts out a new group of SVG “construction paper” people every time you refresh this Pen.

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	
	@media (min-width: 20rem) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	@media (min-width: 40rem) {
		grid-template-columns: repeat(3, 1fr);
	}
}

svg {
	width: 100%;
	height: auto;
	display: block;
}
const random = (min, max, float = false) => {
  const val = Math.random() * (max - min) + min

  if (float) {
    return val
  }

  return Math.floor(val)
}

const colors = [
	334, // red
	35, // orange
	54, // yellow
	159, // green
	264 // purple
]

const shuffleArray = (array) => {
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    const temp = array[i]
    array[i] = array[j]
    array[j] = temp
  }
	
	return array
}

class NewCharacter {
	constructor(el) {
		this.width = 600
		this.height = 800
		this.size = random(65, 120)
		
		this.x = this.width / 2
    this.y = this.height / 2
		
		/* Colors */
		this.colors = shuffleArray(colors)
		
		this.shapeIndex = random(0, 2)
		this.bodyType = this.shapeIndex === 0 ? 'trapezium' : 'circle'
		
		this.svg = SVG()
			.addTo(el)
			.size(this.width, this.height)
			.viewbox(0, 0, this.width, this.height)
	}
	
	get bgHue() {
		return this.colors[0]
	}
	
	get headHue() {
		return this.colors[1]
	}
	
	get bodyHue() {
		return this.colors[2]
	}
	
	createPolygon(points, posX, posY, size) {
		const angleStep = (Math.PI * 2) / points;
		const polygon = []
		
		for (let i = 0; i <= points; i++) {
			const pull = random(0.85, 1, true)
			const x = posX + Math.cos(i * angleStep) * (size * pull)
			const y = posY + Math.sin(i * angleStep) * (size * pull)
			polygon.push({x, y})
		}
		
		return polygon.map(({ x, y }) => {
			return `${x},${y}`
		}).join(' ')
	}
	
	createTrapezium() {
		const xStartDisplacementL = random(10, 30)
		const xEndDisplacementL = random(10, 30)
		const points = [
			[this.x - random(10, 30), this.y - random(50, 60)],
			[this.x + random(10, 30), this.y - random(50, 60)],
			[this.x + random(120, 180), this.y + random(120, 180)],
			[this.x - random(120, 180), this.y + random(120, 180)]
		]
		
		return points.map((coords) => {
			return `${coords[0]},${coords[1]}`
		}).join(' ')
	}
	
	drawBg() {
		const fill = `hsl(${this.bgHue}deg, 70%, 50%)`
		this.svg.rect(this.width, this.height).fill(fill)
	}
	
	drawLimb(side, params) {
		const x = side === 'left' ? this.x - random(...params.xStart) : this.x + random(...params.xStart)
		const y = this.y + random(...params.yStart)
		const xEnd = side === 'left' ? this.x - random(...params.xEnd) : this.x + random(...params.xEnd)
		const yEnd = this.y + random(...params.yEnd)
		const width = random(7, 12)
		
		this.svg.line(x, y, xEnd, yEnd).stroke({ width, linecap: 'round' }).attr({ stroke: '#000' })
	}
	
	drawArms() {
		const arm = {
			xStart: this.bodyType === 'trapezium' ? [30, 60] : [60, 80],
			xEnd: [120, 200],
			yStart: [-40, 30],
			yEnd: [-20, 70]
		}
		
		const leg = {
			xStart: [30, 60],
			xEnd: [40, 100],
			yStart: [110, 130],
			yEnd: [230, 320]
		}
		
		this.drawLimb('left', arm)
		this.drawLimb('right', arm)
		this.drawLimb('left', leg)
		this.drawLimb('right', leg)
	}
	
	drawEyes() {
		let d = random(6, 20)
		let xDisplacement = random(15, 50)
		let x = this.x - xDisplacement
		let y = this.y - random(105, 120)
		this.svg.circle(d).move(x, y)
		
		d = random(7, 25)
		x = this.x + xDisplacement
		this.svg.circle(d).move(x, y)
	}
	
	drawMouth() {
		const points = [
			[this.x - random(15, 30), this.y - random(50, 75)],
			[this.x - random(0, 10), this.y - random(50, 60)],
			[this.x + random(0, 10), this.y - random(50, 60)],
			[this.x + random(15, 30), this.y - random(50, 75)]
		]
		const width = random(4, 9)
		
		this.svg.polyline(points).stroke({ width, linecap: 'round' }).attr({ stroke: '#000' }).fill('rgba(0, 0, 0, 0)')
	}
	
	drawHead() {
		const numPoints = random(8, 16)
		const color = `hsl(${this.headHue}deg, 70%, 50%)`
		
		this.svg.polygon(this.createPolygon(numPoints, this.x, 300, this.size)).attr({ fill: color })
	}
	
	drawBody() {
		const color = `hsl(${this.bodyHue}deg, 70%, 50%)`
		let shape
		
		if (this.bodyType === 'trapezium') {
			shape = this.createTrapezium()
		} else {
			const numPoints = random(8, 16)
			const y = random(420, 450)
			const size = this.size * random(0.9, 2, true)
			shape = this.createPolygon(numPoints, this.x, y, size)
		}
		
		this.svg.polygon(shape).attr({ fill: color })
	}
	
	draw() {
		this.drawBg()
		this.drawBody()
		this.drawHead()
		this.drawArms()
		this.drawEyes()
		this.drawMouth()
	}
}

for(i = 0; i < 6; i++) {
	const char = new NewCharacter('body')
	char.draw()
}


SVG Codepen Paper People:

See the Pen Generative SVG paper people by Michelle Barker (@michellebarker) on CodePen.

Please share and comment on this post and wants to improve and add content on it WhatsApp us.

Share Your Love
Avatar photo
Lingaraj Senapati

Hey There! I am Lingaraj Senapati, the Founder of lingarajtechhub.com My skills are Freelance, Web Developer & Designer, Corporate Trainer, Digital Marketer & Youtuber.

Articles: 429

Newsletter Updates

Enter your email address below to subscribe to our newsletter