aboutsummaryrefslogtreecommitdiffstats
path: root/playgrounds
diff options
context:
space:
mode:
Diffstat (limited to 'playgrounds')
-rw-r--r--playgrounds/colors/index.html13
-rw-r--r--playgrounds/colors/main.js35
-rw-r--r--playgrounds/colors/style.css9
-rw-r--r--playgrounds/matrix/drag.js50
-rw-r--r--playgrounds/matrix/index.html29
-rw-r--r--playgrounds/matrix/matrix.js36
-rw-r--r--playgrounds/matrix/style.css9
-rw-r--r--playgrounds/transforms/index.html9
-rw-r--r--playgrounds/transforms/style.css9
-rw-r--r--playgrounds/transforms/transforms.js17
-rw-r--r--playgrounds/webpack.config.js15
11 files changed, 100 insertions, 131 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;
}
diff --git a/playgrounds/matrix/drag.js b/playgrounds/matrix/drag.js
index 7609404..8f294ed 100644
--- a/playgrounds/matrix/drag.js
+++ b/playgrounds/matrix/drag.js
@@ -1,8 +1,6 @@
function reactToDrag(element, onDrag, beforeDrag) {
-
let xStart, yStart
- let startDrag = event => {
-
+ let startDrag = (event) => {
// Avoid the default events
event.preventDefault()
@@ -21,15 +19,13 @@ function reactToDrag(element, onDrag, beforeDrag) {
SVG.on(window, ['mouseup.drag', 'touchend.drag'], stopDrag)
}
- let reactDrag = event => {
-
+ let reactDrag = (event) => {
// Convert screen coordinates to svg coordinates and use them
var { x, y } = parent.point(event.pageX, event.pageY)
- if (onDrag)
- onDrag(event, x, y)
+ if (onDrag) onDrag(event, x, y)
}
- let stopDrag = event => {
+ let stopDrag = (event) => {
SVG.off(window, ['mousemove.drag', 'touchmove.drag'])
SVG.off(window, ['mouseup.drag', 'touchend.drag'])
}
@@ -42,27 +38,27 @@ function reactToDrag(element, onDrag, beforeDrag) {
SVG.extend(SVG.Element, {
draggable: function (after) {
-
let sx, sy
- reactToDrag(this, (e, x, y) => {
-
- this.transform({
- origin: [sx, sy],
- position: [x, y],
- })
-
- if (after) {
- after(this, x, y)
+ reactToDrag(
+ this,
+ (e, x, y) => {
+ this.transform({
+ origin: [sx, sy],
+ position: [x, y]
+ })
+
+ if (after) {
+ after(this, x, y)
+ }
+ },
+ (e, x, y) => {
+ var toAbsolute = new SVG.Matrix(this).inverse()
+ var p = new SVG.Point(x, y).transform(toAbsolute)
+ sx = p.x
+ sy = p.y
}
-
- }, (e, x, y) => {
-
- var toAbsolute = new SVG.Matrix(this).inverse()
- var p = new SVG.Point(x, y).transform(toAbsolute)
- sx = p.x
- sy = p.y
- })
+ )
return this
- },
+ }
})
diff --git a/playgrounds/matrix/index.html b/playgrounds/matrix/index.html
index e815ed5..9da4c20 100644
--- a/playgrounds/matrix/index.html
+++ b/playgrounds/matrix/index.html
@@ -1,15 +1,12 @@
-
<!DOCTYPE html>
<html>
-
<head>
- <meta charset="utf-8">
+ <meta charset="utf-8" />
<title>SVG Playground</title>
- <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="style.css" />
</head>
<body>
-
<h1>SVG Transformations</h1>
<p>
@@ -18,30 +15,26 @@
</p>
<svg viewBox="-200 -200 400 400">
-
<g id="tester">
- <rect class="green" width=50 height=50 />
- <line x2=50 stroke=black stroke-width=1 />
+ <rect class="green" width="50" height="50" />
+ <line x2="50" stroke="black" stroke-width="1" />
</g>
<g id="guess">
- <rect class="dark-pink" width=50 height=50 opacity=0.5 />
- <line x2=50 stroke=black stroke-width=1 />
+ <rect class="dark-pink" width="50" height="50" opacity="0.5" />
+ <line x2="50" stroke="black" stroke-width="1" />
</g>
<g id="true">
- <rect class="pink" width=50 height=50 opacity=0.5 />
- <line x2=50 stroke=black stroke-width=1 />
+ <rect class="pink" width="50" height="50" opacity="0.5" />
+ <line x2="50" stroke="black" stroke-width="1" />
</g>
- <ellipse id="or" class="dark-pink" rx=5 ry=5 />
- <ellipse id="b1" class="pink" cx="50" rx=5 ry=5 />
- <ellipse id="b2" class="green" cy="50" rx=5 ry=5 />
-
+ <ellipse id="or" class="dark-pink" rx="5" ry="5" />
+ <ellipse id="b1" class="pink" cx="50" rx="5" ry="5" />
+ <ellipse id="b2" class="green" cy="50" rx="5" ry="5" />
</svg>
-
</body>
<script src="../../dist/svg.js" charset="utf-8"></script>
<script src="drag.js" charset="utf-8"></script>
<script src="matrix.js" charset="utf-8"></script>
-
</html>
diff --git a/playgrounds/matrix/matrix.js b/playgrounds/matrix/matrix.js
index 33e21d1..fb74717 100644
--- a/playgrounds/matrix/matrix.js
+++ b/playgrounds/matrix/matrix.js
@@ -1,6 +1,5 @@
-
-function print (mat) {
- let {a, b, c, d} = mat
+function print(mat) {
+ let { a, b, c, d } = mat
console.log(`
a: ${a.toFixed(2)}
b: ${b.toFixed(2)}
@@ -9,14 +8,19 @@ function print (mat) {
`)
}
-function moveit () {
-
- let {cx: x0, cy: y0} = or.rbox(svg)
- let {cx: x1, cy: y1} = b1.rbox(svg)
- let {cx: x2, cy: y2} = b2.rbox(svg)
+function moveit() {
+ let { cx: x0, cy: y0 } = or.rbox(svg)
+ let { cx: x1, cy: y1 } = b1.rbox(svg)
+ let { cx: x2, cy: y2 } = b2.rbox(svg)
let m = new SVG.Matrix(
- (x1 - x0) / 50, (y1 - y0) / 50, (x2 - x0) / 50, (y2 - y0) / 50, x0, y0)
+ (x1 - x0) / 50,
+ (y1 - y0) / 50,
+ (x2 - x0) / 50,
+ (y2 - y0) / 50,
+ x0,
+ y0
+ )
let com = m.decompose()
let g = new SVG.Matrix().compose(com)
@@ -24,18 +28,18 @@ function moveit () {
target.transform(m)
mover.transform(g)
- console.log(com);
+ console.log(com)
print(m)
print(g)
}
// Declare the two points
let svg = SVG('svg')
-var or = SVG("#or").draggable(moveit)
-var b1 = SVG("#b1").draggable(moveit)
-var b2 = SVG("#b2").draggable(moveit)
+var or = SVG('#or').draggable(moveit)
+var b1 = SVG('#b1').draggable(moveit)
+var b2 = SVG('#b2').draggable(moveit)
// Declare the squares
-let target = SVG("#true")
-let mover = SVG("#guess")
-let tester = SVG("#tester")
+let target = SVG('#true')
+let mover = SVG('#guess')
+let tester = SVG('#tester')
diff --git a/playgrounds/matrix/style.css b/playgrounds/matrix/style.css
index f327905..24a9d4e 100644
--- a/playgrounds/matrix/style.css
+++ b/playgrounds/matrix/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;
}
diff --git a/playgrounds/transforms/index.html b/playgrounds/transforms/index.html
index 8e1f804..77ef1bc 100644
--- a/playgrounds/transforms/index.html
+++ b/playgrounds/transforms/index.html
@@ -1,15 +1,12 @@
-
<!DOCTYPE html>
<html>
-
<head>
- <meta charset="utf-8">
+ <meta charset="utf-8" />
<title>SVG Playground</title>
- <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="style.css" />
</head>
<body>
-
<h1>Transformations</h1>
<p>
@@ -18,10 +15,8 @@
</p>
<svg viewBox="0 0 1500 1500" id="canvas"></svg>
-
</body>
<script src="../../dist/svg.js" charset="utf-8"></script>
<script src="transforms.js" charset="utf-8"></script>
-
</html>
diff --git a/playgrounds/transforms/style.css b/playgrounds/transforms/style.css
index f327905..24a9d4e 100644
--- a/playgrounds/transforms/style.css
+++ b/playgrounds/transforms/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;
}
diff --git a/playgrounds/transforms/transforms.js b/playgrounds/transforms/transforms.js
index e9c0376..d750797 100644
--- a/playgrounds/transforms/transforms.js
+++ b/playgrounds/transforms/transforms.js
@@ -1,22 +1,21 @@
-
-
let canvas = SVG('#canvas')
// Make the green rectangle
-canvas.rect(200, 400).move(200, 400)
- .attr('opacity', 0.3)
- .addClass('green')
+canvas.rect(200, 400).move(200, 400).attr('opacity', 0.3).addClass('green')
// Make the pink rectangle
-let a = canvas.rect(200, 400).move(200, 400)
+let a = canvas
+ .rect(200, 400)
+ .move(200, 400)
.attr('opacity', 0.3)
.addClass('pink')
.transform({ px: 100, py: 500, origin: 'top-left' })
- a.animate()
- .rotate({ rotate: 500, origin: 'top-right' })
+a.animate().rotate({ rotate: 500, origin: 'top-right' })
// Put an ellipse where we expect the object to be
-canvas.ellipse(30, 30).center(100, 500)
+canvas
+ .ellipse(30, 30)
+ .center(100, 500)
.attr('opacity', 0.3)
.addClass('dark-pink')
diff --git a/playgrounds/webpack.config.js b/playgrounds/webpack.config.js
index 87a304a..c0e7233 100644
--- a/playgrounds/webpack.config.js
+++ b/playgrounds/webpack.config.js
@@ -1,33 +1,28 @@
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 ],
+ contentBase: [currentTest, __dirname]
},
devServer: {
- contentBase: [currentTest, '..'],
+ contentBase: [currentTest, '..']
},
entry: {
- app: path.resolve(currentTest, "main.js"),
+ app: path.resolve(currentTest, 'main.js')
},
output: {
path: currentTest,
- filename: 'bundle.js',
+ filename: 'bundle.js'
},
resolve: {
- modules: [
- path.resolve(__dirname, "node_modules"),
- "node_modules"
- ]
+ modules: [path.resolve(__dirname, 'node_modules'), 'node_modules']
}
}
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-03 07:20:02 +0000