diff options
Diffstat (limited to 'dirty.html')
| -rw-r--r-- | dirty.html | 36 |
1 files changed, 22 insertions, 14 deletions
@@ -17,7 +17,7 @@ <div id="position"><label>Position: <input type="range" min="0" max="5" step="0.01"></slider></label><span></span></div> <!-- Making the svg --> -<svg width=1000px height=1000px id="canvas"> +<svg width=1000px height=1000px id="canvas" viewbox="-1000 -1000 3000 3000"> <rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 /> </svg> @@ -198,27 +198,35 @@ rectangle.animate().transform({ let canvas = SVG('#canvas') -// Make the green rectange -canvas.rect(200, 400).move(200, 400) - .attr('opacity', 0.3) - .addClass('green') +// // Make the green rectange +// canvas.rect(200, 400).move(500, 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(500, 400) .attr('opacity', 0.3) .addClass('pink') .transform({ px: 100, py: 500, origin: 'top-left' }) - var timer = 0 - a.timeline().source(() => { - timer += 1 - document.querySelector('#absolute span').textContent = timer - return timer - }) +var timer = 0 +a.timeline().source(() => { + timer += 1 + document.querySelector('#absolute span').textContent = timer + return timer +}) + + +let obj = { rotate: 180, origin: [600, 600] } + +a.clone() // startPosition +a.clone().transform(obj) // endPosition +a.animate().transform(obj) // animation + + -a.animate() - .transform({ translate: [200, 200], rotate: 500, origin: 'center' }, true) +canvas.ellipse(30, 30) // Put an ellipse where we expect the object to be canvas.ellipse(30, 30).center(100, 500) |