Skip to content

Commit 536a2aa

Browse files
PixelsCommanderPixelsCommander
committed
Added filters with fish demo, just for fun
1 parent bf2d616 commit 536a2aa

File tree

3 files changed

+8
-8
lines changed

3 files changed

+8
-8
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Demos
4848

4949
How to use?
5050
-----------
51-
Include HTML GL into project. Use tag name ```<html-gl>``` or jQuery plugin ```$(myElement).htmlgl()``` for elements you are going to animate. These elements will be rendered in WebGL and their CSS Transform properties will be mapped to WebGL representation transformations. So DOM node itself will not be animated or displayed in order to avoid resources consuming.
51+
Include HTMLGL.js into project. Use tag name ```<html-gl>``` or jQuery plugin ```$(myElement).htmlgl()``` for elements you are going to animate. These elements will be rendered in WebGL and their CSS Transform properties will be mapped to WebGL representation transformations. So DOM node itself will not be animated or displayed in order to avoid resources consuming.
5252
HTML GL is framework agnostic and is easy to inject into existing project which needs performance tweaking.
5353

5454
License

‎figures/htmlgl-flow-diagram.ep

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<?xml version="1.0"?>
2-
<Document xmlns="http://www.evolus.vn/Namespace/Pencil"><Properties/><Pages><Page><Properties><Property name="name">Untitled Page</Property><Property name="id">1425479107853_8445</Property><Property name="width">600</Property><Property name="height">400</Property><Property name="dimBackground"/><Property name="transparentBackground">true</Property><Property name="backgroundColor">#FFFFFFFF</Property><Property name="background">transparent</Property></Properties><Content><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Flowchart:process" id="6bc98be7498aec43ae19d01c53d3fe85" transform="matrix(1,0,0,1,140,17)"><p:metadata><p:property name="box"><![CDATA[100,80]]></p:property><p:property name="outputPin1Origin"><![CDATA[50,0]]></p:property><p:property name="outputPin1"><![CDATA[50,0]]></p:property><p:property name="outputPin2Origin"><![CDATA[100,40]]></p:property><p:property name="outputPin2"><![CDATA[100,40]]></p:property><p:property name="outputPin3Origin"><![CDATA[50,80]]></p:property><p:property name="outputPin3"><![CDATA[50,80]]></p:property><p:property name="outputPin4Origin"><![CDATA[0,40]]></p:property><p:property name="outputPin4"><![CDATA[0,40]]></p:property><p:property name="fillColor"><![CDATA[#BDDFFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[Rasterization to a texture]]></p:property><p:property name="textFont"><![CDATA[Helvetica|normal|normal|12px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
2+
<Document xmlns="http://www.evolus.vn/Namespace/Pencil"><Properties/><Pages><Page><Properties><Property name="name">Untitled Page</Property><Property name="id">1425479107853_8445</Property><Property name="width">520</Property><Property name="height">350</Property><Property name="dimBackground"/><Property name="transparentBackground">true</Property><Property name="backgroundColor">#FFFFFFFF</Property><Property name="background">transparent</Property></Properties><Content><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Flowchart:process" id="6bc98be7498aec43ae19d01c53d3fe85" transform="matrix(1,0,0,1,140,17)"><p:metadata><p:property name="box"><![CDATA[100,80]]></p:property><p:property name="outputPin1Origin"><![CDATA[50,0]]></p:property><p:property name="outputPin1"><![CDATA[50,0]]></p:property><p:property name="outputPin2Origin"><![CDATA[100,40]]></p:property><p:property name="outputPin2"><![CDATA[100,40]]></p:property><p:property name="outputPin3Origin"><![CDATA[50,80]]></p:property><p:property name="outputPin3"><![CDATA[50,80]]></p:property><p:property name="outputPin4Origin"><![CDATA[0,40]]></p:property><p:property name="outputPin4"><![CDATA[0,40]]></p:property><p:property name="fillColor"><![CDATA[#BDDFFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[Rasterization to a texture]]></p:property><p:property name="textFont"><![CDATA[Helvetica|normal|normal|12px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
33
<rect style="stroke-linejoin: round; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2; fill: rgb(189, 223, 255); fill-opacity: 1;" p:name="path" id="b7bf6c694d518448841abe31de2e9c34" transform="translate(0,0)" x="0" y="0" width="100" height="80"/>
44
<text text-anchor="start" xml:space="preserve" p:name="text" id="ec257f4be1472c42b9743f7df9968e5b" style="font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1;" transform="translate(7,37)"><tspan x="1.3666648864746094" y="0">Rasterization to</tspan><tspan x="19.674999237060547" y="13">a texture</tspan></text>
55
<path style="stroke-linejoin: round; fill: none; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;" p:name="outputArrrow1" id="d09bf914c0ee8f428b4f7a9963c3e5d9" d=""/>
@@ -14,19 +14,19 @@
1414
<use xlink:href="#225d2132981f804895f2d85659755756" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="57ba1aa7b427214285363607355eb6c6" style="stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;"/>
1515
<text p:name="text" id="bc821a1e3b382a46ae253d49a748d84e" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none;">
1616
<textPath xlink:href="#225d2132981f804895f2d85659755756" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
17-
<tspan dy="-4" p:name="textSpan" id="81a7c4873989dc419392a4fb867fe723" dx="-16"></tspan>
17+
<tspan dy="-4" p:name="textSpan" id="81a7c4873989dc419392a4fb867fe723" dx="-16"/>
1818
</textPath>
1919
</text>
2020

21-
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Flowchart:Document" id="84d7162fa549874da8195fef9338a0de" transform="matrix(1,0,0,1,18,17)"><p:metadata><p:property name="box"><![CDATA[100,80]]></p:property><p:property name="outputPin1Origin"><![CDATA[50,0]]></p:property><p:property name="outputPin1"><![CDATA[50,0]]></p:property><p:property name="outputPin2Origin"><![CDATA[100,40]]></p:property><p:property name="outputPin2"><![CDATA[100,40]]></p:property><p:property name="outputPin3Origin"><![CDATA[50,80]]></p:property><p:property name="outputPin3"><![CDATA[50,80]]></p:property><p:property name="outputPin4Origin"><![CDATA[0,40]]></p:property><p:property name="outputPin4"><![CDATA[0,40]]></p:property><p:property name="fillColor"><![CDATA[#BDDFFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[<webgl> element]]></p:property><p:property name="textFont"><![CDATA[Helvetica|normal|normal|12px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
21+
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Flowchart:Document" id="84d7162fa549874da8195fef9338a0de" transform="matrix(1,0,0,1,18,17)"><p:metadata><p:property name="box"><![CDATA[100,80]]></p:property><p:property name="outputPin1Origin"><![CDATA[50,0]]></p:property><p:property name="outputPin1"><![CDATA[50,0]]></p:property><p:property name="outputPin2Origin"><![CDATA[100,40]]></p:property><p:property name="outputPin2"><![CDATA[100,40]]></p:property><p:property name="outputPin3Origin"><![CDATA[50,80]]></p:property><p:property name="outputPin3"><![CDATA[50,80]]></p:property><p:property name="outputPin4Origin"><![CDATA[0,40]]></p:property><p:property name="outputPin4"><![CDATA[0,40]]></p:property><p:property name="fillColor"><![CDATA[#BDDFFFFF]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[<html-gl> element]]></p:property><p:property name="textFont"><![CDATA[Helvetica|normal|normal|12px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
2222
<path style="stroke-linejoin: round; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2; fill: rgb(189, 223, 255); fill-opacity: 1;" p:name="path" id="8142bc7d39328140806d4bdaeab37918" transform="translate(0,0)" d="M 0 0 L 100 0 L 100 64 C 75 64 75 64 50 72 S 25 80 0 72 z"/>
2323

24-
<text text-anchor="start" xml:space="preserve" p:name="text" id="8c735c9f4e743043876988289ac61a49" style="font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1;" transform="translate(7,29)"><tspan x="20.34166717529297" y="0">&lt;webgl&gt;</tspan><tspan x="21.683332443237305" y="13">element</tspan></text>
24+
<text text-anchor="start" xml:space="preserve" p:name="text" id="8c735c9f4e743043876988289ac61a49" style="font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none; fill: rgb(0, 0, 0); fill-opacity: 1;" transform="translate(7,29)"><tspan x="18.524999618530273" y="0">&lt;html-gl&gt;</tspan><tspan x="22.183332443237305" y="12.5">element</tspan></text>
2525
<path style="stroke-linejoin: round; fill: none; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;" p:name="outputArrrow1" id="61aeb856f2f98f4d86cdba794daff2fe" d=""/>
2626
<path style="stroke-linejoin: round; fill: none; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;" p:name="outputArrrow2" id="ee48d0efc75ea34aa49ae3a969cc8beb" d=""/>
2727
<path style="stroke-linejoin: round; fill: none; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;" p:name="outputArrrow3" id="b8edc4a1d680c943a4eca7bb4ae2afad" d=""/>
2828
<path style="stroke-linejoin: round; fill: none; stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;" p:name="outputArrrow4" id="5c5771fd0d776d49bb52a6381b79703d" d=""/>
29-
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" p:sc="Straight Connector" id="f9885a72ec38a2408a8319a3868803a2" transform="matrix(1,0,0,1,267,103)"><p:metadata><p:property name="startPin" p:connectedShapeId="84d7162fa549874da8195fef9338a0de" p:connectedOutletId="middle-right" p:viax="-139" p:viay="-46"><![CDATA[-149,-46]]></p:property><p:property name="endPin" p:connectedShapeId="6bc98be7498aec43ae19d01c53d3fe85" p:connectedOutletId="middle-left" p:viax="-137" p:viay="-46"><![CDATA[-127,-46]]></p:property><p:property name="withStartArrow"><![CDATA[false]]></p:property><p:property name="withEndArrow"><![CDATA[true]]></p:property><p:property name="mode"><![CDATA[straight]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA[Helvetica|normal|normal|12px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
29+
</g><g xmlns="http://www.w3.org/2000/svg" p:type="Shape" xmlns:p="http://www.evolus.vn/Namespace/Pencil" p:def="Evolus.Common:arrow" p:sc="Straight Connector" id="f9885a72ec38a2408a8319a3868803a2" transform="matrix(1,0,0,1,267,103)"><p:metadata><p:property name="startPin" p:viay="-46" p:viax="-139" p:connectedOutletId="middle-right" p:connectedShapeId="84d7162fa549874da8195fef9338a0de"><![CDATA[-149,-46]]></p:property><p:property name="endPin" p:connectedShapeId="6bc98be7498aec43ae19d01c53d3fe85" p:connectedOutletId="middle-left" p:viax="-137" p:viay="-46"><![CDATA[-127,-46]]></p:property><p:property name="withStartArrow"><![CDATA[false]]></p:property><p:property name="withEndArrow"><![CDATA[true]]></p:property><p:property name="mode"><![CDATA[straight]]></p:property><p:property name="detached"><![CDATA[false]]></p:property><p:property name="strokeColor"><![CDATA[#666666FF]]></p:property><p:property name="strokeStyle"><![CDATA[2|]]></p:property><p:property name="textContent"><![CDATA[]]></p:property><p:property name="textFont"><![CDATA[Helvetica|normal|normal|12px|none]]></p:property><p:property name="textColor"><![CDATA[#000000FF]]></p:property><p:property name="textAlign"><![CDATA[1,1]]></p:property></p:metadata>
3030
<defs>
3131
<path style="stroke-linejoin: round; fill: none;" p:name="path" id="0bcd0909376d2e4788cf0d91e847867a" d="M -149 -46 L -137 -46 L -127 -46 M -133 -52 L -127 -46 L -133 -40"/>
3232
</defs>
@@ -71,7 +71,7 @@
7171
<use xlink:href="#6d5a3ddb73cadb40a0e3fc869a093b3d" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="5d503dfa0d11364cbbf7edc35fd57151" style="stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;"/>
7272
<text p:name="text" id="ec6be62af9dbdb49a0088e30e3345d90" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none;">
7373
<textPath xlink:href="#6d5a3ddb73cadb40a0e3fc869a093b3d" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
74-
<tspan dy="-4" p:name="textSpan" id="7c7c0a2e4deade4d9ac818550133e172" dx="-16"></tspan>
74+
<tspan dy="-4" p:name="textSpan" id="7c7c0a2e4deade4d9ac818550133e172" dx="-16"/>
7575
</textPath>
7676
</text>
7777

@@ -114,7 +114,7 @@
114114
<use xlink:href="#b8a30a2419bef249b623dbc5079d5955" xmlns:xlink="http://www.w3.org/1999/xlink" p:name="outArrow1" id="aeddab27075a9742852855504adca783" style="stroke: rgb(102, 102, 102); stroke-opacity: 1; stroke-width: 2;"/>
115115
<text p:name="text" id="36d36544f6d5064297fbdc8d4d1f4b94" style="fill: rgb(0, 0, 0); fill-opacity: 1; font-family: Helvetica; font-size: 12px; font-weight: normal; font-style: normal; text-decoration: none;">
116116
<textPath xlink:href="#b8a30a2419bef249b623dbc5079d5955" xmlns:xlink="http://www.w3.org/1999/xlink" startOffset="50%" text-anchor="middle" alignment-baseline="middle">
117-
<tspan dy="-4" p:name="textSpan" id="703badc50ad3ac418a70654bf858590b" dx="-16"></tspan>
117+
<tspan dy="-4" p:name="textSpan" id="703badc50ad3ac418a70654bf858590b" dx="-16"/>
118118
</textPath>
119119
</text>
120120

‎figures/htmlgl-flow-diagram.png

-554 Bytes
Loading

0 commit comments

Comments
 (0)