summaryrefslogtreecommitdiffstats
path: root/playgrounds
diff options
context:
space:
mode:
authorUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2018-12-01 15:57:06 +0100
committerUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2018-12-01 15:57:06 +0100
commit9546418c5ed9b1876132b43dff1ae690c3ec4e24 (patch)
treee291fe6c2443aeaaef99edf5fbc5cd1af336f43e /playgrounds
parentdbe9c376fd76dd4e4777281888f4092e38512c18 (diff)
parent947964e4a257b1b1fcc9b115a218a9d8dde7513f (diff)
downloadsvg.js-9546418c5ed9b1876132b43dff1ae690c3ec4e24.tar.gz
svg.js-9546418c5ed9b1876132b43dff1ae690c3ec4e24.zip
Merge branch '790-color-spaces' into 3.0.0
Diffstat (limited to 'playgrounds')
-rw-r--r--playgrounds/colors/index.html26
-rw-r--r--playgrounds/colors/main.js29
-rw-r--r--playgrounds/colors/style.css (renamed from playgrounds/playground.css)0
-rw-r--r--playgrounds/matrix/index.html (renamed from playgrounds/matrix/matrix.html)0
-rw-r--r--playgrounds/matrix/style.css70
-rw-r--r--playgrounds/transforms/index.html (renamed from playgrounds/transforms/transforms.html)0
-rw-r--r--playgrounds/transforms/style.css70
-rw-r--r--playgrounds/transforms/transforms.js1
-rw-r--r--playgrounds/webpack.config.js33
9 files changed, 228 insertions, 1 deletions
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 @@
+
+<!DOCTYPE html>
+<html>
+
+ <head>
+ <meta charset="utf-8">
+ <title>SVG Playground</title>
+ <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>
+
+ <svg viewBox="0 0 1500 1500" id="canvas"></svg>
+
+ </body>
+
+ <script src="../../dist/svg.js" charset="utf-8"></script>
+ <script src="bundle.js" charset="utf-8"></script>
+
+</html>
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/playground.css b/playgrounds/colors/style.css
index f327905..f327905 100644
--- a/playgrounds/playground.css
+++ b/playgrounds/colors/style.css
diff --git a/playgrounds/matrix/matrix.html b/playgrounds/matrix/index.html
index cd34b7d..cd34b7d 100644
--- a/playgrounds/matrix/matrix.html
+++ b/playgrounds/matrix/index.html
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/transforms/transforms.html b/playgrounds/transforms/index.html
index a165dd9..a165dd9 100644
--- a/playgrounds/transforms/transforms.html
+++ b/playgrounds/transforms/index.html
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.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"
+ ]
+ }
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-26 12:30:25 +0000