diff --git a/src/draw/GatePainting.js b/src/draw/GatePainting.js
index 402280ce..91bd5b82 100644
--- a/src/draw/GatePainting.js
+++ b/src/draw/GatePainting.js
@@ -360,9 +360,10 @@ GatePainting.MATRIX_DRAWER = args => {
  * @param {!number=} xScale
  * @param {!number=} yScale
  * @param {!number=} tScale
+ * @param {!number=} zeroAngle
  * @returns {!function(!GateDrawParams) : *}
  */
-GatePainting.makeCycleDrawer = (xScale=1, yScale=1, tScale=1) => args => {
+GatePainting.makeCycleDrawer = (xScale=1, yScale=1, tScale=1, zeroAngle=0) => args => {
     GatePainting.MAKE_HIGHLIGHTED_DRAWER(Config.TIME_DEPENDENT_HIGHLIGHT_COLOR)(args);
 
     if (args.isInToolbox && !args.isHighlighted) {
@@ -377,6 +378,7 @@ GatePainting.makeCycleDrawer = (xScale=1, yScale=1, tScale=1) => args => {
 
     args.painter.ctx.translate(c.x, c.y);
     args.painter.ctx.scale(-xScale, -yScale);
+    args.painter.ctx.rotate(zeroAngle);
     args.painter.ctx.strokeStyle = 'black';
     args.painter.ctx.fillStyle = 'yellow';
     args.painter.ctx.globalAlpha *= 0.4;
diff --git a/src/gates/PhaseGradientGates.js b/src/gates/PhaseGradientGates.js
index 80abfc1f..26d1df3b 100644
--- a/src/gates/PhaseGradientGates.js
+++ b/src/gates/PhaseGradientGates.js
@@ -18,6 +18,8 @@ import {GatePainting} from "src/draw/GatePainting.js"
 import {ketArgs, ketShaderPhase} from "src/circuit/KetShaderUtil.js"
 import {MUL_STEP} from "src/gates/MultiplyAccumulateGates.js"
 import {WglArg} from "src/webgl/WglArg.js"
+import {Matrix} from "src/math/Matrix.js";
+import {Complex} from "src/math/Complex.js";
 
 const PHASE_GRADIENT_SHADER = ketShaderPhase(
     `
@@ -70,8 +72,11 @@ PhaseGradientGates.DynamicPhaseGradientFamily = Gate.buildFamily(1, 16, (span, b
     setActualEffectToShaderProvider(ctx => PHASE_GRADIENT_SHADER.withArgs(
         ...ketArgs(ctx, span),
         WglArg.float("factor", ctx.time * Math.PI * 2))).
+    setEffectToTimeVaryingMatrix(t => Matrix.generateDiagonal(
+        1 << span,
+        k => Complex.polar(1, t * 2 * Math.PI * k))).
     promiseEffectOnlyPhases().
-    setDrawer(GatePainting.makeCycleDrawer(-1, -1)));
+    setDrawer(GatePainting.makeCycleDrawer(-1, -1, 1, -Math.PI / 2)));
 
 PhaseGradientGates.DynamicPhaseDegradientFamily = Gate.buildFamily(1, 16, (span, builder) => builder.
     setSerializedId("grad^-t" + span).
@@ -81,8 +86,11 @@ PhaseGradientGates.DynamicPhaseDegradientFamily = Gate.buildFamily(1, 16, (span,
     setActualEffectToShaderProvider(ctx => PHASE_GRADIENT_SHADER.withArgs(
         ...ketArgs(ctx, span),
         WglArg.float("factor", -ctx.time * Math.PI * 2))).
+    setEffectToTimeVaryingMatrix(t => Matrix.generateDiagonal(
+        1 << span,
+        k => Complex.polar(1, t * 2 * Math.PI * -k))).
     promiseEffectOnlyPhases().
-    setDrawer(GatePainting.makeCycleDrawer(1, -1)));
+    setDrawer(GatePainting.makeCycleDrawer(1, -1, 1, Math.PI / 2)));
 
 PhaseGradientGates.all = [
     ...PhaseGradientGates.PhaseGradientFamily.all,