Ga/animation fix (#88)

* fix: cheek color * fix animation reversal
rectangle-factory · Aug 4, 2022 · 12f2473 · 12f2473
1 parent 87a215f
commit 12f2473
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 12 deletions.
diff --git a/src/libraries/Body.sol b/src/libraries/Body.sol
@@ -65,7 +65,7 @@ library Body {
                     _mixMode: _mixMode,
                     _attributes: ""
                 }),
-                SVG.element("animateMotion", SVG.animateMotionAttributes(reverse, dur, ""), Data.mpathJitterLg()),
+                SVG.element("animateMotion", SVG.animateMotionAttributes(reverse, dur, "linear"), Data.mpathJitterLg()),
                 (_tokenId == 0) ? _genesis(bodyFill1, bodyFill2, dur) : ""
             );
     }

diff --git a/src/libraries/Cheeks.sol b/src/libraries/Cheeks.sol
@@ -42,7 +42,7 @@ library Cheeks {
     function _big() internal pure returns (string memory) {
         return
             string.concat(
-                "<g style='mix-blend-mode:luminosity' opacity='0.35'>",
+                "<g opacity='0.15'>",
                 "<ellipse cx='150' cy='112' rx='11' ry='10' fill='black'/>",
                 "<ellipse cx='50' cy='112' rx='11' ry='10' fill='black'/>",
                 "</g>"

diff --git a/src/libraries/Face.sol b/src/libraries/Face.sol
@@ -49,7 +49,11 @@ library Face {
                 Eyes.render(_seed),
                 Mouth.render(_seed),
                 Cheeks.render(_seed),
-                SVG.element("animateMotion", SVG.animateMotionAttributes(reverse, "11s", ""), Data.mpathJitterLg())
+                SVG.element(
+                    "animateMotion",
+                    SVG.animateMotionAttributes(reverse, "11s", "linear"),
+                    Data.mpathJitterLg()
+                )
             );
     }
 }
diff --git a/src/libraries/Glints.sol b/src/libraries/Glints.sol
@@ -84,7 +84,7 @@ library Glints {
                 ),
                 SVG.element(
                     "animateMotion",
-                    SVG.animateMotionAttributes(_reverse, _durationLong, ""),
+                    SVG.animateMotionAttributes(_reverse, _durationLong, "linear"),
                     Data.mpathJitterLg()
                 )
             );

diff --git a/src/libraries/Motes.sol b/src/libraries/Motes.sol
@@ -88,7 +88,11 @@ library Motes {
             SVG.element(
                 "circle",
                 SVG.circleAttributes(_radius, _coords, "white", _opacity, "lighten", ""),
-                SVG.element("animateMotion", SVG.animateMotionAttributes(_reverse, _dur, ""), Data.mpathJitterSm())
+                SVG.element(
+                    "animateMotion",
+                    SVG.animateMotionAttributes(_reverse, _dur, "linear"),
+                    Data.mpathJitterSm()
+                )
             );
     }
 

diff --git a/src/libraries/SVG.sol b/src/libraries/SVG.sol
@@ -160,14 +160,18 @@ library SVG {
         string memory _dur,
         string memory _calcMode
     ) internal pure returns (string memory) {
-        string memory reverse = _reverse ? "keyPoints='1;0' keyTimes='0;1'" : "";
+        string memory reverse = _reverse ? "keyPoints='1;0' keyTimes='0;1'" : "keyPoints='0;1' keyTimes='0;1'";
 
-        // Firefox has issues with calcMode="linear", even thought it is the default.
-        string memory calcModeStr = bytes(_calcMode).length == 0
-            ? ""
-            : string.concat("calcMode=", Util.quote(_calcMode));
-
-        return string.concat(reverse, " ", "dur=", Util.quote(_dur), 'repeatCount="indefinite" ', calcModeStr);
+        return
+            string.concat(
+                reverse,
+                " ",
+                "dur=",
+                Util.quote(_dur),
+                'repeatCount="indefinite" ',
+                "calcMode=",
+                Util.quote(_calcMode)
+            );
     }
 
     function filterAttribute(string memory _id) internal pure returns (string memory) {