-
Notifications
You must be signed in to change notification settings - Fork 1
/
regular-polygon-demo.html
111 lines (92 loc) · 3.42 KB
/
regular-polygon-demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<script src="regular-polygon-demo-code.js"></script>
<script>
var animationID;
function init() {
var svgElementId = "polygon-svg-root";
var shapeElementId = "polygon-shape-inside"
function animationLoop(t) {
animationID = window.requestAnimationFrame(animationLoop);
if (t == -1)
initializeAnimation(svgElementId, shapeElementId);
else {
if (updateAnimation(t, svgElementId, shapeElementId))
window.cancelAnimationFrame(animationID);
}
}
animationLoop(-1);
}
function stop() {
window.cancelAnimationFrame(animationID);
}
</script>
<style id="stylesheet">
#polygon-shape-inside, #polygon-svg-root {
position: absolute;
left: 0px;
top: 0px;
}
#polygon-shape-inside {
word-wrap: break-word;
font-family: Century Schoolbook;
font-size: x-large;
color: rgb(6, 5, 10);
}
#polygon-svg-root {
fill: rgba(233, 212, 105, 0.65);
stroke: rgba(120,76,51, 0.4);
stroke-width: 3;
-webkit-transform-origin: center;
-webkit-transform: translate(-10px) scale(1.02);
}
</style>
</head>
<body onload="init()">
<article>
<section><!-- warning placeholder --></section><div style="position: relative; font: 125% geneva;">
<img src="bats.jpg"/>
<svg id="polygon-svg-root" xmlns="http://www.w3.org/2000/svg"></svg>
<div id="polygon-shape-inside"><br/>We were somewhere around Barstow on the edge of the desert when the drugs began to take hold. I remember saying something like "I feel a bit lightheaded; maybe you should drive...". And suddenly there was a terrible roar all around us and the sky was full of what looked like huge bats, all swooping and screeching and diving around the car, which was going about a hundred miles an hour with the top down to Las Vegas. And a voice was screaming: "Holy Jesus! What are these goddamn animals?</div>
</article>
<script>
!function(){
function CSSExclusions(){}
// basic feature detection
CSSExclusions.prototype.isSupported = (function(prop){
var el = document.createElement("div"),
style = el.style;
if (!el){
return false
}
// intentional bias towards -webkit because the prototype uses
// code under prefixed notation that is still being debated in the W3C
style.setProperty("-webkit-shape-inside", "rectangle(0, 0, 100%, 100%)");
return (style.getPropertyValue("-webkit-shape-inside") != null);
})()
var CSSExclusions = new CSSExclusions()
var checkSupport = function(){
if (CSSExclusions.isSupported){
return
}
else{
var target = document.querySelector('article section')
if (target){
target.innerHTML = createWarning()
}
}
}
var createWarning = function(){
var h = [],
p = function(){ h.push.apply(h, arguments) }
p('<p class="unsupported error">')
p('<strong>Warning:</strong> You need to use the Chrome Canary browser with experimental WebKit features enabled to see this example working correctly. See <a href="../index.html#runs-in">here</a> for more info.')
p('</p>')
return h.join('')
}
document.addEventListener("DOMContentLoaded", checkSupport)
}()
</script>
</body>
</html>