Added ability for custom functions

Author: LeaVerou

css-backgrounds/spread-radius.html

@@ -59,13 +59,19 @@ <h1>box-shadow spread rounding</h1>
 
 	<label>
 		Algorithm:
-		<select id="algorithm" size="4">
+		<select id="algorithm" size="6">
 			<option value="old">Old</option>
 			<option value="arc">Arc</option>
 			<option value="hyp">Hyperbolic</option>
 			<option value="cubic" selected>Cubic</option>
+			<option value="linear">Linear</option>
+			<option value="custom">Custom</option>
 		</select>
 	</label>
+	
+	<label>f(x) = 
+		<input id="custom" value="x < 1? 1-(x-1)*(x-1) : 1" />
+	</label>
 </form>
 
 <div class="box">
@@ -134,6 +140,19 @@ <h1>box-shadow spread rounding</h1>
 
 	cubic: function(x) {
 		return x < 1? 1 + Math.pow(x-1, 3) : 1;
+	},
+	
+	linear: function(x) {
+		return x < 1? x : 1;
+	},
+	
+	custom: function (x) {
+		try {
+			return eval(custom.value);
+		} catch(e) {
+			console.log(e);
+			return 0;
+		}
 	}
 };
 
@@ -172,11 +191,15 @@ <h1>box-shadow spread rounding</h1>
 algorithm.onchange = function () {
 	Box.ratio = Box.ratios[this.value];
 
+	custom.parentNode.style.visibility = this.value == 'custom'? '' : 'hidden';
+	
 	Box.redrawAll();
 };
 
 algorithm.onchange();
 
+custom.oninput = Box.redrawAll;
+
 //constant.oninput = function() {
 //	Box.constant = +this.value;
 //