diff options
| author | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2023-06-13 01:43:37 +0200 |
|---|---|---|
| committer | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2023-06-13 01:43:37 +0200 |
| commit | 03322672782a6318b019eff33fe44ec800d6f12c (patch) | |
| tree | 9d807e1585cf28a1ea98e87b855932dba00f1880 /playgrounds/colors | |
| parent | 8e18b4698edd00f83af0be05bb3374f92fecaeb9 (diff) | |
| download | svg.js-03322672782a6318b019eff33fe44ec800d6f12c.tar.gz svg.js-03322672782a6318b019eff33fe44ec800d6f12c.zip | |
dependency updates, easier formatting
Diffstat (limited to 'playgrounds/colors')
| -rw-r--r-- | playgrounds/colors/index.html | 13 | ||||
| -rw-r--r-- | playgrounds/colors/main.js | 35 | ||||
| -rw-r--r-- | playgrounds/colors/style.css | 9 |
3 files changed, 23 insertions, 34 deletions
diff --git a/playgrounds/colors/index.html b/playgrounds/colors/index.html index cb0b688..017abba 100644 --- a/playgrounds/colors/index.html +++ b/playgrounds/colors/index.html @@ -1,26 +1,19 @@ - <!DOCTYPE html> <html> - <head> - <meta charset="utf-8"> + <meta charset="utf-8" /> <title>SVG Playground</title> - <link type="text/css" rel="stylesheet" href="style.css"> + <link type="text/css" rel="stylesheet" href="style.css" /> </head> <body> - <h1>Color Playground</h1> - <p> - Lets test the different types of random colors we can make - </p> + <p>Lets test the different types of random colors we can make</p> <svg viewBox="0 0 1500 1500" id="canvas"></svg> - </body> <script src="../../dist/svg.js" charset="utf-8"></script> <script src="main.js" charset="utf-8"></script> - </html> diff --git a/playgrounds/colors/main.js b/playgrounds/colors/main.js index d81bb47..01be83e 100644 --- a/playgrounds/colors/main.js +++ b/playgrounds/colors/main.js @@ -1,29 +1,26 @@ - - -let canvas = SVG('#canvas').group() - .translate( -150, 230 ) +let canvas = SVG('#canvas').group().translate(-150, 230) // Make a bunch of rectangles -function rectangles ( method='Vibrant') { - +function rectangles(method = 'Vibrant') { // Make a group let group = canvas.group() - group.text(method).attr('font-size', 50).move( -230, 20 ) + group.text(method).attr('font-size', 50).move(-230, 20) // Add the squares - for ( let i = 0; i < 20; i++ ) { - let color = SVG.Color.random( method.toLowerCase() ).toHex() - let rect = group.rect(100, 100) - .x( 20 + 100 * i ) - .fill( color ) + for (let i = 0; i < 20; i++) { + let color = SVG.Color.random(method.toLowerCase()).toHex() + let rect = group + .rect(100, 100) + .x(20 + 100 * i) + .fill(color) } return group } -rectangles( 'Vibrant' ).translate( 0, 100 ) -rectangles( 'Sine' ).translate( 0, 220 ) -rectangles( 'Pastel' ).translate( 0, 340 ) -rectangles( 'Dark' ).translate( 0, 460 ) -rectangles( 'RGB' ).translate( 0, 580 ) -rectangles( 'LAB' ).translate( 0, 700 ) -rectangles( 'Grey' ).translate( 0, 820 ) +rectangles('Vibrant').translate(0, 100) +rectangles('Sine').translate(0, 220) +rectangles('Pastel').translate(0, 340) +rectangles('Dark').translate(0, 460) +rectangles('RGB').translate(0, 580) +rectangles('LAB').translate(0, 700) +rectangles('Grey').translate(0, 820) diff --git a/playgrounds/colors/style.css b/playgrounds/colors/style.css index f327905..24a9d4e 100644 --- a/playgrounds/colors/style.css +++ b/playgrounds/colors/style.css @@ -1,10 +1,9 @@ - * { box-sizing: border-box; } html { - background-color : #fefefe; + background-color: #fefefe; } body { @@ -50,7 +49,7 @@ svg { } .pink { - fill: #FF0066; + fill: #ff0066; } .green { @@ -62,9 +61,9 @@ svg { } .light-pink { - fill: #FF99C2; + fill: #ff99c2; } .off-white { - fill: #FFCCE0; + fill: #ffcce0; } |