Skip to content

Commit

Permalink
refactor(examples): minor updates shape test
Browse files Browse the repository at this point in the history
  • Loading branch information
postspectacular committed Sep 12, 2018
1 parent 9873539 commit 5a3c314
Showing 1 changed file with 14 additions and 13 deletions.
27 changes: 14 additions & 13 deletions examples/hdom-canvas-shapes/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,32 +58,33 @@ const TESTS = {
stroke: "#00f",
align: "center",
baseLine: "middle",
font: "48px Menlo"
font: "48px Menlo",
__normalize: false
},
...map((i) => ["rect", {}, [i, i], 300 - 2 * i, 300 - 2 * i, r], range(10, 50, 5)),
["text", {},
[150, 150], Math.round(r)]
["text", {}, [150, 150], Math.round(r)]
];
},

"linear gradient":
() =>
["g", {},
["linearGradient", { id: "grad1", from: [0, 0], to: [300, 300] }, [0, "#fc0"], [1, "#0ef"]],
["linearGradient", { id: "grad2", from: [0, 0], to: [300, 0] }, [0, "#700"], [0.5, "#d0f"], [1, "#fff"]],
["circle", { fill: "$grad1" }, [150, 150], 140],
["rect", { fill: "$grad2" }, [0, 250], 300, 50]
],
() => [
["linearGradient", { id: "grad1", from: [0, 0], to: [300, 300] }, [0, "#fc0"], [1, "#0ef"]],
["linearGradient", { id: "grad2", from: [0, 0], to: [300, 0] }, [0, "#700"], [0.5, "#d0f"], [1, "#fff"]],
["circle", { fill: "$grad1" }, [150, 150], 140],
["rect", { fill: "$grad2" }, [0, 250], 300, 50]
],

"radial gradient":
() => {
const t = Date.now() * 0.01;
const x = 50 * Math.sin(t * 0.5);
const y = 20 * Math.sin(t * 0.3);
const spos = [110, 120];
return ["g", {},
["radialGradient", { id: "bg", from: [150 + x, 280], to: [150, 300], r1: 300, r2: 100 }, [1, "#af0"], [0.8, "#efe"], [0.5, "#0ef"], [0, "#07f"]],
["radialGradient", { id: "sun", from: spos, to: spos, r1: 5, r2: 50 }, [0, "#fff"], [1, "rgba(255,255,192,0)"]],
return [
["radialGradient", { id: "bg", from: [150 + x, 280], to: [150, 300], r1: 300, r2: 100 },
[0, "#07f"], [0.5, "#0ef"], [0.8, "#efe"], [1, "#af0"]],
["radialGradient", { id: "sun", from: spos, to: spos, r1: 5, r2: 50 },
[0, "#fff"], [1, "rgba(255,255,192,0)"]],
["circle", { fill: "$bg" }, [150, 150 + y], 130],
["circle", { fill: "$sun" }, spos, 50],
];
Expand Down

0 comments on commit 5a3c314

Please sign in to comment.