wilderness-core
Version:
The SVG animation engine behind Wilderness
26 lines (20 loc) • 3.38 kB
JavaScript
import { play, render } from '../crude-wilderness-dom'
import { shape, timeline } from '../../src'
const from = {
type: 'path',
d: 'M481.41,123.93l-8.41-8.42l28.8-28.8c2.32-2.32,6.09-2.32,8.41,0.01c2.32,2.32,2.32,6.08,0,8.41 L481.41,123.93z M550.32,126.84c-2.32-2.32-6.09-2.32-8.41,0l-28.8,28.8l8.42,8.42l28.8-28.8 C552.65,132.93,552.65,129.16,550.32,126.84z M459.08,108.07c-0.18-0.18-0.47-0.17-0.65,0l-7.76,7.77c-0.18,0.17-0.18,0.47,0,0.64 l2.27,2.27l-11.65,11.65c-11.99,11.99-12.79,30.91-2.44,43.85l-2.31,2.31c-3.9,3.89-4.52,9.76-1.98,14.35l-12.97,12.97l11.57,11.57 l12.97-12.97c4.59,2.54,10.46,1.91,14.35-1.98l2.31-2.31c12.93,10.36,31.86,9.56,43.85-2.43l11.65-11.65l2.26,2.26 c0.18,0.18,0.47,0.18,0.65,0l7.77-7.76c0.17-0.18,0.17-0.47,0-0.66L459.08,108.07z',
fill: 'none',
stroke: 'black'
}
const to = {
...from,
d: 'M481.74,110.58c8.23,0,15.86,2.54,22.15,6.88c10.22,7.05,16.92,18.86,16.92,32.25 c0,11.69-6.59,20.57-12.64,28.09c-5.07,6.29-9.77,11.63-9.9,16.86c0,2.68-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.22-4.95-4.9 c-0.47-6.28-7.31-12.27-13.47-20.07c-5.21-6.59-9.94-14.46-9.94-24.88c0-11.53,4.98-21.89,12.9-29.04 C462.46,114.4,471.66,110.58,481.74,110.58L481.74,110.58z M537.96,177.67c1.87,1.06,2.53,3.44,1.47,5.31 c-1.11,1.87-3.49,2.53-5.36,1.47l-13.14-7.63c1.47-2.12,2.78-4.4,3.89-6.72L537.96,177.67z M442.56,176.81l-13.19,7.63 c-1.87,1.06-4.25,0.4-5.31-1.47c-1.11-1.87-0.45-4.25,1.42-5.31l13.14-7.58C439.73,172.41,441.05,174.69,442.56,176.81 L442.56,176.81z M434.22,153.61H419c-2.13,0-3.89-1.77-3.89-3.89c0-2.17,1.77-3.94,3.89-3.94h15.22c-0.1,1.31-0.15,2.58-0.15,3.94 C434.07,151.03,434.12,152.34,434.22,153.61L434.22,153.61z M438.62,129.34l-13.14-7.58c-1.87-1.11-2.53-3.49-1.42-5.36 c1.06-1.87,3.44-2.53,5.31-1.42l13.19,7.58C441.05,124.69,439.73,126.96,438.62,129.34L438.62,129.34z M454.6,110.53l-7.58-13.19 c-1.11-1.87-0.46-4.25,1.41-5.31c1.87-1.11,4.25-0.45,5.36,1.42l7.58,13.15C458.99,107.7,456.72,109.02,454.6,110.53L454.6,110.53z M477.8,102.19V86.97c0-2.12,1.77-3.89,3.95-3.89c2.12,0,3.89,1.77,3.89,3.89v15.22c-1.26-0.1-2.58-0.15-3.89-0.15 C480.38,102.04,479.11,102.09,477.8,102.19L477.8,102.19z M502.12,106.59l2.02-3.51l2.27-3.94l3.29-5.7 c1.06-1.87,3.44-2.53,5.31-1.42c1.87,1.06,2.53,3.44,1.47,5.31l-3.45,5.97l-2.09,3.61l-2.09,3.61c-1.19-0.85-2.43-1.64-3.7-2.36 C504.15,107.6,503.14,107.08,502.12,106.59L502.12,106.59z M520.93,122.57l3.06-1.76l3.49-2.01l6.6-3.81 c1.87-1.11,4.25-0.46,5.36,1.42c1.06,1.87,0.4,4.25-1.47,5.36l-6.45,3.72l-3.67,2.12l-3.02,1.74 C524.28,128.19,521.68,123.66,520.93,122.57L520.93,122.57z M529.22,145.77h15.22c2.17,0,3.89,1.77,3.89,3.94 c0,2.12-1.72,3.89-3.89,3.89h-15.22c0.1-1.26,0.15-2.58,0.15-3.89C529.37,148.35,529.32,147.08,529.22,145.77L529.22,145.77z M482.15,235.46c4.45,0,8.39-3.18,11.17-8.29h-22.35C473.7,232.27,477.7,235.46,482.15,235.46L482.15,235.46z M470.97,214.68h22.35 c2.73,0,4.96,2.22,4.96,4.95l0,0c0,2.73-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.17-4.95-4.9l0,0 C466.02,216.9,468.24,214.68,470.97,214.68L470.97,214.68z M470.97,202.19h22.35c2.73,0,4.96,2.22,4.96,4.95l0,0 c0,2.68-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.23-4.95-4.9l0,0C466.02,204.41,468.24,202.19,470.97,202.19L470.97,202.19z',
transforms: [[ 'reverse' ]]
}
const animation = timeline(shape(from, to), {
alternate: true,
duration: 1500,
iterations: Infinity
})
render(document.querySelector('svg'), animation)
play(animation)