Skip to content

Opus Rotates Shapes

SVG animations

Asa
Feb 6, 20261 min read

he cubes in my previous entry were written by Opus 4.5, with the initial prompt followed up by a bit of style tweaking for the colors, and then two variants with different rotation axes.

Can you figure out how to create an animated rotating 3D wireframe cube using only SVG with SMIL animations? Think carefully about the math, it will need to be accurately depicted. Use any tools you need to before creating it.

Here's Opus 4.6's one-shot take on the same prompt:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <rect width="400" height="400" fill="#0a0a1a" rx="12"/>
  <defs>
    <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur stdDeviation="2" result="blur"/>
      <feMerge>
        <feMergeNode in="blur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
    <linearGradient id="edgeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#00e5ff"/>
      <stop offset="100%" stop-color="#aa66ff"/>
    </linearGradient>
  </defs>
  <line x1="63.8" y1="134.12" x2="336.2" y2="134.12" stroke="url(#edgeGrad)" stroke-width="2" stroke-linecap="round" filter="url(#glow)">
    <animate attributeName="x1" values="63.8;56.63;50.19;44.48;39.5;35.24;31.68;28.81;26.6;25.02;24.05;23.65;23.81;24.49;25.66;27.29;29.34;31.8;34.63;37.81;41.31;45.11;49.18;53.5;58.05;62.82;67.78;72.92;78.22;83.67;89.26;94.96;100.78;106.7;112.7;118.79;124.95;131.18;137.46;143.79;150.17;156.58;163.03;169.5;175.99;182.5;189.03;195.56;202.09;208.63;215.15;221.67;228.17;234.65;241.11;247.53;253.92;260.27;266.57;272.82;279.0;285.12;291.15;297.1;302.96;308.71;314.34;319.84;325.19;330.39;335.42;340.26;344.89;349.3;353.46;357.36;360.97;364.26;367.22;369.82;372.02;373.81;375.14;376.0;376.35;376.16;375.4;374.04;372.06;369.43;366.12;362.11;357.39;351.95;345.77;338.86;331.22;322.88;313.83;304.13;293.8;282.89;271.46;259.57;247.28;234.68;221.85;208.86;195.82;182.81;169.91;157.21;144.81;132.76;121.16;110.06;99.51;89.58;80.29;71.69;63.8" keyTimes="0.0000;0.0083;0.0167;0.0250;0.0333;0.0417;0.0500;0.0583;0.0667;0.0750;0.0833;0.0917;0.1000;0.1083;0.1167;0.1250;0.1333;0.1417;0.1500;0.1583;0.1667;0.1750;0.1833;0.1917;0.2000;0.2083;0.2167;0.2250;0.2333;0.2417;0.2500;0.2583;0.2667;0.2750;0.2833;0.2917;0.3000;0.3083;0.3167;0.3250;0.3333;0.3417;0.3500;0.3583;0.3667;0.3750;0.3833;0.3917;0.4000;0.4083;0.4167;0.4250;0.4333;0.4417;0.4500;0.4583;0.4667;0.4750;0.4833;0.4917;0.5000;0.5083;0.5167;0.5250;0.5333;0.5417;0.5500;0.5583;0.5667;0.5750;0.5833;0.5917;0.6000;0.6083;0.6167;0.6250;0.6333;0.6417;0.6500;0.6583;0.6667;0.6750;0.6833;0.6917;0.7000;0.7083;0.7167;0.7250;0.7333;0.7417;0.7500;0.7583;0.7667;0.7750;0.7833;0.7917;0.8000;0.8083;0.8167;0.8250;0.8333;0.8417;0.8500;0.8583;0.8667;0.8750;0.8833;0.8917;0.9000;0.9083;0.9167;0.9250;0.9333;0.9417;0.9500;0.9583;0.9667;0.9750;0.9833;0.9917;1" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="y1" values="134.12;135.08;136.07;137.08;138.12;139.16;140.21;141.27;142.32;143.36;144.39;145.41;146.41;147.39;148.34;149.27;150.18;151.05;151.9;152.72;153.51;154.26;154.99;155.68;156.35;156.98;157.58;158.16;158.7;159.21;159.69;160.15;160.57;160.96;161.33;161.67;161.98;162.27;162.53;162.76;162.97;163.15;163.3;163.43;163.54;163.61;163.67;163.7;163.7;163.68;163.64;163.57;163.47;163.35;163.21;163.03;162.84;162.61;162.37;162.09;161.79;161.46;161.1;160.71;160.3;159.86;159.39;158.89;158.36;157.79;157.2;156.58;155.93;155.24;154.53;153.78;153.0;152.2;151.36;150.49;149.6;148.68;147.73;146.76;145.77;144.76;143.73;142.69;141.65;140.59;139.54;138.49;137.45;136.43;135.43;134.46;133.53;132.64;131.8;131.01;130.29;129.65;129.07;128.59;128.19;127.88;127.66;127.55;127.53;127.61;127.79;128.06;128.43;128.89;129.43;130.05;130.75;131.51;132.33;133.2;134.12" keyTimes="0.0000;0.0083;0.0167;0.0250;0.0333;0.0417;0.0500;0.0583;0.0667;0.0750;0.0833;0.0917;0.1000;0.1083;0.1167;0.1250;0.1333;0.1417;0.1500;0.1583;0.1667;0.1750;0.1833;0.1917;0.2000;0.2083;0.2167;0.2250;0.2333;0.2417;0.2500;0.2583;0.2667;0.2750;0.2833;0.2917;0.3000;0.3083;0.3167;0.3250;0.3333;0.3417;0.3500;0.3583;0.3667;0.3750;0.3833;0.3917;0.4000;0.4083;0.4167;0.4250;0.4333;0.4417;0.4500;0.4583;0.4667;0.4750;0.4833;0.4917;0.5000;0.5083;0.5167;0.5250;0.5333;0.5417;0.5500;0.5583;0.5667;0.5750;0.5833;0.5917;0.6000;0.6083;0.6167;0.6250;0.6333;0.6417;0.6500;0.6583;0.6667;0.6750;0.6833;0.6917;0.7000;0.7083;0.7167;0.7250;0.7333;0.7417;0.7500;0.7583;0.7667;0.7750;0.7833;0.7917;0.8000;0.8083;0.8167;0.8250;0.8333;0.8417;0.8500;0.8583;0.8667;0.8750;0.8833;0.8917;0.9000;0.9083;0.9167;0.9250;0.9333;0.9417;0.9500;0.9583;0.9667;0.9750;0.9833;0.9917;1" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="x2" values="336.2;328.31;319.71;310.42;300.49;289.94;278.84;267.24;255.19;242.79;230.09;217.19;204.18;191.14;178.15;165.32;152.72;140.43;128.54;117.11;106.2;95.87;86.17;77.12;68.78;61.14;54.23;48.05;42.61;37.89;33.88;30.57;27.94;25.96;24.6;23.84;23.65;24.0;24.86;26.19;27.98;30.18;32.78;35.74;39.03;42.64;46.54;50.7;55.11;59.74;64.58;69.61;74.81;80.16;85.66;91.29;97.04;102.9;108.85;114.88;121.0;127.18;133.43;139.73;146.08;152.47;158.89;165.35;171.83;178.33;184.85;191.37;197.91;204.44;210.97;217.5;224.01;230.5;236.97;243.42;249.83;256.21;262.54;268.82;275.05;281.21;287.3;293.3;299.22;305.04;310.74;316.33;321.78;327.08;332.22;337.18;341.95;346.5;350.82;354.89;358.69;362.19;365.37;368.2;370.66;372.71;374.34;375.51;376.19;376.35;375.95;374.98;373.4;371.19;368.32;364.76;360.5;355.52;349.81;343.37;336.2" keyTimes="0.0000;0.0083;0.0167;0.0250;0.0333;0.0417;0.0500;0.0583;0.0667;0.0750;0.0833;0.0917;0.1000;0.1083;0.1167;0.1250;0.1333;0.1417;0.1500;0.1583;0.1667;0.1750;0.1833;0.1917;0.2000;0.2083;0.2167;0.2250;0.2333;0.2417;0.2500;0.2583;0.2667;0.2750;0.2833;0.2917;0.3000;0.3083;0.3167;0.3250;0.3333;0.3417;0.3500;0.3583;0.3667;0.3750;0.3833;0.3917;0.4000;0.4083;0.4167;0.4250;0.4333;0.4417;0.4500;0.4583;0.4667;0.4750;0.4833;0.4917;0.5000;0.5083;0.5167;0.5250;0.5333;0.5417;0.5500;0.5583;0.5667;0.5750;0.5833;0.5917;0.6000;0.6083;0.6167;0.6250;0.6333;0.6417;0.6500;0.6583;0.6667;0.6750;0.6833;0.6917;0.7000;0.7083;0.7167;0.7250;0.7333;0.7417;0.7500;0.7583;0.7667;0.7750;0.7833;0.7917;0.8000;0.8083;0.8167;0.8250;0.8333;0.8417;0.8500;0.8583;0.8667;0.8750;0.8833;0.8917;0.9000;0.9083;0.9167;0.9250;0.9333;0.9417;0.9500;0.9583;0.9667;0.9750;0.9833;0.9917;1" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="y2" values="134.12;133.2;132.33;131.51;130.75;130.05;129.43;128.89;128.43;128.06;127.79;127.61;127.53;127.55;127.66;127.88;128.19;128.59;129.07;129.65;130.29;131.01;131.8;132.64;133.53;134.46;135.43;136.43;137.45;138.49;139.54;140.59;141.65;142.69;143.73;144.76;145.77;146.76;147.73;148.68;149.6;150.49;151.36;152.2;153.0;153.78;154.53;155.24;155.93;156.58;157.2;157.79;158.36;158.89;159.39;159.86;160.3;160.71;161.1;161.46;161.79;162.09;162.37;162.61;162.84;163.03;163.21;163.35;163.47;163.57;163.64;163.68;163.7;163.7;163.67;163.61;163.54;163.43;163.3;163.15;162.97;162.76;162.53;162.27;161.98;161.67;161.33;160.96;160.57;160.15;159.69;159.21;158.7;158.16;157.58;156.98;156.35;155.68;154.99;154.26;153.51;152.72;151.9;151.05;150.18;149.27;148.34;147.39;146.41;145.41;144.39;143.36;142.32;141.27;140.21;139.16;138.12;137.08;136.07;135.08;134.12" keyTimes="0.0000;0.0083;0.0167;0.0250;0.0333;0.0417;0.0500;0.0583;0.0667;0.0750;0.0833;0.0917;0.1000;0.1083;0.1167;0.1250;0.1333;0.1417;0.1500;0.1583;0.1667;0.1750;0.1833;0.1917;0.2000;0.2083;0.2167;0.2250;0.2333;0.2417;0.2500;0.2583;0.2667;0.2750;0.2833;0.2917;0.3000;0.3083;0.3167;0.3250;0.3333;0.3417;0.3500;0.3583;0.3667;0.3750;0.3833;0.3917;0.4000;0.4083;0.4167;0.4250;0.4333;0.4417;0.4500;0.4583;0.4667;0.4750;0.4833;0.4917;0.5000;0.5083;0.5167;0.5250;0.5333;0.5417;0.5500;0.5583;0.5667;0.5750;0.5833;0.5917;0.6000;0.6083;0.6167;0.6250;0.6333;0.6417;0.6500;0.6583;0.6667;0.6750;0.6833;0.6917;0.7000;0.7083;0.7167;0.7250;0.7333;0.7417;0.7500;0.7583;0.7667;0.7750;0.7833;0.7917;0.8000;0.8083;0.8167;0.8250;0.8333;0.8417;0.8500;0.8583;0.8667;0.8750;0.8833;0.8917;0.9000;0.9083;0.9167;0.9250;0.9333;0.9417;0.9500;0.9583;0.9667;0.9750;0.9833;0.9917;1" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="stroke-opacity" values="0.960;0.960;0.958;0.956;0.953;0.950;0.945;0.939;0.933;0.926;0.919;0.910;0.901;0.891;0.880;0.869;0.857;0.845;0.832;0.819;0.805;0.791;0.776;0.761;0.746;0.730;0.714;0.699;0.682;0.666;0.650;0.634;0.618;0.601;0.586;0.570;0.554;0.539;0.524;0.509;0.495;0.481;0.468;0.455;0.443;0.431;0.420;0.409;0.399;0.390;0.381;0.374;0.367;0.361;0.355;0.350;0.347;0.344;0.342;0.340;0.340;0.340;0.342;0.344;0.347;0.350;0.355;0.361;0.367;0.374;0.381;0.390;0.399;0.409;0.420;0.431;0.443;0.455;0.468;0.481;0.495;0.509;0.524;0.539;0.554;0.570;0.586;0.601;0.618;0.634;0.650;0.666;0.682;0.699;0.714;0.730;0.746;0.761;0.776;0.791;0.805;0.819;0.832;0.845;0.857;0.869;0.880;0.891;0.901;0.910;0.919;0.926;0.933;0.939;0.945;0.950;0.953;0.956;0.958;0.960;0.960" keyTimes="0.0000;0.0083;0.0167;0.0250;0.0333;0.0417;0.0500;0.0583;0.0667;0.0750;0.0833;0.0917;0.1000;0.1083;0.1167;0.1250;0.1333;0.1417;0.1500;0.1583;0.1667;0.1750;0.1833;0.1917;0.2000;0.2083;0.2167;0.2250;0.2333;0.2417;0.2500;0.2583;0.2667;0.2750;0.2833;0.2917;0.3000;0.3083;0.3167;0.3250;0.3333;0.3417;0.3500;0.3583;0.3667;0.3750;0.3833;0.3917;0.4000;0.4083;0.4167;0.4250;0.4333;0.4417;0.4500;0.4583;0.4667;0.4750;0.4833;0.4917;0.5000;0.5083;0.5167;0.5250;0.5333;0.5417;0.5500;0.5583;0.5667;0.5750;0.5833;0.5917;0.6000;0.6083;0.6167;0.6250;0.6333;0.6417;0.6500;0.6583;0.6667;0.6750;0.6833;0.6917;0.7000;0.7083;0.7167;0.7250;0.7333;0.7417;0.7500;0.7583;0.7667;0.7750;0.7833;0.7917;0.8000;0.8083;0.8167;0.8250;0.8333;0.8417;0.8500;0.8583;0.8667;0.8750;0.8833;0.8917;0.9000;0.9083;0.9167;0.9250;0.9333;0.9417;0.9500;0.9583;0.9667;0.9750;0.9833;0.9917;1" dur="8s" repeatCount="indefinite"/>
    <animate attributeName="stroke-width" values="2.90;2.90;2.89;2.89;2.88;2.87;2.86;2.84;2.8

Did you enjoy this article?

Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.

Across the AtmosphereDiscussions