kopia lustrzana https://github.com/zhengkyl/qrframe
layers preset
Kyle Zheng
rodzic
199eb57269
commit
a463c790b7
|
|
@ -39,6 +39,12 @@ I'm working on more examples.
|
|||
<td>
|
||||
<img src="./examples/neon.svg" width="300"/>
|
||||
</td>
|
||||
<td>
|
||||
<img src="./examples/layers1.svg" width="300"/>
|
||||
</td>
|
||||
<td>
|
||||
<img src="./examples/layers2.svg" width="300"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th colspan="3">Import external libs, fetch external files, etc </th>
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 29 29"><rect x="-2" y="-2" width="29" height="29" fill="#163157"></rect><defs><path id="base" d="M0,0h1v1h-1zM1,0h1v1h-1zM2,0h1v1h-1zM3,0h1v1h-1zM4,0h1v1h-1zM5,0h1v1h-1zM6,0h1v1h-1zM13,0h1v1h-1zM14,0h1v1h-1zM16,0h1v1h-1zM18,0h1v1h-1zM19,0h1v1h-1zM20,0h1v1h-1zM21,0h1v1h-1zM22,0h1v1h-1zM23,0h1v1h-1zM24,0h1v1h-1zM0,1h1v1h-1zM6,1h1v1h-1zM9,1h1v1h-1zM12,1h1v1h-1zM15,1h1v1h-1zM16,1h1v1h-1zM18,1h1v1h-1zM24,1h1v1h-1zM0,2h1v1h-1zM2,2h1v1h-1zM3,2h1v1h-1zM4,2h1v1h-1zM6,2h1v1h-1zM8,2h1v1h-1zM9,2h1v1h-1zM10,2h1v1h-1zM14,2h1v1h-1zM18,2h1v1h-1zM20,2h1v1h-1zM21,2h1v1h-1zM22,2h1v1h-1zM24,2h1v1h-1zM0,3h1v1h-1zM2,3h1v1h-1zM3,3h1v1h-1zM4,3h1v1h-1zM6,3h1v1h-1zM8,3h1v1h-1zM9,3h1v1h-1zM13,3h1v1h-1zM14,3h1v1h-1zM18,3h1v1h-1zM20,3h1v1h-1zM21,3h1v1h-1zM22,3h1v1h-1zM24,3h1v1h-1zM0,4h1v1h-1zM2,4h1v1h-1zM3,4h1v1h-1zM4,4h1v1h-1zM6,4h1v1h-1zM8,4h1v1h-1zM10,4h1v1h-1zM11,4h1v1h-1zM13,4h1v1h-1zM16,4h1v1h-1zM18,4h1v1h-1zM20,4h1v1h-1zM21,4h1v1h-1zM22,4h1v1h-1zM24,4h1v1h-1zM0,5h1v1h-1zM6,5h1v1h-1zM8,5h1v1h-1zM10,5h1v1h-1zM14,5h1v1h-1zM15,5h1v1h-1zM18,5h1v1h-1zM24,5h1v1h-1zM0,6h1v1h-1zM1,6h1v1h-1zM2,6h1v1h-1zM3,6h1v1h-1zM4,6h1v1h-1zM5,6h1v1h-1zM6,6h1v1h-1zM8,6h1v1h-1zM10,6h1v1h-1zM12,6h1v1h-1zM14,6h1v1h-1zM16,6h1v1h-1zM18,6h1v1h-1zM19,6h1v1h-1zM20,6h1v1h-1zM21,6h1v1h-1zM22,6h1v1h-1zM23,6h1v1h-1zM24,6h1v1h-1zM8,7h1v1h-1zM9,7h1v1h-1zM10,7h1v1h-1zM16,7h1v1h-1zM0,8h1v1h-1zM2,8h1v1h-1zM3,8h1v1h-1zM4,8h1v1h-1zM5,8h1v1h-1zM6,8h1v1h-1zM10,8h1v1h-1zM11,8h1v1h-1zM13,8h1v1h-1zM14,8h1v1h-1zM18,8h1v1h-1zM19,8h1v1h-1zM20,8h1v1h-1zM21,8h1v1h-1zM22,8h1v1h-1zM2,9h1v1h-1zM5,9h1v1h-1zM7,9h1v1h-1zM8,9h1v1h-1zM12,9h1v1h-1zM17,9h1v1h-1zM19,9h1v1h-1zM23,9h1v1h-1zM0,10h1v1h-1zM1,10h1v1h-1zM2,10h1v1h-1zM4,10h1v1h-1zM6,10h1v1h-1zM9,10h1v1h-1zM10,10h1v1h-1zM14,10h1v1h-1zM15,10h1v1h-1zM16,10h1v1h-1zM18,10h1v1h-1zM19,10h1v1h-1zM21,10h1v1h-1zM23,10h1v1h-1zM24,10h1v1h-1zM1,11h1v1h-1zM3,11h1v1h-1zM5,11h1v1h-1zM7,11h1v1h-1zM9,11h1v1h-1zM11,11h1v1h-1zM14,11h1v1h-1zM15,11h1v1h-1zM16,11h1v1h-1zM24,11h1v1h-1zM2,12h1v1h-1zM5,12h1v1h-1zM6,12h1v1h-1zM7,12h1v1h-1zM10,12h1v1h-1zM11,12h1v1h-1zM12,12h1v1h-1zM13,12h1v1h-1zM14,12h1v1h-1zM15,12h1v1h-1zM17,12h1v1h-1zM18,12h1v1h-1zM19,12h1v1h-1zM20,12h1v1h-1zM22,12h1v1h-1zM23,12h1v1h-1zM24,12h1v1h-1zM0,13h1v1h-1zM2,13h1v1h-1zM4,13h1v1h-1zM5,13h1v1h-1zM9,13h1v1h-1zM12,13h1v1h-1zM13,13h1v1h-1zM14,13h1v1h-1zM16,13h1v1h-1zM19,13h1v1h-1zM21,13h1v1h-1zM23,13h1v1h-1zM0,14h1v1h-1zM2,14h1v1h-1zM3,14h1v1h-1zM6,14h1v1h-1zM9,14h1v1h-1zM13,14h1v1h-1zM15,14h1v1h-1zM16,14h1v1h-1zM17,14h1v1h-1zM18,14h1v1h-1zM19,14h1v1h-1zM20,14h1v1h-1zM21,14h1v1h-1zM23,14h1v1h-1zM24,14h1v1h-1zM0,15h1v1h-1zM4,15h1v1h-1zM10,15h1v1h-1zM11,15h1v1h-1zM15,15h1v1h-1zM16,15h1v1h-1zM19,15h1v1h-1zM20,15h1v1h-1zM24,15h1v1h-1zM0,16h1v1h-1zM2,16h1v1h-1zM3,16h1v1h-1zM4,16h1v1h-1zM6,16h1v1h-1zM7,16h1v1h-1zM8,16h1v1h-1zM10,16h1v1h-1zM12,16h1v1h-1zM13,16h1v1h-1zM14,16h1v1h-1zM16,16h1v1h-1zM17,16h1v1h-1zM18,16h1v1h-1zM19,16h1v1h-1zM20,16h1v1h-1zM22,16h1v1h-1zM8,17h1v1h-1zM9,17h1v1h-1zM10,17h1v1h-1zM11,17h1v1h-1zM13,17h1v1h-1zM15,17h1v1h-1zM16,17h1v1h-1zM20,17h1v1h-1zM21,17h1v1h-1zM0,18h1v1h-1zM1,18h1v1h-1zM2,18h1v1h-1zM3,18h1v1h-1zM4,18h1v1h-1zM5,18h1v1h-1zM6,18h1v1h-1zM9,18h1v1h-1zM12,18h1v1h-1zM16,18h1v1h-1zM18,18h1v1h-1zM20,18h1v1h-1zM22,18h1v1h-1zM23,18h1v1h-1zM24,18h1v1h-1zM0,19h1v1h-1zM6,19h1v1h-1zM8,19h1v1h-1zM10,19h1v1h-1zM11,19h1v1h-1zM16,19h1v1h-1zM20,19h1v1h-1zM21,19h1v1h-1zM0,20h1v1h-1zM2,20h1v1h-1zM3,20h1v1h-1zM4,20h1v1h-1zM6,20h1v1h-1zM8,20h1v1h-1zM9,20h1v1h-1zM10,20h1v1h-1zM11,20h1v1h-1zM12,20h1v1h-1zM13,20h1v1h-1zM14,20h1v1h-1zM15,20h1v1h-1zM16,20h1v1h-1zM17,20h1v1h-1zM18,20h1v1h-1zM19,20h1v1h-1zM20,20h1v1h-1zM22,20h1v1h-1zM0,21h1v1h-1zM2,21h1v1h-1zM3,21h1v1h-1zM4,21h1v1h-1zM6,21h1v1h-1zM8,21h1v1h-1zM10,21h1v1h-1zM11,21h1v1h-1zM17,21h1v1h-1zM18,21h1v1h-1zM20,21h1v1h-1zM21,21h1v1h-1zM22,21h1v1h-1zM23,21h1v1h-1zM24,21h1v1h-1zM0,22h1v1h-1zM2,22h1v1h-1zM3,22h1v1h-1zM4,22h1v1h-1zM6,22h1v1h-1zM8,22h1v1h-1zM9,22h1v1h-1zM12,22h1v1h-1zM14,22h1v1h-1zM15,22h1v1h-1zM17,22h1v1h-1zM21,22h1v1h-1zM22,22h1v1h-1zM24,22h1v1h-1zM0,23h1v1h-1zM6,23h1v1h-1zM9,23h1v1h-1zM10,23h1v1h-1zM11,23h1v1h-1zM14,23h1v1h-1zM15,23h1v1h-1zM16,23h1v1h-1zM18,23h1v1h-1zM19,23h1v1h-1zM20,23h1v1h-1zM21,23h1v1h-1zM24,23h1v1h-1zM0,24h1v1h-1zM1,24h1v1h-1zM2,24h1v1h-1zM3,24h1v1h-1zM4,24h1v1h-1zM5,24h1v1h-1zM6,24h1v1h-1zM8,24h1v1h-1zM10,24h1v1h-1zM11,24h1v1h-1zM12,24h1v1h-1zM13,24h1v1h-1zM19,24h1v1h-1zM20,24h1v1h-1zM21,24h1v1h-1zM22,24h1v1h-1zM23,24h1v1h-1zM24,24h1v1h-1z"></path></defs><g style="mix-blend-mode:difference"><use fill="#e80004" transform="translate(0.6,0.6)" href="#base"></use><use fill="#000000" transform="translate(0.4,0.4)" href="#base"></use><use fill="#ca70cf" transform="translate(0.2,0.2)" href="#base"></use><use fill="#000000" transform="translate(0,0)" href="#base"></use><use fill="#ffffff" transform="translate(-0.2,-0.2)" href="#base"></use></g></svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 4.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 29 29"><rect x="-2" y="-2" width="29" height="29" fill="#fac1c1"></rect><defs><path id="base" d="M0,0h1v1h-1zM1,0h1v1h-1zM2,0h1v1h-1zM3,0h1v1h-1zM4,0h1v1h-1zM5,0h1v1h-1zM6,0h1v1h-1zM13,0h1v1h-1zM14,0h1v1h-1zM16,0h1v1h-1zM18,0h1v1h-1zM19,0h1v1h-1zM20,0h1v1h-1zM21,0h1v1h-1zM22,0h1v1h-1zM23,0h1v1h-1zM24,0h1v1h-1zM0,1h1v1h-1zM6,1h1v1h-1zM9,1h1v1h-1zM12,1h1v1h-1zM15,1h1v1h-1zM16,1h1v1h-1zM18,1h1v1h-1zM24,1h1v1h-1zM0,2h1v1h-1zM2,2h1v1h-1zM3,2h1v1h-1zM4,2h1v1h-1zM6,2h1v1h-1zM8,2h1v1h-1zM9,2h1v1h-1zM10,2h1v1h-1zM14,2h1v1h-1zM18,2h1v1h-1zM20,2h1v1h-1zM21,2h1v1h-1zM22,2h1v1h-1zM24,2h1v1h-1zM0,3h1v1h-1zM2,3h1v1h-1zM3,3h1v1h-1zM4,3h1v1h-1zM6,3h1v1h-1zM8,3h1v1h-1zM9,3h1v1h-1zM13,3h1v1h-1zM14,3h1v1h-1zM18,3h1v1h-1zM20,3h1v1h-1zM21,3h1v1h-1zM22,3h1v1h-1zM24,3h1v1h-1zM0,4h1v1h-1zM2,4h1v1h-1zM3,4h1v1h-1zM4,4h1v1h-1zM6,4h1v1h-1zM8,4h1v1h-1zM10,4h1v1h-1zM11,4h1v1h-1zM13,4h1v1h-1zM16,4h1v1h-1zM18,4h1v1h-1zM20,4h1v1h-1zM21,4h1v1h-1zM22,4h1v1h-1zM24,4h1v1h-1zM0,5h1v1h-1zM6,5h1v1h-1zM8,5h1v1h-1zM10,5h1v1h-1zM14,5h1v1h-1zM15,5h1v1h-1zM18,5h1v1h-1zM24,5h1v1h-1zM0,6h1v1h-1zM1,6h1v1h-1zM2,6h1v1h-1zM3,6h1v1h-1zM4,6h1v1h-1zM5,6h1v1h-1zM6,6h1v1h-1zM8,6h1v1h-1zM10,6h1v1h-1zM12,6h1v1h-1zM14,6h1v1h-1zM16,6h1v1h-1zM18,6h1v1h-1zM19,6h1v1h-1zM20,6h1v1h-1zM21,6h1v1h-1zM22,6h1v1h-1zM23,6h1v1h-1zM24,6h1v1h-1zM8,7h1v1h-1zM9,7h1v1h-1zM10,7h1v1h-1zM16,7h1v1h-1zM0,8h1v1h-1zM2,8h1v1h-1zM3,8h1v1h-1zM4,8h1v1h-1zM5,8h1v1h-1zM6,8h1v1h-1zM10,8h1v1h-1zM11,8h1v1h-1zM13,8h1v1h-1zM14,8h1v1h-1zM18,8h1v1h-1zM19,8h1v1h-1zM20,8h1v1h-1zM21,8h1v1h-1zM22,8h1v1h-1zM2,9h1v1h-1zM5,9h1v1h-1zM7,9h1v1h-1zM8,9h1v1h-1zM12,9h1v1h-1zM17,9h1v1h-1zM19,9h1v1h-1zM23,9h1v1h-1zM0,10h1v1h-1zM1,10h1v1h-1zM2,10h1v1h-1zM4,10h1v1h-1zM6,10h1v1h-1zM9,10h1v1h-1zM10,10h1v1h-1zM14,10h1v1h-1zM15,10h1v1h-1zM16,10h1v1h-1zM18,10h1v1h-1zM19,10h1v1h-1zM21,10h1v1h-1zM23,10h1v1h-1zM24,10h1v1h-1zM1,11h1v1h-1zM3,11h1v1h-1zM5,11h1v1h-1zM7,11h1v1h-1zM9,11h1v1h-1zM11,11h1v1h-1zM14,11h1v1h-1zM15,11h1v1h-1zM16,11h1v1h-1zM24,11h1v1h-1zM2,12h1v1h-1zM5,12h1v1h-1zM6,12h1v1h-1zM7,12h1v1h-1zM10,12h1v1h-1zM11,12h1v1h-1zM12,12h1v1h-1zM13,12h1v1h-1zM14,12h1v1h-1zM15,12h1v1h-1zM17,12h1v1h-1zM18,12h1v1h-1zM19,12h1v1h-1zM20,12h1v1h-1zM22,12h1v1h-1zM23,12h1v1h-1zM24,12h1v1h-1zM0,13h1v1h-1zM2,13h1v1h-1zM4,13h1v1h-1zM5,13h1v1h-1zM9,13h1v1h-1zM12,13h1v1h-1zM13,13h1v1h-1zM14,13h1v1h-1zM16,13h1v1h-1zM19,13h1v1h-1zM21,13h1v1h-1zM23,13h1v1h-1zM0,14h1v1h-1zM2,14h1v1h-1zM3,14h1v1h-1zM6,14h1v1h-1zM9,14h1v1h-1zM13,14h1v1h-1zM15,14h1v1h-1zM16,14h1v1h-1zM17,14h1v1h-1zM18,14h1v1h-1zM19,14h1v1h-1zM20,14h1v1h-1zM21,14h1v1h-1zM23,14h1v1h-1zM24,14h1v1h-1zM0,15h1v1h-1zM4,15h1v1h-1zM10,15h1v1h-1zM11,15h1v1h-1zM15,15h1v1h-1zM16,15h1v1h-1zM19,15h1v1h-1zM20,15h1v1h-1zM24,15h1v1h-1zM0,16h1v1h-1zM2,16h1v1h-1zM3,16h1v1h-1zM4,16h1v1h-1zM6,16h1v1h-1zM7,16h1v1h-1zM8,16h1v1h-1zM10,16h1v1h-1zM12,16h1v1h-1zM13,16h1v1h-1zM14,16h1v1h-1zM16,16h1v1h-1zM17,16h1v1h-1zM18,16h1v1h-1zM19,16h1v1h-1zM20,16h1v1h-1zM22,16h1v1h-1zM8,17h1v1h-1zM9,17h1v1h-1zM10,17h1v1h-1zM11,17h1v1h-1zM13,17h1v1h-1zM15,17h1v1h-1zM16,17h1v1h-1zM20,17h1v1h-1zM21,17h1v1h-1zM0,18h1v1h-1zM1,18h1v1h-1zM2,18h1v1h-1zM3,18h1v1h-1zM4,18h1v1h-1zM5,18h1v1h-1zM6,18h1v1h-1zM9,18h1v1h-1zM12,18h1v1h-1zM16,18h1v1h-1zM18,18h1v1h-1zM20,18h1v1h-1zM22,18h1v1h-1zM23,18h1v1h-1zM24,18h1v1h-1zM0,19h1v1h-1zM6,19h1v1h-1zM8,19h1v1h-1zM10,19h1v1h-1zM11,19h1v1h-1zM16,19h1v1h-1zM20,19h1v1h-1zM21,19h1v1h-1zM0,20h1v1h-1zM2,20h1v1h-1zM3,20h1v1h-1zM4,20h1v1h-1zM6,20h1v1h-1zM8,20h1v1h-1zM9,20h1v1h-1zM10,20h1v1h-1zM11,20h1v1h-1zM12,20h1v1h-1zM13,20h1v1h-1zM14,20h1v1h-1zM15,20h1v1h-1zM16,20h1v1h-1zM17,20h1v1h-1zM18,20h1v1h-1zM19,20h1v1h-1zM20,20h1v1h-1zM22,20h1v1h-1zM0,21h1v1h-1zM2,21h1v1h-1zM3,21h1v1h-1zM4,21h1v1h-1zM6,21h1v1h-1zM8,21h1v1h-1zM10,21h1v1h-1zM11,21h1v1h-1zM17,21h1v1h-1zM18,21h1v1h-1zM20,21h1v1h-1zM21,21h1v1h-1zM22,21h1v1h-1zM23,21h1v1h-1zM24,21h1v1h-1zM0,22h1v1h-1zM2,22h1v1h-1zM3,22h1v1h-1zM4,22h1v1h-1zM6,22h1v1h-1zM8,22h1v1h-1zM9,22h1v1h-1zM12,22h1v1h-1zM14,22h1v1h-1zM15,22h1v1h-1zM17,22h1v1h-1zM21,22h1v1h-1zM22,22h1v1h-1zM24,22h1v1h-1zM0,23h1v1h-1zM6,23h1v1h-1zM9,23h1v1h-1zM10,23h1v1h-1zM11,23h1v1h-1zM14,23h1v1h-1zM15,23h1v1h-1zM16,23h1v1h-1zM18,23h1v1h-1zM19,23h1v1h-1zM20,23h1v1h-1zM21,23h1v1h-1zM24,23h1v1h-1zM0,24h1v1h-1zM1,24h1v1h-1zM2,24h1v1h-1zM3,24h1v1h-1zM4,24h1v1h-1zM5,24h1v1h-1zM6,24h1v1h-1zM8,24h1v1h-1zM10,24h1v1h-1zM11,24h1v1h-1zM12,24h1v1h-1zM13,24h1v1h-1zM19,24h1v1h-1zM20,24h1v1h-1zM21,24h1v1h-1zM22,24h1v1h-1zM23,24h1v1h-1zM24,24h1v1h-1z"></path></defs><g style="mix-blend-mode:luminosity"><use fill="#42e244" transform="translate(-0.6,0.2)" href="#base"></use><use fill="#c44444" transform="translate(0,0.1)" href="#base"></use><use fill="#b9478c" transform="translate(0.1,-0.2)" href="#base"></use><use fill="#380402" transform="translate(0.2,-0.5)" href="#base"></use></g></svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 4.7 KiB |
|
|
@ -48,9 +48,6 @@ importers:
|
|||
'@thisbeyond/solid-dnd':
|
||||
specifier: ^0.7.5
|
||||
version: 0.7.5(solid-js@1.8.17)
|
||||
'@tiagotrindade/solid-colorful':
|
||||
specifier: ^1.0.2
|
||||
version: 1.0.2(solid-js@1.8.17)
|
||||
'@unocss/reset':
|
||||
specifier: ^0.59.4
|
||||
version: 0.59.4
|
||||
|
|
@ -63,9 +60,6 @@ importers:
|
|||
lucide-solid:
|
||||
specifier: ^0.378.0
|
||||
version: 0.378.0(solid-js@1.8.17)
|
||||
solid-color:
|
||||
specifier: link:/home/zhengkyl/fd/solid-color
|
||||
version: link:../solid-color
|
||||
solid-js:
|
||||
specifier: ^1.8.17
|
||||
version: 1.8.17
|
||||
|
|
@ -1094,11 +1088,6 @@ packages:
|
|||
peerDependencies:
|
||||
solid-js: ^1.5
|
||||
|
||||
'@tiagotrindade/solid-colorful@1.0.2':
|
||||
resolution: {integrity: sha512-ccyv857xkMZ8It8vkdMetH7KenjSWtfF62QYOf34Y80eTLbBhg6k7oTVvU0BJFLePv4f3NFuyrKdr14EPVyS6Q==}
|
||||
peerDependencies:
|
||||
solid-js: '*'
|
||||
|
||||
'@types/babel__core@7.20.5':
|
||||
resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
|
||||
|
||||
|
|
@ -3977,10 +3966,6 @@ snapshots:
|
|||
dependencies:
|
||||
solid-js: 1.8.17
|
||||
|
||||
'@tiagotrindade/solid-colorful@1.0.2(solid-js@1.8.17)':
|
||||
dependencies:
|
||||
solid-js: 1.8.17
|
||||
|
||||
'@types/babel__core@7.20.5':
|
||||
dependencies:
|
||||
'@babel/parser': 7.24.5
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
export const paramsSchema = {
|
||||
Margin: {
|
||||
type: "number",
|
||||
min: 0,
|
||||
max: 10,
|
||||
step: 0.1,
|
||||
default: 2,
|
||||
},
|
||||
Background: {
|
||||
type: "color",
|
||||
default: "#163157",
|
||||
},
|
||||
// See browser compatibility issues here
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
|
||||
"Mix blend mode": {
|
||||
type: "select",
|
||||
options: [
|
||||
"normal",
|
||||
"multiply",
|
||||
"screen",
|
||||
"overlay",
|
||||
"darken",
|
||||
"lighten",
|
||||
"color-dodge",
|
||||
"color-burn",
|
||||
"hard-light",
|
||||
"soft-light",
|
||||
"difference",
|
||||
"exclusion",
|
||||
"hue",
|
||||
"saturation",
|
||||
"color",
|
||||
"luminosity",
|
||||
"plus-darker",
|
||||
"plus-lighter",
|
||||
],
|
||||
default: "difference",
|
||||
},
|
||||
Foreground: {
|
||||
type: "array",
|
||||
resizable: true,
|
||||
props: {
|
||||
type: "color",
|
||||
},
|
||||
default: ["#e80004", "#000000", "#ca70cf", "#000000", "#ffffff"],
|
||||
},
|
||||
"Offset x": {
|
||||
type: "array",
|
||||
resizable: true,
|
||||
props: {
|
||||
type: "number",
|
||||
min: -1,
|
||||
step: 0.1,
|
||||
max: 1,
|
||||
},
|
||||
default: [0.6, 0.4, 0.2, 0, -0.2],
|
||||
},
|
||||
"Offset y": {
|
||||
type: "array",
|
||||
resizable: true,
|
||||
props: {
|
||||
type: "number",
|
||||
min: -1,
|
||||
step: 0.1,
|
||||
max: 1,
|
||||
},
|
||||
default: [0.6, 0.4, 0.2, 0, -0.2],
|
||||
},
|
||||
};
|
||||
|
||||
export function renderSVG(qr, params) {
|
||||
const matrixWidth = qr.version * 4 + 17;
|
||||
const margin = params["Margin"];
|
||||
const colors = params["Foreground"];
|
||||
const offsetX = params["Offset x"];
|
||||
const offsetY = params["Offset y"];
|
||||
const bg = params["Background"];
|
||||
|
||||
const size = matrixWidth + 2 * margin;
|
||||
let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${-margin} ${-margin} ${size} ${size}">`;
|
||||
svg += `<rect x="${-margin}" y="${-margin}" width="${size}" height="${size}" fill="${bg}"/>`;
|
||||
|
||||
svg += `<defs>`;
|
||||
svg += `<path id="base" d="`;
|
||||
for (let y = 0; y < matrixWidth; y++) {
|
||||
for (let x = 0; x < matrixWidth; x++) {
|
||||
const module = qr.matrix[y * matrixWidth + x];
|
||||
if (module & 1) {
|
||||
svg += `M${x},${y}h1v1h-1z`;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg += `"/>`;
|
||||
svg += `</defs>`;
|
||||
|
||||
svg += `<g style="mix-blend-mode:${params["Mix blend mode"]}">`;
|
||||
colors.forEach((color, i) => {
|
||||
svg += `<use fill="${color}" transform="translate(${offsetX[i]},${offsetY[i]})" href="#base"/>`;
|
||||
});
|
||||
svg += `</g>`;
|
||||
svg += `</svg>`;
|
||||
return svg;
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ import { Dots } from "./presets/Dots";
|
|||
import { Drawing } from "./presets/Drawing";
|
||||
import { Glass } from "./presets/Glass";
|
||||
import { Halftone } from "./presets/Halftone";
|
||||
import { Layers } from "./presets/Layers";
|
||||
import { Minimal } from "./presets/Minimal";
|
||||
import { Mondrian } from "./presets/Mondrian";
|
||||
import { Neon } from "./presets/Neon";
|
||||
|
|
@ -25,6 +26,7 @@ export const PRESET_CODE = {
|
|||
Tile,
|
||||
Drawing,
|
||||
Halftone,
|
||||
Layers,
|
||||
Dots,
|
||||
Minimal,
|
||||
Blocks,
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ export function renderSVG(qr, params) {
|
|||
if (
|
||||
!visited(x + 1, y) &&
|
||||
!visited(x + 2, y) &&
|
||||
!visited(x + 1, y + 1) &&
|
||||
!visited(x, y + 1) &&
|
||||
!visited(x + 2, y + 1)
|
||||
) {
|
||||
crossLayer += \`<g>\`;
|
||||
|
|
@ -159,7 +159,7 @@ export function renderSVG(qr, params) {
|
|||
x < matrixWidth - 1 &&
|
||||
matrix(x + 1, y) & matrix(x, y + 1) & matrix(x + 1, y + 1) & 1
|
||||
) {
|
||||
if (!visited(x + 1, y) && !visited(x + 1, y + 1)) {
|
||||
if (!visited(x + 1, y) && !visited(x + 1, y + 1) && !visited(x, y + 1)) {
|
||||
crossLayer += \`<g>\`;
|
||||
crossLayer += \`<line x1="\${x + co}" y1="\${y + co}" x2="\${x + 2 - co}" y2="\${y + 2 - co}"/>\`;
|
||||
crossLayer += \`<line x1="\${x + 2 - co}" y1="\${y + co}" x2="\${x + co}" y2="\${y + 2 - co}"/>\`;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
export const Layers = `export const paramsSchema = {
|
||||
Margin: {
|
||||
type: "number",
|
||||
min: 0,
|
||||
max: 10,
|
||||
step: 0.1,
|
||||
default: 2,
|
||||
},
|
||||
Background: {
|
||||
type: "color",
|
||||
default: "#163157",
|
||||
},
|
||||
// See browser compatibility issues here
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
|
||||
"Mix blend mode": {
|
||||
type: "select",
|
||||
options: [
|
||||
"normal",
|
||||
"multiply",
|
||||
"screen",
|
||||
"overlay",
|
||||
"darken",
|
||||
"lighten",
|
||||
"color-dodge",
|
||||
"color-burn",
|
||||
"hard-light",
|
||||
"soft-light",
|
||||
"difference",
|
||||
"exclusion",
|
||||
"hue",
|
||||
"saturation",
|
||||
"color",
|
||||
"luminosity",
|
||||
"plus-darker",
|
||||
"plus-lighter",
|
||||
],
|
||||
default: "difference",
|
||||
},
|
||||
Foreground: {
|
||||
type: "array",
|
||||
resizable: true,
|
||||
props: {
|
||||
type: "color",
|
||||
},
|
||||
default: ["#e80004", "#000000", "#ca70cf", "#000000", "#ffffff"],
|
||||
},
|
||||
"Offset x": {
|
||||
type: "array",
|
||||
resizable: true,
|
||||
props: {
|
||||
type: "number",
|
||||
min: -1,
|
||||
step: 0.1,
|
||||
max: 1,
|
||||
},
|
||||
default: [0.6, 0.4, 0.2, 0, -0.2],
|
||||
},
|
||||
"Offset y": {
|
||||
type: "array",
|
||||
resizable: true,
|
||||
props: {
|
||||
type: "number",
|
||||
min: -1,
|
||||
step: 0.1,
|
||||
max: 1,
|
||||
},
|
||||
default: [0.6, 0.4, 0.2, 0, -0.2],
|
||||
},
|
||||
};
|
||||
|
||||
export function renderSVG(qr, params) {
|
||||
const matrixWidth = qr.version * 4 + 17;
|
||||
const margin = params["Margin"];
|
||||
const colors = params["Foreground"];
|
||||
const offsetX = params["Offset x"];
|
||||
const offsetY = params["Offset y"];
|
||||
const bg = params["Background"];
|
||||
|
||||
const size = matrixWidth + 2 * margin;
|
||||
let svg = \`<svg xmlns="http://www.w3.org/2000/svg" viewBox="\${-margin} \${-margin} \${size} \${size}">\`;
|
||||
svg += \`<rect x="\${-margin}" y="\${-margin}" width="\${size}" height="\${size}" fill="\${bg}"/>\`;
|
||||
|
||||
svg += \`<defs>\`;
|
||||
svg += \`<path id="base" d="\`;
|
||||
for (let y = 0; y < matrixWidth; y++) {
|
||||
for (let x = 0; x < matrixWidth; x++) {
|
||||
const module = qr.matrix[y * matrixWidth + x];
|
||||
if (module & 1) {
|
||||
svg += \`M\${x},\${y}h1v1h-1z\`;
|
||||
}
|
||||
}
|
||||
}
|
||||
svg += \`"/>\`;
|
||||
svg += \`</defs>\`;
|
||||
|
||||
svg += \`<g style="mix-blend-mode:\${params["Mix blend mode"]}">\`;
|
||||
colors.forEach((color, i) => {
|
||||
svg += \`<use fill="\${color}" transform="translate(\${offsetX[i]},\${offsetY[i]})" href="#base"/>\`;
|
||||
});
|
||||
svg += \`</g>\`;
|
||||
svg += \`</svg>\`;
|
||||
return svg;
|
||||
}
|
||||
`
|
||||
Ładowanie…
Reference in New Issue