Jump to content

File:Catalan number-path reflection.svg

Page contents not supported in other languages.
This is a file from the Wikimedia Commons
From Wikipedia, the free encyclopedia

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

Summary

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

Source code

<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

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.

Captions

Add a one-line explanation of what this file represents

Items portrayed in this file

depicts

7 January 2015

image/svg+xml

b0ef49346f6f1909de3cb74524a672f2e8220735

1,036 byte

64 pixel

46 pixel

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)JavalenokHighlight flipped sections without animation
10:17, 18 January 2015Thumbnail for version as of 10:17, 18 January 201546 × 64 (2 KB)JavalenokHighlight path flipping
08:50, 7 January 2015Thumbnail for version as of 08:50, 7 January 2015512 × 512 (3 KB)JavalenokUser created page with UploadWizard

The following 2 pages use this file:

Global file usage

The following other wikis use this file:

Metadata