✨ filled blank for a great diff

src/Parts/backgroundCircle/backgroundCircle.js

@@ -1,4 +1,24 @@
-const svgNS = 'http://www.w3.org/2000/svg'
 /* START: Fill Here */
+import { styler, tween, action } from 'popmotion'
+const svgNS = 'http://www.w3.org/2000/svg'
+
+const mainSvg = document.getElementById('main-svg')
+const backgroundCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle')
+mainSvg.prepend(backgroundCircle)
+
+const backgroundCircleStyler = styler(backgroundCircle)
+
+backgroundCircleStyler.set({
+  x: 100,
+  y: 100,
+  fill: 'darkcyan',
+})
+
+const animateBackground = tween({
+  from: { r: 0 },
+  to: { r: 100 },
+  duration: 500,
+})
 
+export default action(({ complete }) => animateBackground.start({ update: backgroundCircleStyler.set, complete }))
 /* END: Fill Here */

src/Parts/body/body.js

@@ -9,8 +9,36 @@ subSvg.appendChild(bodyPath)
 
 const bodyStyler = styler(bodyPath);
 /* START: Fill Here */
+bodyPath.setAttribute('stroke-dasharray', '220')
+bodyPath.setAttribute('stroke-dashoffset', '220')
+bodyStyler.set({
+  opacity: 0,
+  d: path,
+  strokeWidth: .5,
+  stroke: 'white',
+  fill: 'white',
+  fillOpacity: 0,
+})
+
+
+const drawBody = tween({
+  from: { 'stroke-dashoffset': 220, opacity: 1 },
+  to: { 'stroke-dashoffset': 440 },
+  duration: 2000,
+})
+
+const fillBody = tween({
+  from: { fillOpacity: 0 },
+  to: { fillOpacity: 1 },
+  duration: 500,
+})
+
+const animateBody = chain(
+  drawBody,
+  fillBody
+)
 /* END: Fill Here */
 
 /* START: Update Here */
-export default action(({ complete }) => {})
+export default action(({ complete }) => animateBody.start({ update: bodyStyler.set, complete }))
 /* END: Update Here */

src/Parts/eye/eye.js

@@ -9,17 +9,35 @@ const eyeStyler = styler(eye);
 eyeStyler.set({
   opacity: 0,
   /* START: Fill Here */
+  fill: 'black',
+  r: 3,
+  x: 80,
+  y: 35,
   /* END: Fill Here */
 })
 
 const showEye = tween({
   /* START: Fill Here */
+  from: { scaleY: 0, opacity: 1 },
+  to: { scaleY: 1 },
+  duration: 200,
   /* END: Fill Here */
 })
 
 /* START: Fill Here */
+const blinkEye = tween({
+  from: { scaleY: 1 },
+  to: { scaleY: 0.1 },
+  duration: 50,
+  flip: 1,
+})
 /* END: Fill Here */
 
 /* START: Update Here */
-export default action(({ complete }) => showEye.start({ update: eyeStyler.set, complete }))
+export default action(({ complete }) => {
+  showEye.start({ update: eyeStyler.set, complete: () => {
+    complete()
+    setInterval(() => blinkEye.start({ update: eyeStyler.set }), 2000)
+  }})
+})
 /* END: Update Here */

src/Parts/hair/hair.js

@@ -10,13 +10,18 @@ subSvg.appendChild(hair)
 const hairStyler = styler(hair);
 hairStyler.set({
   /* START: Fill Here */
+  fill: 'lavender',
   /* END: Fill Here */
   opacity: 0,
   d: path,
 })
 
 const animateHair = tween({
   /* START: Fill Here */
+  from: { y: -100, opacity: 1 },
+  to: { y: 0 },
+  duration: 500,
+  ease: easing.backOut,
   /* END: Fill Here */
 })
 

src/Parts/horn/horn.js

@@ -10,13 +10,21 @@ subSvg.appendChild(horn)
 const hornStyler = styler(horn);
 hornStyler.set({
   /* START: Fill Here */
+  fill: 'aquamarine',
   /* END: Fill Here */
   opacity: 0,
   d: path,
 })
 
 const animateHorn = tween({
   /* START: Fill Here */
+  from: {
+    x: -20,
+    y: 30,
+    opacity: 1,
+  },
+  to: { x: 0, y: 0 },
+  duration: 1000,
   /* END: Fill Here */
 })
 

src/Parts/tail/tail.js

@@ -10,13 +10,18 @@ subSvg.appendChild(tail)
 const tailStyler = styler(tail);
 tailStyler.set({
   /* START: Fill Here */
+  fill: 'pink',
   /* END: Fill Here */
   opacity: 0,
   d: path,
 })
 
 const animateTail = tween({
   /* START: Fill Here */
+  from: { x: -100, opacity: 1 },
+  to: { x: 0 },
+  duration: 500,
+  ease: easing.backOut
   /* END: Fill Here */
 })
 

src/index.js

@@ -1,4 +1,13 @@
-import { backgroundCircle } from './Parts'
+import { backgroundCircle, body, hair, tail, eye, horn } from './Parts'
+import { chain, composite } from 'popmotion'
 
-/* START: Fill Here */
-/* END: Fill Here */
+chain(
+  backgroundCircle,
+  body,
+  composite({
+    hair,
+    tail,
+  }),
+  eye,
+  horn,
+).start()