Penrose Triangle

The famous "Penrose Triangle" as an interactive SVG application. To begin, click on the cyan "Click" button. This will display the main screen, but you might have to scroll down to see all of it.

The "controls" are on the left and the Penrose Triangle is on the right.

The Controls:

• Thk: - spinner, controls the thickness of the triangle in pixels
• Hgt: - spinner, controls the height of the triangle in pixels. If you move this above 370, you will probably lose some of the graphic. This is not a problem in the stand-alone version, but then you don't get all this wonderful verbiage.
• Display - button, displays in a dialog, the SVG code needed to recreate this triangle. Cut and paste the SVG code into a file (file type should be ".svg"), and open it in a browser. You might end up with something like this:

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="400" y="50" height="350" width="350" fill="#00ffff"/>
  <path stroke="black" fill="#99ff66" d="M 423.44555433772325 376.905989232415 L 423.44555433772325 73.09401076758503 666.5544456622767 213.4529946162075 646.5544456622767 225 443.44555433772325 107.73502691896259 443.44555433772325 388.4529946162075 423.44555433772325 376.905989232415"/>
  <path stroke="black" fill="#9999ff" d="M 443.44555433772325 61.547005383792516 L 706.5544456622767 213.4529946162075 463.44555433772325 353.8119784648299 463.44555433772325 330.7179676972449 666.5544456622767 213.4529946162075 423.44555433772325 73.09401076758503 443.44555433772325 61.547005383792516"/>
  <path stroke="black" fill="#ffcc99" d="M 706.5544456622767 236.5470053837925 L 443.44555433772325 388.4529946162075 443.44555433772325 107.73502691896259 463.44555433772325 119.28203230275511 463.44555433772325 353.8119784648299 706.5544456622767 213.4529946162075 706.5544456622767 236.5470053837925"/>
  </svg>
  

  Here is a link to a file made in this way. This procedure can be used to "capture" in SVG form, the triangle with whatever changes you have made to it. Why you would want to do such a thing is entirely beyond me, but feel free to play.
• Bkg: - color chooser, controls the color of the background. Three spinners, Red, Green, Blue, each with a range of 0-255.
• LT: - color chooser, controls the color of the Left/Top part of the triangle. Three spinners, Red, Green, Blue, each with a range of 0-255.
• TB: - color chooser, controls the color of the Top/Bottom part of the triangle. Three spinners, Red, Green, Blue, each with a range of 0-255.
• BL: - color chooser, controls the color of the Bottom/Left part of the triangle. Three spinners, Red, Green, Blue, each with a range of 0-255.

This line is after the "embedded" SVG application.