nowherenearithaca/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A simple example illustrating the css paint-order property.

  
## index.html
<!DOCTYPE html>
	<meta charset="utf-8">

<head>

	<style>
		body {
			font-family: "Helvetica Neue", Helvetica, sans-serif;
			font-size: 16px;
		  position: relative;
		}

		.info {
			margin-top: 1em;
			margin-left: 1em;
		}

		.cite-info {
			margin-top: 0.5em;
		}

		.property-title {
			margin-top: 0.5em;
		}
		form {
			margin-left: 1em;
		}
		.swan {
			fill:black;
			stroke: red;
			stroke-width: 60px; /*we're scaling, so needs to be larger */
		}

	</style>
</head>

<body>

	<div class="info">
		<div class="main-info">This little example demonstrates the effect of the
			<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order">paint-order</a> css property
				for an svg <i>path</i> element.  This property can be used to get a nicer border, as it can
				tell the browser to first draw the stroke, and then do the fill.  The default value of "fill" causes
				the browser to do the fill first and then the stroke, which can lead to suboptimal results.
		</div>
		<div class="cite-info">The svg for the swan is by <a href="https://pixabay.com/en/swan-bird-animal-aquatic-water-1237243/">Gordon Johnson</a>.</div>


		<div class="property-title">Value for "paint-order" property:</div>
		<form>

		  <input type="radio" name="paint-order" value="fill" id="paint-order-fill">
		  <label for="paint-order-fill">Fill (default if not specified)</label><br>
		  <input type="radio" name="paint-order"  value="stroke" id="paint-order-stroke">
		  <label for="paint-order-stroke">Stroke</label><br>
		</form>
	</div>


	<script src="//d3js.org/d3.v4.min.js"></script>

	<script>

		var width = 960,
		    height = 600;

		//swan svg
		//  https://pixabay.com/en/swan-bird-animal-aquatic-water-1237243/
		//  public domain
		//<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
		//	 viewBox="0 0 2270 1720.1041" enable-background="new 0 0 2270 1720.1041" xml:space="preserve">
		var g_SwanPath = 'M304.8339,1618.0433c-34.8443-45.5265-24.218-162.9536,13.3191-294.7738c1.2148-4.2662,2.8029-8.4308,4.67-12.4546' +
											'c29.7564-64.1257,52.3294-129.1842,67.4734-195.2076c51.5251-161.5287,94.3274-320.8143,127.5042-477.6243' +
											'c6.308-24.2145,10.9305-46.0526,13.0299-64.3335c1.5645-13.6223,5.0762-26.863,9.1556-39.9539' +
											'c0.7114-2.2827,1.0774-4.7339,1.0754-7.365c2.9453-15.8967,3.6573-31.5959,2.1908-47.1029' +
											'c-0.9938-10.5073-0.4436-21.0928,0.9762-31.5511c2.46-18.12,1.7054-36.9332-3.167-40.7521' +
											'c-3.8127-5.7191-8.5802-13.6949-12.8798-21.1176c-7.2252-12.4735-11.3275-26.5457-11.7297-40.9551' +
											'c-0.1105-3.9579-0.3208-7.735-0.7592-11.2041c-0.7616-6.0274-5.9535-10.481-12.0236-10.2287' +
											'c-14.4256,0.5998-29.718-1.3261-45.5717-4.886c-45.9689-10.5904-130.0027,0-141.3747,3.1014' +
											'c-66.9441,27.7135-138.7008,51.8138-214.2594,73.0598c-3.0797,0.866-5.8099,2.6716-7.8351,5.1481' +
											'c-2.5822,3.1576-6.266,7.2096-8.4471,7.5991c-3.6184,0.6461-5.686-5.686-5.686-5.686c-1.6334-9.8945-1.6764-19.3877-0.0309-28.4546' +
											'c0.7585-4.1798,2.8682-7.9965,6.0087-10.8573l29.3922-26.7746c3.9683-3.6149,8.3697-6.7393,13.1441-9.193' +
											'c46.4728-23.8836,81.7318-52.6664,102.3964-87.8247c1.7236-2.9325,0.9662-6.7585-1.8496-8.6667' +
											'c-22.5259-15.2652-23.9696-36.1549-10.6995-60.9698c0.9986-1.8674,2.3123-3.5486,3.8485-5.0061' +
											'c83.5539-79.279,244.0396-129.4157,340.5836-90.4908c103.5163,43.4262,161.534,108.7088,171.7593,214.2847' +
											'c0.1364,1.4075,0.4255,2.7938,0.8593,4.1397c50.3245,156.123-38.8171,527.5426-82.9946,879.9554' +
											'c-0.2051,1.6364,1.875,2.4932,2.9058,1.2058c193.9075-242.155,395.4191-404.4522,607.8033-452.565' +
											'c1.0865-0.2462,2.1687-0.5388,3.2316-0.8726c45.7448-14.3669,86.4229-20.8707,115.0131-8.6146' +
											'c2.942,1.2612,6.2184,1.3896,9.2697,0.4223c16.3136-5.1722,32.8452-8.0765,49.6045-8.6195' +
											'c4.9473-0.1603,9.7422-1.8657,13.693-4.8477c10.2054-7.703,17.7822-19.0728,39.0336-17.6369' +
											'c19.1256,1.2923,83.4808,52.9832,109.8433,74.7796c10.8676,1.3658,25.2313,0.9236,36.6232,4.0772' +
											'c9.9805,2.7628,20.5455,1.618,29.9357-2.7487c37.4032-17.3939,89.8586-18.1865,160.192,0.7391' +
											'c26.6881-1.7002,52.0995,0.2357,76.0198,6.4196c4.3241,1.1179,7.1786,5.2768,6.6101,9.7066' +
											'c-0.9686,7.5479-4.4778,14.5042-9.5732,21.0914c43.976,13.0238,79.6447,32.1691,95.6282,65.8198' +
											'c24.3445,7.963,39.4833,22.6735,37.2175,50.1402c21.144,6.2525,32.1763,21.1316,21.1934,54.7924' +
											'c7.6846,7.8566,10.1323,17.4349,8.2705,28.43c40.7646-18.5149,80.4316-34.1538,118.8213-46.4468' +
											'c3.3335-1.0674,6.7344,1.5741,6.4888,5.0657c-3.259,46.3218-32.0598,94.864-70.5176,144.2461' +
											'c-22.5637,33.5153-46.5796,61.8207-72.1182,84.6649c-0.8545,0.7643-1.6309,1.5959-2.3268,2.507' +
											'c-43.4316,56.8549-85.7373,119.3354-127.1498,186.2732c-34.3597,40.0845-79.2502,64.4323-132.5186,76.2612' +
											'c-3.8629,0.8579-7.3875,2.8842-10.0603,5.8019c-52.0673,56.8378-135.7161,96.0234-236.3158,125.7345' +
											'c-247.5549,53.913-593.4451,70.9583-959.9009,80.2932C483.7126,1667.6738,322.4524,1641.0632,304.8339,1618.0433z';


		var theSwan = d3.select("body").append("svg")
						    .attr("width", width)
						    .attr("height", height)
				  			.append("g")
								.attr("viewBox","0 0 2270 1720.1041")
		    				.attr("transform","translate(180,10)scale(0.18)")
		    				.append("path")
								.classed("swan", true)
		    				.attr("d", g_SwanPath);

			d3.selectAll("input[name=paint-order]")
		    .on("change", function(thing) {
		    	theSwan.style("paint-order", this.value);
		    		});

		    //initialize
					d3.select("#paint-order-stroke").property("checked", true);
					var value = d3.select('input[name="paint-order"]:checked').property("value");
		  		theSwan.style("paint-order", value);

	</script>

</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>

	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 16px;
	position: relative;
	}

	.info {
	margin-top: 1em;
	margin-left: 1em;
	}

	.cite-info {
	margin-top: 0.5em;
	}

	.property-title {
	margin-top: 0.5em;
	}
	form {
	margin-left: 1em;
	}
	.swan {
	fill:black;
	stroke: red;
	stroke-width: 60px; /we're scaling, so needs to be larger /
	}

	</style>
	</head>

	<body>

	<div class="info">
	<div class="main-info">This little example demonstrates the effect of the
	<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order">paint-order</a> css property
	for an svg <i>path</i> element. This property can be used to get a nicer border, as it can
	tell the browser to first draw the stroke, and then do the fill. The default value of "fill" causes
	the browser to do the fill first and then the stroke, which can lead to suboptimal results.
	</div>
	<div class="cite-info">The svg for the swan is by <a href="https://pixabay.com/en/swan-bird-animal-aquatic-water-1237243/">Gordon Johnson</a>.</div>


	<div class="property-title">Value for "paint-order" property:</div>
	<form>

	<input type="radio" name="paint-order" value="fill" id="paint-order-fill">
	<label for="paint-order-fill">Fill (default if not specified)</label><br>
	<input type="radio" name="paint-order" value="stroke" id="paint-order-stroke">
	<label for="paint-order-stroke">Stroke</label><br>
	</form>
	</div>


	<script src="//d3js.org/d3.v4.min.js"></script>

	<script>

	var width = 960,
	height = 600;

	//swan svg
	// https://pixabay.com/en/swan-bird-animal-aquatic-water-1237243/
	// public domain
	//<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	// viewBox="0 0 2270 1720.1041" enable-background="new 0 0 2270 1720.1041" xml:space="preserve">
	var g_SwanPath = 'M304.8339,1618.0433c-34.8443-45.5265-24.218-162.9536,13.3191-294.7738c1.2148-4.2662,2.8029-8.4308,4.67-12.4546' +
	'c29.7564-64.1257,52.3294-129.1842,67.4734-195.2076c51.5251-161.5287,94.3274-320.8143,127.5042-477.6243' +
	'c6.308-24.2145,10.9305-46.0526,13.0299-64.3335c1.5645-13.6223,5.0762-26.863,9.1556-39.9539' +
	'c0.7114-2.2827,1.0774-4.7339,1.0754-7.365c2.9453-15.8967,3.6573-31.5959,2.1908-47.1029' +
	'c-0.9938-10.5073-0.4436-21.0928,0.9762-31.5511c2.46-18.12,1.7054-36.9332-3.167-40.7521' +
	'c-3.8127-5.7191-8.5802-13.6949-12.8798-21.1176c-7.2252-12.4735-11.3275-26.5457-11.7297-40.9551' +
	'c-0.1105-3.9579-0.3208-7.735-0.7592-11.2041c-0.7616-6.0274-5.9535-10.481-12.0236-10.2287' +
	'c-14.4256,0.5998-29.718-1.3261-45.5717-4.886c-45.9689-10.5904-130.0027,0-141.3747,3.1014' +
	'c-66.9441,27.7135-138.7008,51.8138-214.2594,73.0598c-3.0797,0.866-5.8099,2.6716-7.8351,5.1481' +
	'c-2.5822,3.1576-6.266,7.2096-8.4471,7.5991c-3.6184,0.6461-5.686-5.686-5.686-5.686c-1.6334-9.8945-1.6764-19.3877-0.0309-28.4546' +
	'c0.7585-4.1798,2.8682-7.9965,6.0087-10.8573l29.3922-26.7746c3.9683-3.6149,8.3697-6.7393,13.1441-9.193' +
	'c46.4728-23.8836,81.7318-52.6664,102.3964-87.8247c1.7236-2.9325,0.9662-6.7585-1.8496-8.6667' +
	'c-22.5259-15.2652-23.9696-36.1549-10.6995-60.9698c0.9986-1.8674,2.3123-3.5486,3.8485-5.0061' +
	'c83.5539-79.279,244.0396-129.4157,340.5836-90.4908c103.5163,43.4262,161.534,108.7088,171.7593,214.2847' +
	'c0.1364,1.4075,0.4255,2.7938,0.8593,4.1397c50.3245,156.123-38.8171,527.5426-82.9946,879.9554' +
	'c-0.2051,1.6364,1.875,2.4932,2.9058,1.2058c193.9075-242.155,395.4191-404.4522,607.8033-452.565' +
	'c1.0865-0.2462,2.1687-0.5388,3.2316-0.8726c45.7448-14.3669,86.4229-20.8707,115.0131-8.6146' +
	'c2.942,1.2612,6.2184,1.3896,9.2697,0.4223c16.3136-5.1722,32.8452-8.0765,49.6045-8.6195' +
	'c4.9473-0.1603,9.7422-1.8657,13.693-4.8477c10.2054-7.703,17.7822-19.0728,39.0336-17.6369' +
	'c19.1256,1.2923,83.4808,52.9832,109.8433,74.7796c10.8676,1.3658,25.2313,0.9236,36.6232,4.0772' +
	'c9.9805,2.7628,20.5455,1.618,29.9357-2.7487c37.4032-17.3939,89.8586-18.1865,160.192,0.7391' +
	'c26.6881-1.7002,52.0995,0.2357,76.0198,6.4196c4.3241,1.1179,7.1786,5.2768,6.6101,9.7066' +
	'c-0.9686,7.5479-4.4778,14.5042-9.5732,21.0914c43.976,13.0238,79.6447,32.1691,95.6282,65.8198' +
	'c24.3445,7.963,39.4833,22.6735,37.2175,50.1402c21.144,6.2525,32.1763,21.1316,21.1934,54.7924' +
	'c7.6846,7.8566,10.1323,17.4349,8.2705,28.43c40.7646-18.5149,80.4316-34.1538,118.8213-46.4468' +
	'c3.3335-1.0674,6.7344,1.5741,6.4888,5.0657c-3.259,46.3218-32.0598,94.864-70.5176,144.2461' +
	'c-22.5637,33.5153-46.5796,61.8207-72.1182,84.6649c-0.8545,0.7643-1.6309,1.5959-2.3268,2.507' +
	'c-43.4316,56.8549-85.7373,119.3354-127.1498,186.2732c-34.3597,40.0845-79.2502,64.4323-132.5186,76.2612' +
	'c-3.8629,0.8579-7.3875,2.8842-10.0603,5.8019c-52.0673,56.8378-135.7161,96.0234-236.3158,125.7345' +
	'c-247.5549,53.913-593.4451,70.9583-959.9009,80.2932C483.7126,1667.6738,322.4524,1641.0632,304.8339,1618.0433z';


	var theSwan = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("viewBox","0 0 2270 1720.1041")
	.attr("transform","translate(180,10)scale(0.18)")
	.append("path")
	.classed("swan", true)
	.attr("d", g_SwanPath);

	d3.selectAll("input[name=paint-order]")
	.on("change", function(thing) {
	theSwan.style("paint-order", this.value);
	});

	//initialize
	d3.select("#paint-order-stroke").property("checked", true);
	var value = d3.select('input[name="paint-order"]:checked').property("value");
	theSwan.style("paint-order", value);

	</script>

	</body>