File:Catalan number-path reflection.svg

From Wikimedia Commons, the free media repository
Jump to navigation Jump to search

Original file (SVG file, nominally 46 × 64 pixels, file size: 1 KB)

Captions

Captions

Add a one-line explanation of what this file represents

Summary

[edit]
Description
English: Reflection-based proof of Catalan numbers Catalan number#Second proof
Date
Source Own work
Author Javalenok

Source code

[edit]
<html>
  <svg width="46" height="64" xmlns="http://www.w3.org/2000/svg">
  
  <defs>
          
    <pattern id="grid" width="8" height="8" patternUnits="userSpaceOnUse">
     <path d="M 0 0 V 8 H 8" fill="none" stroke="lightgray" stroke-width="0.5"></path>
    </pattern>
	<g id="canvas">
	  <rect width="46" height="53" fill="url(#grid)" />
	  <path d="M 0,0 L 64,64" stroke="black" stroke-width="0.3"></path>
	  <path d="M 0,8 L 80, 88" stroke="red" stroke-width="0.3"></path>
	  <path id="path0" d="M 0,0 h8 v16" stroke="black" stroke-width=".9" fill="none">
	  </path>
	  <g stroke="black" stroke-width=".9" fill="none">
	  <path id="path1" d="M 8,16 ">
		<animate id="first" attributeType="CSS" attributeName="stroke" 
           begin="0s;second.end+1s" from="black" to="rgba(230,230,230,1)" dur="200ms" fill = "freeze" />
		<animate id="second" attributeType="CSS" attributeName="stroke" 
           begin="first.end+1s" from="rgba(230,230,230,1)" to="black" dur="200ms" fill = "freeze" />
	  </path></g>
	  <path id="path2" d="M 8,16" stroke="black" stroke-width=".9" fill="none">
		<animate attributeType="CSS" attributeName="stroke" 
           begin="first.begin" from="rgba(230,230,230,1)" to="black" dur="200ms" fill = "freeze" />
		<animate id="second" attributeType="CSS" attributeName="stroke" 
           begin="second.begin" from="black" to="rgba(230,230,230,1)" dur="200ms" fill = "freeze" />
	  </path>
	</g>
  </defs>
	<use x=00 y=00 xlink:href="#canvas" transform="translate(002, 53) scale(1,-1)"/>

</svg>
	
 <textarea id="area1" rows=15 cols=50></textarea>
 
<script language="javascript">
var svgNS = "http://www.w3.org/2000/svg";
var canvas = document.querySelector("svg")
function svg(name, props) {
var element = document.createElementNS(svgNS, name); //to create a circle, for rectangle use rectangle
  for (key in props)
        if(key=="xlink:href"){
                element.setAttributeNS('http://www.w3.org/1999/xlink', 'href', props[key]);
        }else{
                element.setAttribute(key, props[key]);
    }
  //alert(element.outerHTML)
  return canvas.appendChild(element);
}
function arrow(x, y, angle) {
        var transform = "rotate(" + angle + ", "+ x + ", "+ y + ")"
        svg("use", {x:x, y:y, "xlink:href":"#myarrow", transform:transform})
  //alert(canvas.outerHTML)
}

var grid = document.querySelector("#grid").width.baseVal.value
var path = "hhvvvhh"
function pave(pathid) {
		if (pathid == 2) path = path.replace(/h/g,1).replace(/v/g, 'h').replace(/1/g, 'v')
		var svgpath = document.querySelector("#path" + pathid)
		var d = svgpath.getAttribute("d")
        for (var i = 0; i != path.length ;i++) {
				d += " " + path[i] + grid
        }
		
		//arrowhead
		if (path[path.length-1] == 'v') 
			d += " l -1.5,-1.5,3,0,-1.5,1.5"
		else
			d += " l -1.5,1.5,0,-3,1.5,1.5"
		svgpath.setAttribute("d", d)
}
pave(1)
pave(2)

document.querySelector("#area1").value = canvas.outerHTML

</script>

</body></html>

Javascript updates SVG canvas on page load and exposes resulting file in textarea. In the second edition I actually highlighted the path flipping with animation but it seems does not play in Wikipedia.

Licensing

[edit]
I, the copyright holder of this work, hereby publish it under the following license:
w:en:Creative Commons
attribution share alike
This file is licensed under the Creative Commons Attribution-Share Alike 4.0 International license.
You are free:
  • to share – to copy, distribute and transmit the work
  • to remix – to adapt the work
Under the following conditions:
  • attribution – You must give appropriate credit, provide a link to the license, and indicate if changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use.
  • share alike – If you remix, transform, or build upon the material, you must distribute your contributions under the same or compatible license as the original.

File history

Click on a date/time to view the file as it appeared at that time.

Date/TimeThumbnailDimensionsUserComment
current10:52, 18 January 2015Thumbnail for version as of 10:52, 18 January 201546 × 64 (1 KB)Javalenok (talk | contribs)Highlight flipped sections without animation
10:17, 18 January 2015Thumbnail for version as of 10:17, 18 January 201546 × 64 (2 KB)Javalenok (talk | contribs)Highlight path flipping
08:50, 7 January 2015Thumbnail for version as of 08:50, 7 January 2015512 × 512 (3 KB)Javalenok (talk | contribs)User created page with UploadWizard

You cannot overwrite this file.

There are no pages that use this file.

File usage on other wikis

The following other wikis use this file:

Metadata

This file contains additional information such as Exif metadata which may have been added by the digital camera, scanner, or software program used to create or digitize it. If the file has been modified from its original state, some details such as the timestamp may not fully reflect those of the original file. The timestamp is only as accurate as the clock in the camera, and it may be completely wrong.

Retrieved from "https://commons.wikimedia.org/w/index.php?title=File:Catalan_number-path_reflection.svg&oldid=851145026"