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/transforms | |
| parent | 8e18b4698edd00f83af0be05bb3374f92fecaeb9 (diff) | |
| download | svg.js-03322672782a6318b019eff33fe44ec800d6f12c.tar.gz svg.js-03322672782a6318b019eff33fe44ec800d6f12c.zip | |
dependency updates, easier formatting
Diffstat (limited to 'playgrounds/transforms')
| -rw-r--r-- | playgrounds/transforms/index.html | 9 | ||||
| -rw-r--r-- | playgrounds/transforms/style.css | 9 | ||||
| -rw-r--r-- | playgrounds/transforms/transforms.js | 17 |
3 files changed, 14 insertions, 21 deletions
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') |