From d549b00dc9d593e121236c64ab7c8f986a0800ac Mon Sep 17 00:00:00 2001 From: Saivan Date: Sun, 2 Dec 2018 00:38:23 +1100 Subject: Implemented random colors and added back the playgrounds This commit adds back the playgrounds and the npm demo. We also implemented a few methods to generate pretty random colors. Changes ======= - Added back the playgrounds and the npm demos - Implemented a few random color generators --- playgrounds/colors/index.html | 26 +++++++++++++ playgrounds/colors/main.js | 29 ++++++++++++++ playgrounds/colors/style.css | 70 ++++++++++++++++++++++++++++++++++ playgrounds/matrix/index.html | 47 +++++++++++++++++++++++ playgrounds/matrix/matrix.html | 47 ----------------------- playgrounds/matrix/style.css | 70 ++++++++++++++++++++++++++++++++++ playgrounds/playground.css | 70 ---------------------------------- playgrounds/transforms/index.html | 27 +++++++++++++ playgrounds/transforms/style.css | 70 ++++++++++++++++++++++++++++++++++ playgrounds/transforms/transforms.html | 27 ------------- playgrounds/transforms/transforms.js | 1 - playgrounds/webpack.config.js | 33 ++++++++++++++++ 12 files changed, 372 insertions(+), 145 deletions(-) create mode 100644 playgrounds/colors/index.html create mode 100644 playgrounds/colors/main.js create mode 100644 playgrounds/colors/style.css create mode 100644 playgrounds/matrix/index.html delete mode 100644 playgrounds/matrix/matrix.html create mode 100644 playgrounds/matrix/style.css delete mode 100644 playgrounds/playground.css create mode 100644 playgrounds/transforms/index.html create mode 100644 playgrounds/transforms/style.css delete mode 100644 playgrounds/transforms/transforms.html create mode 100644 playgrounds/webpack.config.js (limited to 'playgrounds') diff --git a/playgrounds/colors/index.html b/playgrounds/colors/index.html new file mode 100644 index 0000000..301dd3a --- /dev/null +++ b/playgrounds/colors/index.html @@ -0,0 +1,26 @@ + + + + + + + SVG Playground + + + + + +

Color Playground

+ +

+ Lets test the different types of random colors we can make +

+ + + + + + + + + diff --git a/playgrounds/colors/main.js b/playgrounds/colors/main.js new file mode 100644 index 0000000..fda3ce2 --- /dev/null +++ b/playgrounds/colors/main.js @@ -0,0 +1,29 @@ + + +let canvas = SVG('#canvas').group() + .translate( -150, 230 ) + +// Make a bunch of rectangles +function rectangles ( method='Vibrant') { + + // Make a group + let group = canvas.group() + 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() ).hex() + 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 ) diff --git a/playgrounds/colors/style.css b/playgrounds/colors/style.css new file mode 100644 index 0000000..f327905 --- /dev/null +++ b/playgrounds/colors/style.css @@ -0,0 +1,70 @@ + +* { + box-sizing: border-box; +} + +html { + background-color : #fefefe; +} + +body { + margin: 0; + width: 100vw; + height: 99vh; + grid-gap: 30px; + display: inline-grid; + align-items: center; + grid-template-columns: 10vw 40vw auto 10vw; + grid-template-rows: 0 10vw auto 0; +} + +h1 { + text-align: right; + border-right: solid 3px #f06; + padding-right: 12px; + color: #f06; + font-size: 52px; + font-family: Helvetica; + grid-row: 2; + grid-column: 2; + line-height: 1.8em; +} + +p { + padding-right: 50px; + color: #444; + font-size: 18px; + font-family: Helvetica; + grid-row: 2; + grid-column: 3; +} + +svg { + height: 100%; + width: 100%; + grid-row: 3; + grid-column: 2/4; + background-color: #f5f6f7; + border-radius: 20px; + border: #f065 1px solid; +} + +.pink { + fill: #FF0066; +} + +.green { + fill: #00ff99; +} + +.dark-pink { + fill: #660029; +} + +.light-pink { + fill: #FF99C2; +} + +.off-white { + fill: #FFCCE0; +} diff --git a/playgrounds/matrix/index.html b/playgrounds/matrix/index.html new file mode 100644 index 0000000..cd34b7d --- /dev/null +++ b/playgrounds/matrix/index.html @@ -0,0 +1,47 @@ + + + + + + + SVG Playground + + + + + +

SVG Transformations

+ +

+ This playground tests the compose/decompose functionality in + svg matrix, as well as the draggable code and the transformations. +

+ + + + + + + + + + diff --git a/playgrounds/matrix/matrix.html b/playgrounds/matrix/matrix.html deleted file mode 100644 index cd34b7d..0000000 --- a/playgrounds/matrix/matrix.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - SVG Playground - - - - - -

SVG Transformations

- -

- This playground tests the compose/decompose functionality in - svg matrix, as well as the draggable code and the transformations. -

- - - - - - - - - - diff --git a/playgrounds/matrix/style.css b/playgrounds/matrix/style.css new file mode 100644 index 0000000..f327905 --- /dev/null +++ b/playgrounds/matrix/style.css @@ -0,0 +1,70 @@ + +* { + box-sizing: border-box; +} + +html { + background-color : #fefefe; +} + +body { + margin: 0; + width: 100vw; + height: 99vh; + grid-gap: 30px; + display: inline-grid; + align-items: center; + grid-template-columns: 10vw 40vw auto 10vw; + grid-template-rows: 0 10vw auto 0; +} + +h1 { + text-align: right; + border-right: solid 3px #f06; + padding-right: 12px; + color: #f06; + font-size: 52px; + font-family: Helvetica; + grid-row: 2; + grid-column: 2; + line-height: 1.8em; +} + +p { + padding-right: 50px; + color: #444; + font-size: 18px; + font-family: Helvetica; + grid-row: 2; + grid-column: 3; +} + +svg { + height: 100%; + width: 100%; + grid-row: 3; + grid-column: 2/4; + background-color: #f5f6f7; + border-radius: 20px; + border: #f065 1px solid; +} + +.pink { + fill: #FF0066; +} + +.green { + fill: #00ff99; +} + +.dark-pink { + fill: #660029; +} + +.light-pink { + fill: #FF99C2; +} + +.off-white { + fill: #FFCCE0; +} diff --git a/playgrounds/playground.css b/playgrounds/playground.css deleted file mode 100644 index f327905..0000000 --- a/playgrounds/playground.css +++ /dev/null @@ -1,70 +0,0 @@ - -* { - box-sizing: border-box; -} - -html { - background-color : #fefefe; -} - -body { - margin: 0; - width: 100vw; - height: 99vh; - grid-gap: 30px; - display: inline-grid; - align-items: center; - grid-template-columns: 10vw 40vw auto 10vw; - grid-template-rows: 0 10vw auto 0; -} - -h1 { - text-align: right; - border-right: solid 3px #f06; - padding-right: 12px; - color: #f06; - font-size: 52px; - font-family: Helvetica; - grid-row: 2; - grid-column: 2; - line-height: 1.8em; -} - -p { - padding-right: 50px; - color: #444; - font-size: 18px; - font-family: Helvetica; - grid-row: 2; - grid-column: 3; -} - -svg { - height: 100%; - width: 100%; - grid-row: 3; - grid-column: 2/4; - background-color: #f5f6f7; - border-radius: 20px; - border: #f065 1px solid; -} - -.pink { - fill: #FF0066; -} - -.green { - fill: #00ff99; -} - -.dark-pink { - fill: #660029; -} - -.light-pink { - fill: #FF99C2; -} - -.off-white { - fill: #FFCCE0; -} diff --git a/playgrounds/transforms/index.html b/playgrounds/transforms/index.html new file mode 100644 index 0000000..a165dd9 --- /dev/null +++ b/playgrounds/transforms/index.html @@ -0,0 +1,27 @@ + + + + + + + SVG Playground + + + + + +

Transformations

+ +

+ Here you can try out our transformation code, try moving around the pink + box in your console with its variable name: mover +

+ + + + + + + + + diff --git a/playgrounds/transforms/style.css b/playgrounds/transforms/style.css new file mode 100644 index 0000000..f327905 --- /dev/null +++ b/playgrounds/transforms/style.css @@ -0,0 +1,70 @@ + +* { + box-sizing: border-box; +} + +html { + background-color : #fefefe; +} + +body { + margin: 0; + width: 100vw; + height: 99vh; + grid-gap: 30px; + display: inline-grid; + align-items: center; + grid-template-columns: 10vw 40vw auto 10vw; + grid-template-rows: 0 10vw auto 0; +} + +h1 { + text-align: right; + border-right: solid 3px #f06; + padding-right: 12px; + color: #f06; + font-size: 52px; + font-family: Helvetica; + grid-row: 2; + grid-column: 2; + line-height: 1.8em; +} + +p { + padding-right: 50px; + color: #444; + font-size: 18px; + font-family: Helvetica; + grid-row: 2; + grid-column: 3; +} + +svg { + height: 100%; + width: 100%; + grid-row: 3; + grid-column: 2/4; + background-color: #f5f6f7; + border-radius: 20px; + border: #f065 1px solid; +} + +.pink { + fill: #FF0066; +} + +.green { + fill: #00ff99; +} + +.dark-pink { + fill: #660029; +} + +.light-pink { + fill: #FF99C2; +} + +.off-white { + fill: #FFCCE0; +} diff --git a/playgrounds/transforms/transforms.html b/playgrounds/transforms/transforms.html deleted file mode 100644 index a165dd9..0000000 --- a/playgrounds/transforms/transforms.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - - - SVG Playground - - - - - -

Transformations

- -

- Here you can try out our transformation code, try moving around the pink - box in your console with its variable name: mover -

- - - - - - - - - diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js index 1918cd7..7b9722c 100644 --- a/playgrounds/transforms/transforms.js +++ b/playgrounds/transforms/transforms.js @@ -13,7 +13,6 @@ let a = canvas.rect(200, 400).move(200, 400) .addClass('pink') .transform({ px: 100, py: 500, origin: 'top-left' }) -debugger a.animate() .rotate({ rotate: 500, origin: 'top-right' }) diff --git a/playgrounds/webpack.config.js b/playgrounds/webpack.config.js new file mode 100644 index 0000000..87a304a --- /dev/null +++ b/playgrounds/webpack.config.js @@ -0,0 +1,33 @@ +var path = require('path') +module.exports = function (env) { + + let currentTest = path.resolve(__dirname, env) + return { + + mode: 'development', + devtool: 'eval-source-map', + devServer: { + contentBase: [ currentTest, __dirname ], + }, + + devServer: { + contentBase: [currentTest, '..'], + }, + + entry: { + app: path.resolve(currentTest, "main.js"), + }, + + output: { + path: currentTest, + filename: 'bundle.js', + }, + + resolve: { + modules: [ + path.resolve(__dirname, "node_modules"), + "node_modules" + ] + } + } +} -- cgit v1.2.3