UNPKG

spaceship-sprites

Version:

Spaceship Sprite is a random ship sprite generator in typescript.

github.com/LeoVen/spaceship-sprite

LeoVen/spaceship-sprite

91 lines (62 loc) • 23.3 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
# Spaceship Sprites <p align="center"> Spaceship Sprite is a random ship sprite generator in typescript </p> <p align="center"> <a href="https://github.com/LeoVen/spaceship-sprites"><img src="https://img.shields.io/badge/GitHub-Spaceship%20Sprites-2195F3.svg?logo=github" alt="LinkToRepo"/></a> <a href="https://github.com/LeoVen/spaceship-sprites/stargazers"><img src="https://img.shields.io/github/stars/LeoVen/spaceship-sprites?style=flat&color=ffa000" alt="Stars"/></a> <a href="https://leoven.github.io/spaceship-sprites/"><img src="https://img.shields.io/badge/GitHub-Live%20Example-333333.svg?logo=github" alt="LinkToDocs"/></a> </p> ## Contents * [Usage](#usage) * [Sources](#sources) ## Usage ### Building a single sprite ```ts import { Color, Sprite, SpriteBuilder } from 'spaceship-sprites' // Creates a builder with default parameters let builder = new SpriteBuilder({}) // Creates a builder with custom parameters let custom = new SpriteBuilder({ // The sprite painting area spriteDimensions: [9, 9], // The average blank pixels in the sprite blankPercentage: 0.7, // The color used in spots 'without' pixels blankColor: new Color(22, 22, 22), // The colors used when creating the sprite // Color accepts RGB from range [0, 255] or [0.0, 1.0] colorPallet: [new Color(20, 30, 40), new Color(0.1, 0.2, 0.3)], // Overrides colorPallet and is used only if useRandomPallet is true randomColorCount: 5, // If true, uses up to colorCount random colors useRandomPallet: true, // border in pixels, [up, right, down, left] border: [1, 2, 3, 4], // If true, ships will also be horizontally symmetrical horizontalSymmetry: true, }) // Makes a single sprite let sprite1 = builder.single().build() // Makes a sprite and adds the border with blankColor color let sprite2 = builder.single().withBorder().build() // Adds a border until the sprite is of the specified dimension let sprite3 = builder.single().withPadding([22, 22]).build() ``` ### SVG > `new SpriteBuilder({}).single().withBorder().build().svg(100, 100)` The `svg` function will try to fit as best as possible the width and height. In this case, `100` became `108` to fit the sprite with dimensions `7` + `2` (sprite + border). <img src="examples/ex1.svg"/> <svg width="108px" height="108px" viewBox="0, 0, 9, 9"><rect width="1" height="1" x="0" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="1" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="1" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="3" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="1" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="5" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="1" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="7" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="1" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="1" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="2" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="3" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="2" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="5" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="2" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="1" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="3" y="2" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="3" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="4" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="3" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="6" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="3" y="7" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="3" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="1" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="4" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="3" style="fill:rgb(46, 186, 19);" /><rect width="1" height="1" x="4" y="4" style="fill:rgb(46, 186, 19);" /><rect width="1" height="1" x="4" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="6" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="4" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="1" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="5" y="2" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="5" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="4" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="5" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="6" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="5" y="7" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="5" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="1" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="6" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="3" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="6" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="5" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="6" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="1" style="fill:rgb(32, 218, 27);" /><rect width="1" height="1" x="7" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="3" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="7" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="5" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="7" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="7" style="fill:rgb(109, 136, 20);" /><rect width="1" height="1" x="7" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="8" style="fill:rgb(0, 0, 0);" /></svg> Creating svg might lead to some undesired stripes when the sprite dimensions aren't exactly divisible by the width and/or height: > `new SpriteBuilder({spriteDimensions: [5, 7]}).single().withBorder().build().svg(100, 100)` <svg width="105px" height="108px" viewBox="0, 0, 7, 9"><rect width="1" height="1" x="0" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="1" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="1" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="4" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="1" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="6" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="1" y="7" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="1" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="1" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="2" y="2" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="2" y="3" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="2" y="4" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="2" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="2" style="fill:rgb(117, 157, 184);" /><rect width="1" height="1" x="3" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="4" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="3" y="5" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="3" y="6" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="3" y="7" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="3" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="1" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="4" y="2" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="4" y="3" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="4" y="4" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="4" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="1" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="5" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="4" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="5" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="6" style="fill:rgb(226, 95, 196);" /><rect width="1" height="1" x="5" y="7" style="fill:rgb(48, 83, 167);" /><rect width="1" height="1" x="5" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="8" style="fill:rgb(0, 0, 0);" /></svg> To mitigate this, you might use `withPadding` to make the sprite square: > `new SpriteBuilder({spriteDimensions: [5, 7]}).single().withPadding([9, 9]).build().svg(100, 100)` <svg width="108px" height="108px" viewBox="0, 0, 9, 9"><rect width="1" height="1" x="0" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="1" style="fill:rgb(43, 150, 224);" /><rect width="1" height="1" x="2" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="6" style="fill:rgb(199, 244, 157);" /><rect width="1" height="1" x="2" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="5" style="fill:rgb(199, 244, 157);" /><rect width="1" height="1" x="3" y="6" style="fill:rgb(178, 192, 22);" /><rect width="1" height="1" x="3" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="1" style="fill:rgb(199, 244, 157);" /><rect width="1" height="1" x="4" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="3" style="fill:rgb(43, 150, 224);" /><rect width="1" height="1" x="4" y="4" style="fill:rgb(178, 192, 22);" /><rect width="1" height="1" x="4" y="5" style="fill:rgb(199, 244, 157);" /><rect width="1" height="1" x="4" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="7" style="fill:rgb(178, 192, 22);" /><rect width="1" height="1" x="4" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="5" style="fill:rgb(199, 244, 157);" /><rect width="1" height="1" x="5" y="6" style="fill:rgb(178, 192, 22);" /><rect width="1" height="1" x="5" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="1" style="fill:rgb(43, 150, 224);" /><rect width="1" height="1" x="6" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="6" style="fill:rgb(199, 244, 157);" /><rect width="1" height="1" x="6" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="7" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="8" y="8" style="fill:rgb(0, 0, 0);" /></svg> You can also use `svgScale` to set the dimension of each pixel: > `new SpriteBuilder({spriteDimensions: [5, 7]}).single().withBorder().build().svgScale(1, 'em')` <svg width="7em" height="9em" viewBox="0, 0, 7, 9"><rect width="1" height="1" x="0" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="0" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="4" style="fill:rgb(72, 135, 248);" /><rect width="1" height="1" x="1" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="1" y="7" style="fill:rgb(109, 166, 163);" /><rect width="1" height="1" x="1" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="3" style="fill:rgb(109, 166, 163);" /><rect width="1" height="1" x="2" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="2" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="1" style="fill:rgb(117, 39, 113);" /><rect width="1" height="1" x="3" y="2" style="fill:rgb(117, 39, 113);" /><rect width="1" height="1" x="3" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="4" style="fill:rgb(117, 39, 113);" /><rect width="1" height="1" x="3" y="5" style="fill:rgb(117, 39, 113);" /><rect width="1" height="1" x="3" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="3" y="7" style="fill:rgb(117, 39, 113);" /><rect width="1" height="1" x="3" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="3" style="fill:rgb(109, 166, 163);" /><rect width="1" height="1" x="4" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="4" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="4" style="fill:rgb(72, 135, 248);" /><rect width="1" height="1" x="5" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="5" y="7" style="fill:rgb(109, 166, 163);" /><rect width="1" height="1" x="5" y="8" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="0" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="1" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="2" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="3" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="4" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="5" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="6" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="7" style="fill:rgb(0, 0, 0);" /><rect width="1" height="1" x="6" y="8" style="fill:rgb(0, 0, 0);" /></svg> ## Sources * [EN](https://www.freecodecamp.org/news/how-to-create-generative-art-in-less-than-100-lines-of-code-d37f379859f/) * [RU](https://habr.com/company/pixonic/blog/429078/).