mirrors
/
svg.js
mirror of https://github.com/svgdotjs/svg.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520
							
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="dist/polyfills.js"></script>
  <script type="text/javascript" src="dist/polyfillsIE.js"></script>
  <script type="text/javascript" src="dist/svg.min.js"></script>


</head>
<body style="background-color: #c7c7ff">

<!-- <div id="absolute"><label>Absolute: <input type="range" min="0" max="1" step="0.01"></slider></label><span></span></div>
<div id="position"><label>Position: <input type="range" min="0" max="5" step="0.01"></slider></label><span></span></div> -->

<button name="back1000">Back 1000</button>
<button name="back100">Back 100</button>
<button name="forth100">Forth 100</button>
<button name="forth1000">Forth 1000</button>
<button name="speed2">Speed x2</button>
<button name="speed05">Speed x0.5</button>
<button name="stop">Stop</button>
<button name="finish">Finish</button>
<button name="pause">Pause</button>
<button name="play">Play</button>
<button name="reverse">Reverse</button>
<span id="displayText"></span>
<br>

<!-- Making the svg -->
<svg width=1000px height=500px id="canvas">
  <rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 />
</svg>

<!-- Modifying the svg -->
<script type="text/javascript">

// import SVG from './src/svg.js'
//
// window.SVG = SVG

var rect = SVG('rect').hide()
var sin = Math.sin
var pi = Math.PI
var round = Math.round

function getColor(t) {
  var a = round(80 * sin(2 * pi * t / 0.5 + 0.01) + 150)
  var b = round(50 * sin(2 * pi * t / 0.5 + 4.6) + 200)
  var c = round(100 * sin(2 * pi * t / 0.5 + 2.3) + 150)
  var color = 'rgb('+ a +','+ b +','+ c +')'
  return color
}

// var rect1 = SVG('<rect>').addTo('svg').size(50, 50).move(100, 100)
// var rect2 = SVG('<rect>').addTo('svg').size(50, 50).move(100, 200)
//
// var anim1 = new SVG.Runner(1000).element(rect1).loop(5, true, 1000).move(200, 100)
// var anim2 = new SVG.Runner(1000).element(rect2).loop(5, true, 1000).move(200, 200)
//
// SVG('#absolute').on('input slide', function (e) {
//   var val = e.target.value
//   document.querySelector('#absolute span').textContent = val
//   anim1.absolute(val)
// })
//
// SVG('#position').on('input slide', function (e) {
//   var val = e.target.value
//   document.querySelector('#position span').textContent = val
//   anim2.position(val)
// })


// rect.animate(4000)
//     .during(t => rect.transform({scale: sqrt(1 + t), rotate: 720 * t}))
//   .after(500, ()=> {rect.attr('stroke', 'white')})
//     .queue(() => rect.attr('fill', getColor(0)))
//   .animate(1500, 500, true)
//     .queue(()=> {}, t => rect.attr('fill', getColor(t)))
//   .animate(1000, true)
//     .move(200, 200)
//     .size(300, 300)

// SVG.Animator.timeout(()=> { rect.animate().pause() }, 1000 - 10)
// SVG.Animator.timeout(()=> { rect.animate().play() }, 2000 - 10)


// SVG('rect')
//   .clone().show()
//   .animate()
//   .move(300, 200)

//
// for (let i = 0 ; i < 15; i++) {
//   for (let j = 0 ; j < 10; j++) {
//
//     // Make the rect
//     let o = i + j
//     let rect = SVG('rect').clone().show()
//       .width(40).height(40)
//       .x(50 * i).y(50 * j)
//       .attr('fill', getColor(o * 0.1))
//
//     // Move the rect
//     let {cx, cy} = rect.bbox()
//
//     // Animate the rect
//     rect.animate(3000, Math.random() * 2000)
//       // .during(t => rect.transform({rotate: 700 * t, origin: [cx, cy]}))
//       .transform({rotate: 720}, true)
//       // .during(t => rect.attr('transform', `rotate(${700 * t})`))
//       .during(t => rect.attr('fill', getColor(o * 0.1 + t)))
//   }
// }

var canvas = SVG('#canvas')

canvas.attr('viewBox', null)

SVG.defaults.timeline.ease = '-'

var r = new SVG.Runner(1000)
var t = new SVG.Timeline().persist(true)

r.schedule(t, 200)
  .animate(500).loop(5, true, 100)
  .animate(600, 200, 'absolute')
  .animate(600, 300)
  .animate(600, 300, 'now')
  .animate(1000, 0, 'absolute').loop(6, true)

var schedule = t.schedule()

schedule.forEach(function (s, i) {
  var rect = canvas.rect(s.duration / 10, 25)
    .move(100 + s.start/10, 100 + i*30)
    .attr('fill', '#000')

  s.runner.element(rect)
    .attr('fill', getColor(i*0.1))

  // if (i===0)
  //   s.runner.during(console.log)
})

// t.play()

var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black')
mover.clone().insertAfter(mover)
canvas.line(100, 300, 800, 300).attr('stroke', 'black')

var text = SVG('#displayText')

t.on('time', function (e) {
  mover.x(100 + e.detail/10)
  text.node.textContent = e.detail
})

t.on('finished', function (e) {
  console.log('finished')
})

SVG('button[name="back100"]').on('click', function (e) {
  t.seek(-100)
})
SVG('button[name="back1000"]').on('click', function (e) {
  t.seek(-1000)
})
SVG('button[name="forth100"]').on('click', function (e) {
  t.seek(100)
})
SVG('button[name="forth1000"]').on('click', function (e) {
  t.seek(1000)
})

SVG('button[name="speed2"]').on('click', function (e) {
  t.speed(2)
})

SVG('button[name="speed05"]').on('click', function (e) {
  t.speed(0.5)
})

SVG('button[name="pause"]').on('click', function (e) {
  t.pause()
})

SVG('button[name="play"]').on('click', function (e) {
  t.play()
})

SVG('button[name="stop"]').on('click', function (e) {
  t.stop()
})

SVG('button[name="finish"]').on('click', function (e) {
  t.finish()
})

SVG('button[name="reverse"]').on('click', function (e) {
  t.reverse()
})


canvas.rect(100, 100).on('click', function (e) {
  e.target.instance.animate()
    .move(Math.random()*1000, Math.random()*750)
    .timeline().on('finished', function (e) {
    console.log('rect finished')
  })
})

console.log(schedule)


// var bla = SVG('<rect>').size(0, 0).move(200, 200).addTo('svg')
// bla.animate().size(220, 200).queue(null, console.log)

// var randPoint = (x = 50, y = 50) => [
//   Math.random() * 100 - 50 + x,
//   Math.random() * 100 - 50 + y
// ]
//
// var poly = SVG('<polygon>').plot([
//   randPoint(),
//   randPoint(),
//   randPoint(),
//   randPoint(),
//   randPoint()
// ]).attr({fill: 'none', stroke: 'black'}).addTo('svg')
// var polyAni = poly.animate(new SVG.Spring(3000, 0))
//
// SVG.on(document, 'click', function (e) {
//   polyAni.plot([
//     randPoint(e.pageX-50, e.pageY-50),
//     randPoint(e.pageX+50, e.pageY-50),
//     randPoint(e.pageX+50, e.pageY),
//     randPoint(e.pageX+50, e.pageY+50),
//     randPoint(e.pageX-50, e.pageY+50)
//   ])
// })

// var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
// var anim = mover.animate(new SVG.Spring(500, 10))
//
// let date = +new Date
// SVG.on(document, 'mousemove', function (e) {
//   // if (+new Date - date > 50) {
//   //   date = +new Date
//   // } else {
//   //   return
//   // }
//
//   //var p = mover.point(e.pageX, e.pageY)
//   var p = mover.doc().point(e.clientX, e.clientY)
//   //var p = {x: e.pageX, y: e.pageY}
//   //console.log(p)
//   anim.transform({px: p.x - 100, py: p.y - 100})
//   //anim.center(p.x, p.y)
// })
/*
let canvas = SVG('#canvas')

let rectangle = canvas.rect(100, 200).move(100, 0)

let bbox = rectangle.bbox()

var timer = 0
rectangle.timeline().source(() => {
  timer += 2
  document.querySelector('#absolute span').textContent = timer
  return timer
})
rectangle.animate().transform({
  rotate: 90,
  origin: [bbox.cx, bbox.cy]
})*/

//


// SVG('#absolute').on('input slide', function (e) {
//   var val = e.target.value
//
//   canvas.clear()
  // canvas.ellipse(20, 20)
  // let re = canvas.rect(300, 150).move(100, 150).attr('opacity', 0.5)
  // re.clone()
  //   .transform({rotate: 45, skew: 30}, true)
  //
  // re.clone()
  //   .transform({
  //     rotate: 45, skew: 30, /*translate: [150, 140], */
  //   }, true)
  //   .transform({rotate: val, origin: 'bottom-right'}, true)
  //
  // re.clone()
  //   .transform({rotate: 45, skew: 30}, true)
  //   .transform({rotate: val, origin: 'bottom-right'}, true)
  //   .transform({skew}, true)
//   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
//   })
//
//   let obj = { rotate: val * 180, origin: 'top-left' }
//   let obj2 = { rotate: val * 280, origin: 'center' }
//
//   a.clone() // startPosition
//   a.clone().transform(obj, true).transform(obj2, true) // endPosition
// })


// let a = canvas.rect(200, 400).move(500, 400)
//
// a.animate(1000, 500).move(100, 100).animate(1000, 500).move(500, 400)


/*  FUZZYMS PLANETS!! */
// let canvas = SVG('#canvas')
// let gradient = canvas.gradient('radial', function(gradient) {
//   gradient.stop(0, '#f00')
//   gradient.stop(1, '#ff0')
// })
//
// let gradientEarth = canvas.gradient('linear', function(gradient) {
//   gradient.stop(0, '#00f')
//   gradient.stop(1, '#0f0')
// })
//
// let sun = canvas.circle(200).center(500, 300).attr({ fill: gradient })
//
// let earth = canvas.circle(100).center(1000, 300).attr({fill: gradientEarth})
//
// let moon = canvas.circle(50).center(1200, 300).attr({fill: '#ffa'})
//
// earth.animate(10000).loop().ease('-')
//   .transform({rotate: 360, origin: [500, 300]}, true)
//   .transform({rotate: 720, origin: 'center'}, true)
//   .on('step', (e) => {
//   //  console.log(e)
//   })
//
// moon.animate(10000).loop().ease('-')
//   .transform({rotate: 360, origin: [500, 300]}, true)
//   .transform({rotate: 3600, origin: [1000, 300]}, true)


/**
 * FUZZYS EXAMPLE
 */
// let a = canvas.rect(200, 400).move(500, 400)
//   .attr('opacity', 0.3)
//   .addClass('pink')
//   .transform({ tx: 300, ty: 500, origin: 'top-left' })
//
// let obj = { rotate: 100, origin: 'top-left'}
// let obj2 = { rotate: 280, origin: 'center' }
// let obj3 = { rotate: 1000, origin: 'center', translate: [300, 200]}
//
//
// var c = a.clone()
//
// c.animate(3000)
//   .transform(obj)
//   .transform(obj2, true) // animation
//
// a.clone().attr('fill', 'blue')
//   .transform(obj)
//   .transform(obj2, true) // endPosition


// SAIVANS EXAMPLE


// canvas.ellipse(20, 20).center(100, 100)
// let r = canvas.rect(200, 400).move(100, 100)
//   .attr('opacity', 0.3)
//   //.transform({ tx: 300, ty: 500, origin: 'top-left' })
//
// // Normal usage
// let wait = 3000
// let rAnim = r.clone().attr('fill', '#f00').animate(wait).attr('fill', '#0f0')
// let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.Spring(wait, 15))
// //let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.PID(0.01, 0.001, 1, 10))
//
// // var timer = 0
// // rDecl.timeline().source(() => {
// //   timer += 100
// //   return timer
// // })
//
// let runTransformation = (transform) => {
//   return () => {
//     //transform = new SVG.Matrix(transform)
//     let relative = true
//     let affine = true
//     r.transform(transform, relative)
//     rAnim.animate(wait).transform(transform, relative, affine)
//     rDecl.transform(transform, relative, affine)
//   }
// }
//
// setTimeout(runTransformation({
//   origin: 'top-left',
//   translate: [530, 250],
//   rotate: 300,
//   scale: 2,
//   shear: 1,
// }), 0.1 * wait )
//
//
//
// setTimeout(runTransformation({
//   origin: 'top-left',
//   translate: [530, 250],
//   rotate: 100,
//   scale: 2,
//   shear: 1,
// }), 0.4 * wait)
//
// setTimeout(runTransformation({
//   origin: 'top-left',
//   translate: [530, 250],
//   rotate: 100,
//   scale: 2,
//   shear: 1,
// }), 0.6 * wait)


// canvas.circle(50).center(100, 0).attr('fill', 'gray')
//
// setTimeout(runTransformation({
//   rotate: 360,
//   origin: [100, 0]
// }), 0.1 * wait )
//
//
// setTimeout(runTransformation({
//   rotate: 360,
// }), 0.4 * wait)

// const getConsole = (time) => {
//   return () => {
//     console.group(time)
//     console.log(0, rAnim.element()._transformationRunners[0] && rAnim.element()._transformationRunners[0].transforms.decompose().rotate)
//     console.log(1, rAnim.element()._transformationRunners[1] && rAnim.element()._transformationRunners[1].transforms.decompose().rotate)
//     console.log(2, rAnim.element()._transformationRunners[2] && rAnim.element()._transformationRunners[2].transforms.decompose().rotate)
//     console.log(3, rAnim.element()._transformationRunners[3] && rAnim.element()._transformationRunners[3].transforms.decompose().rotate)
//     console.log(4, rAnim.element()._transformationRunners[4] && rAnim.element()._transformationRunners[4].transforms.decompose().rotate)
//     console.groupEnd(time)
//   }
// }
//
// logCall = (time) => {
//   setTimeout(getConsole(time), time)
// }
//
// logCall(0.2 * wait)
// logCall(0.3 * wait)
// logCall(0.4 * wait)
// logCall(0.5 * wait)
// logCall(0.6 * wait)
// logCall(0.7 * wait)
// logCall(0.8 * wait)
// logCall(0.9 * wait)
// logCall(1 * wait)
// logCall(1.1 * wait)
// logCall(1.2 * wait)
// logCall(1.3 * wait)
// logCall(1.4 * wait)
// logCall(1.5 * wait)

</script>

</body>
</html>