@blockspoon/cert-badge-renderer 1.0.49 → 1.0.51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/templates/badges/BadgeType56.js +58 -0
  2. package/dist/cjs/utils/generateAchievementHTML.js +4 -0
  3. package/dist/esm/templates/badges/BadgeType56.js +58 -0
  4. package/dist/esm/utils/generateAchievementHTML.js +4 -0
  5. package/package.json +1 -1
  6. package/src/templates/badges/BadgeType56.ts +59 -1
  7. package/src/utils/generateAchievementHTML.ts +4 -0
package/dist/cjs/templates/badges/BadgeType56.js CHANGED
@@ -70,6 +70,64 @@ function createBadgeType56({ mainColor = "#96A6B4", subColor = "#96A6B4", }) {
70
70
  d="M307.861 403.749L307.861 492.563L300.911 492.563L300.911 403.749L307.861 403.749ZM307.861 497.782L307.861 503L300.911 503L300.911 497.782L307.861 497.782ZM279.793 492.563L279.793 503L272.843 503L272.843 492.563L279.793 492.563ZM265.76 487.345L265.76 492.563L258.676 492.563L258.676 487.345L265.76 487.345ZM265.76 497.782L265.76 503L258.809 503L258.809 497.782L265.76 497.782ZM265.76 403.749L265.76 482.127L258.676 482.127L258.676 403.749L265.76 403.749ZM279.793 403.749L279.793 487.345L272.843 487.345L272.843 403.749L279.793 403.749ZM293.827 403.749L293.827 503L286.743 503L286.743 403.749L293.827 403.749Z"
71
71
  fill="${mainColor}"
72
72
  />
73
+ <path
74
+ fill-rule="evenodd"
75
+ clip-rule="evenodd"
76
+ d="M536.947 503L529.997 503L529.997 497.782L536.947 497.782L536.947 503ZM522.913 503L515.963 503L515.963 497.782L522.913 497.782L522.913 503ZM642 503L543.897 503L543.897 497.782L642 497.782L642 503ZM642 482.127L522.913 482.127L522.913 476.908L642 476.908L642 482.127ZM508.879 466.472L522.913 466.472L522.913 471.69L508.879 471.69L508.879 466.472ZM642 471.69L529.997 471.69L529.997 466.472L642 466.472L642 471.69ZM515.963 482.127L508.879 482.127L508.879 476.908L515.963 476.908L515.963 482.127ZM642 492.563L508.879 492.563L508.879 487.345L642 487.345L642 492.563Z"
77
+ fill="${mainColor}"
78
+ />
79
+ <path
80
+ fill-rule="evenodd"
81
+ clip-rule="evenodd"
82
+ d="M559.003 393.313L566.086 393.313L566.086 398.531L559.003 398.531L559.003 393.313ZM573.036 393.313L579.987 393.313L579.987 398.531L573.036 398.531L573.036 393.313ZM453.949 393.313L552.052 393.313L552.052 398.531L453.949 398.531L453.949 393.313ZM453.949 372.439L573.036 372.439L573.036 377.658L453.949 377.658L453.949 372.439ZM587.07 367.221L573.036 367.221L573.036 362.003L587.07 362.003L587.07 367.221ZM453.949 362.002L566.086 362.002L566.086 367.221L453.949 367.221L453.949 362.002ZM579.987 372.439L587.07 372.439L587.07 377.658L579.987 377.658L579.987 372.439ZM453.949 382.876L587.07 382.876L587.07 388.094L453.949 388.094L453.949 382.876Z"
83
+ fill="${mainColor}"
84
+ />
85
+ <path
86
+ fill-rule="evenodd"
87
+ clip-rule="evenodd"
88
+ d="M510.352 408.557L510.352 404.771L515.297 404.771L584.664 456.443L584.664 460.229L579.719 460.229L510.352 408.557ZM525.187 404.771L535.078 404.771L584.664 441.709L584.664 449.076L525.187 404.771ZM544.968 404.771L554.859 404.771L584.531 426.975L584.531 434.342L544.968 404.771ZM584.664 419.505L564.883 404.771L574.774 404.771L584.664 412.138L584.664 419.505ZM510.352 423.189L510.352 415.822L569.828 460.127L559.938 460.127L510.352 423.189ZM510.352 437.923L510.352 430.556L549.914 460.127L540.023 460.127L510.352 437.923ZM520.242 460.024L510.352 452.657L510.352 445.29L530.133 460.024L520.242 460.024Z"
89
+ fill="${mainColor}"
90
+ />
91
+ <path
92
+ d="M502.998 403.749L502.998 492.563L495.914 492.563L495.914 403.749L502.998 403.749ZM502.998 497.782L502.998 503L496.048 503L496.048 497.782L502.998 497.782ZM474.93 492.563L474.93 503L467.98 503L467.98 492.563L474.93 492.563ZM460.896 487.345L460.896 492.563L453.946 492.563L453.946 487.345L460.896 487.345ZM460.896 497.782L460.896 503L453.812 503L453.813 497.782L460.896 497.782ZM460.896 403.749L460.896 482.127L453.946 482.127L453.946 403.749L460.896 403.749ZM474.93 403.749L474.93 487.345L467.846 487.345L467.846 403.749L474.93 403.749ZM488.964 403.749L488.964 503L482.014 503L482.014 403.749L488.964 403.749Z"
93
+ fill="${mainColor}"
94
+ />
95
+ <path
96
+ d="M63.0078 503L63.0078 414.185L70.0916 414.185L70.0916 503L63.0078 503ZM63.0078 408.967L63.0078 403.749L69.9579 403.749L69.9579 408.967L63.0078 408.967ZM91.0755 414.185L91.0755 403.749L98.0256 403.749L98.0256 414.185L91.0755 414.185ZM105.109 419.404L105.109 414.185L112.059 414.185L112.059 419.404L105.109 419.404ZM105.109 408.967L105.109 403.749L112.193 403.749L112.193 408.967L105.109 408.967ZM105.109 503L105.109 424.622L112.059 424.622L112.059 503L105.109 503ZM91.0755 503L91.0755 419.404L98.1593 419.404L98.1593 503L91.0755 503ZM77.0417 503L77.0417 403.749L83.9918 403.749L83.9918 503L77.0417 503Z"
97
+ fill="${mainColor}"
98
+ />
99
+ <path
100
+ fill-rule="evenodd"
101
+ clip-rule="evenodd"
102
+ d="M168.195 362.002L175.145 362.002L175.145 367.221L168.195 367.221L168.195 362.002ZM182.095 362.003L189.179 362.003L189.179 367.221L182.095 367.221L182.095 362.003ZM63.0078 362.002L161.111 362.002L161.111 367.221L63.0078 367.221L63.0078 362.002ZM63.0078 382.876L182.095 382.876L182.095 388.094L63.0078 388.094L63.0078 382.876ZM196.129 398.531L182.095 398.531L182.095 393.313L196.129 393.313L196.129 398.531ZM63.0078 393.313L175.145 393.313L175.145 398.531L63.0078 398.531L63.0078 393.313ZM189.179 382.876L196.129 382.876L196.129 388.094L189.179 388.094L189.179 382.876ZM63.0078 372.439L196.129 372.439L196.129 377.658L63.0078 377.658L63.0078 372.439Z"
103
+ fill="${mainColor}"
104
+ />
105
+ <path
106
+ fill-rule="evenodd"
107
+ clip-rule="evenodd"
108
+ d="M146.004 471.69L139.054 471.69L139.054 466.472L146.004 466.472L146.004 471.69ZM132.104 471.69L125.02 471.69L125.02 466.472L132.104 466.472L132.104 471.69ZM251.191 471.69L153.088 471.69L153.088 466.472L251.191 466.472L251.191 471.69ZM251.191 492.563L132.104 492.563L132.104 487.345L251.191 487.345L251.191 492.563ZM118.07 497.782L132.104 497.782L132.104 503L118.07 503L118.07 497.782ZM251.191 503L139.054 503L139.054 497.782L251.191 497.782L251.191 503ZM125.02 492.563L118.07 492.563L118.07 487.345L125.02 487.345L125.02 492.563ZM251.191 482.127L118.07 482.127L118.07 476.908L251.191 476.908L251.191 482.127Z"
109
+ fill="${mainColor}"
110
+ />
111
+ <path
112
+ fill-rule="evenodd"
113
+ clip-rule="evenodd"
114
+ d="M194.789 456.443L194.789 460.229L189.844 460.229L120.477 408.557L120.477 404.771L125.422 404.771L194.789 456.443ZM179.953 460.229L170.063 460.229L120.477 423.291L120.477 415.924L179.953 460.229ZM160.172 460.229L150.282 460.229L120.477 438.025L120.477 430.658L160.172 460.229ZM120.61 445.495L140.391 460.229L130.501 460.229L120.61 452.862L120.61 445.495ZM194.923 441.811L194.923 449.178L135.446 404.873L145.337 404.873L194.923 441.811ZM194.923 427.077L194.923 434.444L155.227 404.873L165.251 404.873L194.923 427.077ZM185.032 404.976L194.923 412.343L194.923 419.71L175.008 404.976L185.032 404.976Z"
115
+ fill="${mainColor}"
116
+ />
117
+ <path
118
+ d="M202.141 461.251L202.141 372.437L209.091 372.437L209.091 461.251L202.141 461.251ZM202.141 367.218L202.141 362L209.224 362L209.224 367.218L202.141 367.218ZM230.075 372.437L230.075 362L237.158 362L237.158 372.437L230.075 372.437ZM244.109 377.655L244.109 372.437L251.059 372.437L251.059 377.655L244.109 377.655ZM244.109 367.218L244.109 362L251.059 362L251.059 367.218L244.109 367.218ZM244.109 461.251L244.109 382.873L251.192 382.873L251.192 461.251L244.109 461.251ZM230.075 461.251L230.075 377.655L237.025 377.655L237.025 461.251L230.075 461.251ZM216.174 461.251L216.174 362L223.125 362L223.125 461.251L216.174 461.251Z"
119
+ fill="${mainColor}"
120
+ />
121
+ <path
122
+ fill-rule="evenodd"
123
+ clip-rule="evenodd"
124
+ d="M-48.9987 471.69L-55.9488 471.69L-55.9488 466.472L-48.9987 466.472L-48.9987 471.69ZM-63.0326 471.69L-69.9827 471.69L-69.9827 466.472L-63.0326 466.472L-63.0326 471.69ZM56.0547 471.69L-42.0486 471.69L-42.0486 466.472L56.0547 466.472L56.0547 471.69ZM56.0547 492.563L-63.0326 492.563L-63.0326 487.345L56.0547 487.345L56.0547 492.563ZM-77.0664 497.782L-63.0326 497.782L-63.0326 503L-77.0664 503L-77.0664 497.782ZM56.0547 503L-55.9488 503L-55.9488 497.782L56.0547 497.782L56.0547 503ZM-69.9827 492.563L-77.0664 492.563L-77.0664 487.345L-69.9827 487.345L-69.9827 492.563ZM56.0547 482.127L-77.0664 482.127L-77.0664 476.908L56.0547 476.908L56.0547 482.127Z"
125
+ fill="${mainColor}"
126
+ />
127
+ <path
128
+ d="M7.00391 461.251L7.00391 372.437L14.0877 372.437L14.0877 461.251L7.00391 461.251ZM7.00391 367.218L7.00391 362L13.954 362L13.954 367.218L7.00391 367.218ZM35.0716 372.437L35.0716 362L42.0217 362L42.0217 372.437L35.0716 372.437ZM49.1055 377.655L49.1055 372.437L56.1892 372.437L56.1892 377.655L49.1055 377.655ZM49.1055 367.218L49.1055 362L56.0556 362L56.0556 367.218L49.1055 367.218ZM49.1055 461.251L49.1055 382.873L56.0556 382.873L56.0556 461.251L49.1055 461.251ZM35.2053 461.251L35.2053 377.655L42.1554 377.655L42.1554 461.251L35.2053 461.251ZM21.1714 461.251L21.1714 362L28.2552 362L28.2552 461.251L21.1714 461.251Z"
129
+ fill="${mainColor}"
130
+ />
73
131
  </g>
74
132
  <path d="M282 143H53V139H282V143Z" fill="${mainColor}" />
75
133
  </svg>
package/dist/cjs/utils/generateAchievementHTML.js CHANGED
@@ -206,9 +206,13 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
206
206
  left: ${element.x}px;
207
207
  width: ${element.width}px;
208
208
  height: ${element.height}px;
209
+ isolation: isolate;
209
210
  display: flex;
210
211
  align-items: center;
211
212
  justify-content: center;
213
+ will-change: transform, contents;
214
+ transform: translateZ(0);
215
+ backface-visibility: hidden;
212
216
  `;
213
217
  html += `<div style="${optimizedStyles}">`;
214
218
  const svgString = template.Component({
package/dist/esm/templates/badges/BadgeType56.js CHANGED
@@ -70,6 +70,64 @@ function createBadgeType56({ mainColor = "#96A6B4", subColor = "#96A6B4", }) {
70
70
  d="M307.861 403.749L307.861 492.563L300.911 492.563L300.911 403.749L307.861 403.749ZM307.861 497.782L307.861 503L300.911 503L300.911 497.782L307.861 497.782ZM279.793 492.563L279.793 503L272.843 503L272.843 492.563L279.793 492.563ZM265.76 487.345L265.76 492.563L258.676 492.563L258.676 487.345L265.76 487.345ZM265.76 497.782L265.76 503L258.809 503L258.809 497.782L265.76 497.782ZM265.76 403.749L265.76 482.127L258.676 482.127L258.676 403.749L265.76 403.749ZM279.793 403.749L279.793 487.345L272.843 487.345L272.843 403.749L279.793 403.749ZM293.827 403.749L293.827 503L286.743 503L286.743 403.749L293.827 403.749Z"
71
71
  fill="${mainColor}"
72
72
  />
73
+ <path
74
+ fill-rule="evenodd"
75
+ clip-rule="evenodd"
76
+ d="M536.947 503L529.997 503L529.997 497.782L536.947 497.782L536.947 503ZM522.913 503L515.963 503L515.963 497.782L522.913 497.782L522.913 503ZM642 503L543.897 503L543.897 497.782L642 497.782L642 503ZM642 482.127L522.913 482.127L522.913 476.908L642 476.908L642 482.127ZM508.879 466.472L522.913 466.472L522.913 471.69L508.879 471.69L508.879 466.472ZM642 471.69L529.997 471.69L529.997 466.472L642 466.472L642 471.69ZM515.963 482.127L508.879 482.127L508.879 476.908L515.963 476.908L515.963 482.127ZM642 492.563L508.879 492.563L508.879 487.345L642 487.345L642 492.563Z"
77
+ fill="${mainColor}"
78
+ />
79
+ <path
80
+ fill-rule="evenodd"
81
+ clip-rule="evenodd"
82
+ d="M559.003 393.313L566.086 393.313L566.086 398.531L559.003 398.531L559.003 393.313ZM573.036 393.313L579.987 393.313L579.987 398.531L573.036 398.531L573.036 393.313ZM453.949 393.313L552.052 393.313L552.052 398.531L453.949 398.531L453.949 393.313ZM453.949 372.439L573.036 372.439L573.036 377.658L453.949 377.658L453.949 372.439ZM587.07 367.221L573.036 367.221L573.036 362.003L587.07 362.003L587.07 367.221ZM453.949 362.002L566.086 362.002L566.086 367.221L453.949 367.221L453.949 362.002ZM579.987 372.439L587.07 372.439L587.07 377.658L579.987 377.658L579.987 372.439ZM453.949 382.876L587.07 382.876L587.07 388.094L453.949 388.094L453.949 382.876Z"
83
+ fill="${mainColor}"
84
+ />
85
+ <path
86
+ fill-rule="evenodd"
87
+ clip-rule="evenodd"
88
+ d="M510.352 408.557L510.352 404.771L515.297 404.771L584.664 456.443L584.664 460.229L579.719 460.229L510.352 408.557ZM525.187 404.771L535.078 404.771L584.664 441.709L584.664 449.076L525.187 404.771ZM544.968 404.771L554.859 404.771L584.531 426.975L584.531 434.342L544.968 404.771ZM584.664 419.505L564.883 404.771L574.774 404.771L584.664 412.138L584.664 419.505ZM510.352 423.189L510.352 415.822L569.828 460.127L559.938 460.127L510.352 423.189ZM510.352 437.923L510.352 430.556L549.914 460.127L540.023 460.127L510.352 437.923ZM520.242 460.024L510.352 452.657L510.352 445.29L530.133 460.024L520.242 460.024Z"
89
+ fill="${mainColor}"
90
+ />
91
+ <path
92
+ d="M502.998 403.749L502.998 492.563L495.914 492.563L495.914 403.749L502.998 403.749ZM502.998 497.782L502.998 503L496.048 503L496.048 497.782L502.998 497.782ZM474.93 492.563L474.93 503L467.98 503L467.98 492.563L474.93 492.563ZM460.896 487.345L460.896 492.563L453.946 492.563L453.946 487.345L460.896 487.345ZM460.896 497.782L460.896 503L453.812 503L453.813 497.782L460.896 497.782ZM460.896 403.749L460.896 482.127L453.946 482.127L453.946 403.749L460.896 403.749ZM474.93 403.749L474.93 487.345L467.846 487.345L467.846 403.749L474.93 403.749ZM488.964 403.749L488.964 503L482.014 503L482.014 403.749L488.964 403.749Z"
93
+ fill="${mainColor}"
94
+ />
95
+ <path
96
+ d="M63.0078 503L63.0078 414.185L70.0916 414.185L70.0916 503L63.0078 503ZM63.0078 408.967L63.0078 403.749L69.9579 403.749L69.9579 408.967L63.0078 408.967ZM91.0755 414.185L91.0755 403.749L98.0256 403.749L98.0256 414.185L91.0755 414.185ZM105.109 419.404L105.109 414.185L112.059 414.185L112.059 419.404L105.109 419.404ZM105.109 408.967L105.109 403.749L112.193 403.749L112.193 408.967L105.109 408.967ZM105.109 503L105.109 424.622L112.059 424.622L112.059 503L105.109 503ZM91.0755 503L91.0755 419.404L98.1593 419.404L98.1593 503L91.0755 503ZM77.0417 503L77.0417 403.749L83.9918 403.749L83.9918 503L77.0417 503Z"
97
+ fill="${mainColor}"
98
+ />
99
+ <path
100
+ fill-rule="evenodd"
101
+ clip-rule="evenodd"
102
+ d="M168.195 362.002L175.145 362.002L175.145 367.221L168.195 367.221L168.195 362.002ZM182.095 362.003L189.179 362.003L189.179 367.221L182.095 367.221L182.095 362.003ZM63.0078 362.002L161.111 362.002L161.111 367.221L63.0078 367.221L63.0078 362.002ZM63.0078 382.876L182.095 382.876L182.095 388.094L63.0078 388.094L63.0078 382.876ZM196.129 398.531L182.095 398.531L182.095 393.313L196.129 393.313L196.129 398.531ZM63.0078 393.313L175.145 393.313L175.145 398.531L63.0078 398.531L63.0078 393.313ZM189.179 382.876L196.129 382.876L196.129 388.094L189.179 388.094L189.179 382.876ZM63.0078 372.439L196.129 372.439L196.129 377.658L63.0078 377.658L63.0078 372.439Z"
103
+ fill="${mainColor}"
104
+ />
105
+ <path
106
+ fill-rule="evenodd"
107
+ clip-rule="evenodd"
108
+ d="M146.004 471.69L139.054 471.69L139.054 466.472L146.004 466.472L146.004 471.69ZM132.104 471.69L125.02 471.69L125.02 466.472L132.104 466.472L132.104 471.69ZM251.191 471.69L153.088 471.69L153.088 466.472L251.191 466.472L251.191 471.69ZM251.191 492.563L132.104 492.563L132.104 487.345L251.191 487.345L251.191 492.563ZM118.07 497.782L132.104 497.782L132.104 503L118.07 503L118.07 497.782ZM251.191 503L139.054 503L139.054 497.782L251.191 497.782L251.191 503ZM125.02 492.563L118.07 492.563L118.07 487.345L125.02 487.345L125.02 492.563ZM251.191 482.127L118.07 482.127L118.07 476.908L251.191 476.908L251.191 482.127Z"
109
+ fill="${mainColor}"
110
+ />
111
+ <path
112
+ fill-rule="evenodd"
113
+ clip-rule="evenodd"
114
+ d="M194.789 456.443L194.789 460.229L189.844 460.229L120.477 408.557L120.477 404.771L125.422 404.771L194.789 456.443ZM179.953 460.229L170.063 460.229L120.477 423.291L120.477 415.924L179.953 460.229ZM160.172 460.229L150.282 460.229L120.477 438.025L120.477 430.658L160.172 460.229ZM120.61 445.495L140.391 460.229L130.501 460.229L120.61 452.862L120.61 445.495ZM194.923 441.811L194.923 449.178L135.446 404.873L145.337 404.873L194.923 441.811ZM194.923 427.077L194.923 434.444L155.227 404.873L165.251 404.873L194.923 427.077ZM185.032 404.976L194.923 412.343L194.923 419.71L175.008 404.976L185.032 404.976Z"
115
+ fill="${mainColor}"
116
+ />
117
+ <path
118
+ d="M202.141 461.251L202.141 372.437L209.091 372.437L209.091 461.251L202.141 461.251ZM202.141 367.218L202.141 362L209.224 362L209.224 367.218L202.141 367.218ZM230.075 372.437L230.075 362L237.158 362L237.158 372.437L230.075 372.437ZM244.109 377.655L244.109 372.437L251.059 372.437L251.059 377.655L244.109 377.655ZM244.109 367.218L244.109 362L251.059 362L251.059 367.218L244.109 367.218ZM244.109 461.251L244.109 382.873L251.192 382.873L251.192 461.251L244.109 461.251ZM230.075 461.251L230.075 377.655L237.025 377.655L237.025 461.251L230.075 461.251ZM216.174 461.251L216.174 362L223.125 362L223.125 461.251L216.174 461.251Z"
119
+ fill="${mainColor}"
120
+ />
121
+ <path
122
+ fill-rule="evenodd"
123
+ clip-rule="evenodd"
124
+ d="M-48.9987 471.69L-55.9488 471.69L-55.9488 466.472L-48.9987 466.472L-48.9987 471.69ZM-63.0326 471.69L-69.9827 471.69L-69.9827 466.472L-63.0326 466.472L-63.0326 471.69ZM56.0547 471.69L-42.0486 471.69L-42.0486 466.472L56.0547 466.472L56.0547 471.69ZM56.0547 492.563L-63.0326 492.563L-63.0326 487.345L56.0547 487.345L56.0547 492.563ZM-77.0664 497.782L-63.0326 497.782L-63.0326 503L-77.0664 503L-77.0664 497.782ZM56.0547 503L-55.9488 503L-55.9488 497.782L56.0547 497.782L56.0547 503ZM-69.9827 492.563L-77.0664 492.563L-77.0664 487.345L-69.9827 487.345L-69.9827 492.563ZM56.0547 482.127L-77.0664 482.127L-77.0664 476.908L56.0547 476.908L56.0547 482.127Z"
125
+ fill="${mainColor}"
126
+ />
127
+ <path
128
+ d="M7.00391 461.251L7.00391 372.437L14.0877 372.437L14.0877 461.251L7.00391 461.251ZM7.00391 367.218L7.00391 362L13.954 362L13.954 367.218L7.00391 367.218ZM35.0716 372.437L35.0716 362L42.0217 362L42.0217 372.437L35.0716 372.437ZM49.1055 377.655L49.1055 372.437L56.1892 372.437L56.1892 377.655L49.1055 377.655ZM49.1055 367.218L49.1055 362L56.0556 362L56.0556 367.218L49.1055 367.218ZM49.1055 461.251L49.1055 382.873L56.0556 382.873L56.0556 461.251L49.1055 461.251ZM35.2053 461.251L35.2053 377.655L42.1554 377.655L42.1554 461.251L35.2053 461.251ZM21.1714 461.251L21.1714 362L28.2552 362L28.2552 461.251L21.1714 461.251Z"
129
+ fill="${mainColor}"
130
+ />
73
131
  </g>
74
132
  <path d="M282 143H53V139H282V143Z" fill="${mainColor}" />
75
133
  </svg>
package/dist/esm/utils/generateAchievementHTML.js CHANGED
@@ -206,9 +206,13 @@ async function generateAchievementHTML(achievementInfo, options = {}) {
206
206
  left: ${element.x}px;
207
207
  width: ${element.width}px;
208
208
  height: ${element.height}px;
209
+ isolation: isolate;
209
210
  display: flex;
210
211
  align-items: center;
211
212
  justify-content: center;
213
+ will-change: transform, contents;
214
+ transform: translateZ(0);
215
+ backface-visibility: hidden;
212
216
  `;
213
217
  html += `<div style="${optimizedStyles}">`;
214
218
  const svgString = template.Component({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blockspoon/cert-badge-renderer",
3
- "version": "1.0.49",
3
+ "version": "1.0.51",
4
4
  "description": "Render certificate and badge designs from Kolleges achievement data into HTML, PNG, or Base64.",
5
5
  "main": "./dist/esm/index.js",
6
6
  "exports": {
package/src/templates/badges/BadgeType56.ts CHANGED
@@ -72,8 +72,66 @@ export function createBadgeType56({
72
72
  d="M307.861 403.749L307.861 492.563L300.911 492.563L300.911 403.749L307.861 403.749ZM307.861 497.782L307.861 503L300.911 503L300.911 497.782L307.861 497.782ZM279.793 492.563L279.793 503L272.843 503L272.843 492.563L279.793 492.563ZM265.76 487.345L265.76 492.563L258.676 492.563L258.676 487.345L265.76 487.345ZM265.76 497.782L265.76 503L258.809 503L258.809 497.782L265.76 497.782ZM265.76 403.749L265.76 482.127L258.676 482.127L258.676 403.749L265.76 403.749ZM279.793 403.749L279.793 487.345L272.843 487.345L272.843 403.749L279.793 403.749ZM293.827 403.749L293.827 503L286.743 503L286.743 403.749L293.827 403.749Z"
73
73
  fill="${mainColor}"
74
74
  />
75
+ <path
76
+ fill-rule="evenodd"
77
+ clip-rule="evenodd"
78
+ d="M536.947 503L529.997 503L529.997 497.782L536.947 497.782L536.947 503ZM522.913 503L515.963 503L515.963 497.782L522.913 497.782L522.913 503ZM642 503L543.897 503L543.897 497.782L642 497.782L642 503ZM642 482.127L522.913 482.127L522.913 476.908L642 476.908L642 482.127ZM508.879 466.472L522.913 466.472L522.913 471.69L508.879 471.69L508.879 466.472ZM642 471.69L529.997 471.69L529.997 466.472L642 466.472L642 471.69ZM515.963 482.127L508.879 482.127L508.879 476.908L515.963 476.908L515.963 482.127ZM642 492.563L508.879 492.563L508.879 487.345L642 487.345L642 492.563Z"
79
+ fill="${mainColor}"
80
+ />
81
+ <path
82
+ fill-rule="evenodd"
83
+ clip-rule="evenodd"
84
+ d="M559.003 393.313L566.086 393.313L566.086 398.531L559.003 398.531L559.003 393.313ZM573.036 393.313L579.987 393.313L579.987 398.531L573.036 398.531L573.036 393.313ZM453.949 393.313L552.052 393.313L552.052 398.531L453.949 398.531L453.949 393.313ZM453.949 372.439L573.036 372.439L573.036 377.658L453.949 377.658L453.949 372.439ZM587.07 367.221L573.036 367.221L573.036 362.003L587.07 362.003L587.07 367.221ZM453.949 362.002L566.086 362.002L566.086 367.221L453.949 367.221L453.949 362.002ZM579.987 372.439L587.07 372.439L587.07 377.658L579.987 377.658L579.987 372.439ZM453.949 382.876L587.07 382.876L587.07 388.094L453.949 388.094L453.949 382.876Z"
85
+ fill="${mainColor}"
86
+ />
87
+ <path
88
+ fill-rule="evenodd"
89
+ clip-rule="evenodd"
90
+ d="M510.352 408.557L510.352 404.771L515.297 404.771L584.664 456.443L584.664 460.229L579.719 460.229L510.352 408.557ZM525.187 404.771L535.078 404.771L584.664 441.709L584.664 449.076L525.187 404.771ZM544.968 404.771L554.859 404.771L584.531 426.975L584.531 434.342L544.968 404.771ZM584.664 419.505L564.883 404.771L574.774 404.771L584.664 412.138L584.664 419.505ZM510.352 423.189L510.352 415.822L569.828 460.127L559.938 460.127L510.352 423.189ZM510.352 437.923L510.352 430.556L549.914 460.127L540.023 460.127L510.352 437.923ZM520.242 460.024L510.352 452.657L510.352 445.29L530.133 460.024L520.242 460.024Z"
91
+ fill="${mainColor}"
92
+ />
93
+ <path
94
+ d="M502.998 403.749L502.998 492.563L495.914 492.563L495.914 403.749L502.998 403.749ZM502.998 497.782L502.998 503L496.048 503L496.048 497.782L502.998 497.782ZM474.93 492.563L474.93 503L467.98 503L467.98 492.563L474.93 492.563ZM460.896 487.345L460.896 492.563L453.946 492.563L453.946 487.345L460.896 487.345ZM460.896 497.782L460.896 503L453.812 503L453.813 497.782L460.896 497.782ZM460.896 403.749L460.896 482.127L453.946 482.127L453.946 403.749L460.896 403.749ZM474.93 403.749L474.93 487.345L467.846 487.345L467.846 403.749L474.93 403.749ZM488.964 403.749L488.964 503L482.014 503L482.014 403.749L488.964 403.749Z"
95
+ fill="${mainColor}"
96
+ />
97
+ <path
98
+ d="M63.0078 503L63.0078 414.185L70.0916 414.185L70.0916 503L63.0078 503ZM63.0078 408.967L63.0078 403.749L69.9579 403.749L69.9579 408.967L63.0078 408.967ZM91.0755 414.185L91.0755 403.749L98.0256 403.749L98.0256 414.185L91.0755 414.185ZM105.109 419.404L105.109 414.185L112.059 414.185L112.059 419.404L105.109 419.404ZM105.109 408.967L105.109 403.749L112.193 403.749L112.193 408.967L105.109 408.967ZM105.109 503L105.109 424.622L112.059 424.622L112.059 503L105.109 503ZM91.0755 503L91.0755 419.404L98.1593 419.404L98.1593 503L91.0755 503ZM77.0417 503L77.0417 403.749L83.9918 403.749L83.9918 503L77.0417 503Z"
99
+ fill="${mainColor}"
100
+ />
101
+ <path
102
+ fill-rule="evenodd"
103
+ clip-rule="evenodd"
104
+ d="M168.195 362.002L175.145 362.002L175.145 367.221L168.195 367.221L168.195 362.002ZM182.095 362.003L189.179 362.003L189.179 367.221L182.095 367.221L182.095 362.003ZM63.0078 362.002L161.111 362.002L161.111 367.221L63.0078 367.221L63.0078 362.002ZM63.0078 382.876L182.095 382.876L182.095 388.094L63.0078 388.094L63.0078 382.876ZM196.129 398.531L182.095 398.531L182.095 393.313L196.129 393.313L196.129 398.531ZM63.0078 393.313L175.145 393.313L175.145 398.531L63.0078 398.531L63.0078 393.313ZM189.179 382.876L196.129 382.876L196.129 388.094L189.179 388.094L189.179 382.876ZM63.0078 372.439L196.129 372.439L196.129 377.658L63.0078 377.658L63.0078 372.439Z"
105
+ fill="${mainColor}"
106
+ />
107
+ <path
108
+ fill-rule="evenodd"
109
+ clip-rule="evenodd"
110
+ d="M146.004 471.69L139.054 471.69L139.054 466.472L146.004 466.472L146.004 471.69ZM132.104 471.69L125.02 471.69L125.02 466.472L132.104 466.472L132.104 471.69ZM251.191 471.69L153.088 471.69L153.088 466.472L251.191 466.472L251.191 471.69ZM251.191 492.563L132.104 492.563L132.104 487.345L251.191 487.345L251.191 492.563ZM118.07 497.782L132.104 497.782L132.104 503L118.07 503L118.07 497.782ZM251.191 503L139.054 503L139.054 497.782L251.191 497.782L251.191 503ZM125.02 492.563L118.07 492.563L118.07 487.345L125.02 487.345L125.02 492.563ZM251.191 482.127L118.07 482.127L118.07 476.908L251.191 476.908L251.191 482.127Z"
111
+ fill="${mainColor}"
112
+ />
113
+ <path
114
+ fill-rule="evenodd"
115
+ clip-rule="evenodd"
116
+ d="M194.789 456.443L194.789 460.229L189.844 460.229L120.477 408.557L120.477 404.771L125.422 404.771L194.789 456.443ZM179.953 460.229L170.063 460.229L120.477 423.291L120.477 415.924L179.953 460.229ZM160.172 460.229L150.282 460.229L120.477 438.025L120.477 430.658L160.172 460.229ZM120.61 445.495L140.391 460.229L130.501 460.229L120.61 452.862L120.61 445.495ZM194.923 441.811L194.923 449.178L135.446 404.873L145.337 404.873L194.923 441.811ZM194.923 427.077L194.923 434.444L155.227 404.873L165.251 404.873L194.923 427.077ZM185.032 404.976L194.923 412.343L194.923 419.71L175.008 404.976L185.032 404.976Z"
117
+ fill="${mainColor}"
118
+ />
119
+ <path
120
+ d="M202.141 461.251L202.141 372.437L209.091 372.437L209.091 461.251L202.141 461.251ZM202.141 367.218L202.141 362L209.224 362L209.224 367.218L202.141 367.218ZM230.075 372.437L230.075 362L237.158 362L237.158 372.437L230.075 372.437ZM244.109 377.655L244.109 372.437L251.059 372.437L251.059 377.655L244.109 377.655ZM244.109 367.218L244.109 362L251.059 362L251.059 367.218L244.109 367.218ZM244.109 461.251L244.109 382.873L251.192 382.873L251.192 461.251L244.109 461.251ZM230.075 461.251L230.075 377.655L237.025 377.655L237.025 461.251L230.075 461.251ZM216.174 461.251L216.174 362L223.125 362L223.125 461.251L216.174 461.251Z"
121
+ fill="${mainColor}"
122
+ />
123
+ <path
124
+ fill-rule="evenodd"
125
+ clip-rule="evenodd"
126
+ d="M-48.9987 471.69L-55.9488 471.69L-55.9488 466.472L-48.9987 466.472L-48.9987 471.69ZM-63.0326 471.69L-69.9827 471.69L-69.9827 466.472L-63.0326 466.472L-63.0326 471.69ZM56.0547 471.69L-42.0486 471.69L-42.0486 466.472L56.0547 466.472L56.0547 471.69ZM56.0547 492.563L-63.0326 492.563L-63.0326 487.345L56.0547 487.345L56.0547 492.563ZM-77.0664 497.782L-63.0326 497.782L-63.0326 503L-77.0664 503L-77.0664 497.782ZM56.0547 503L-55.9488 503L-55.9488 497.782L56.0547 497.782L56.0547 503ZM-69.9827 492.563L-77.0664 492.563L-77.0664 487.345L-69.9827 487.345L-69.9827 492.563ZM56.0547 482.127L-77.0664 482.127L-77.0664 476.908L56.0547 476.908L56.0547 482.127Z"
127
+ fill="${mainColor}"
128
+ />
129
+ <path
130
+ d="M7.00391 461.251L7.00391 372.437L14.0877 372.437L14.0877 461.251L7.00391 461.251ZM7.00391 367.218L7.00391 362L13.954 362L13.954 367.218L7.00391 367.218ZM35.0716 372.437L35.0716 362L42.0217 362L42.0217 372.437L35.0716 372.437ZM49.1055 377.655L49.1055 372.437L56.1892 372.437L56.1892 377.655L49.1055 377.655ZM49.1055 367.218L49.1055 362L56.0556 362L56.0556 367.218L49.1055 367.218ZM49.1055 461.251L49.1055 382.873L56.0556 382.873L56.0556 461.251L49.1055 461.251ZM35.2053 461.251L35.2053 377.655L42.1554 377.655L42.1554 461.251L35.2053 461.251ZM21.1714 461.251L21.1714 362L28.2552 362L28.2552 461.251L21.1714 461.251Z"
131
+ fill="${mainColor}"
132
+ />
75
133
  </g>
76
134
  <path d="M282 143H53V139H282V143Z" fill="${mainColor}" />
77
135
  </svg>
78
136
  `;
79
- }
137
+ }
package/src/utils/generateAchievementHTML.ts CHANGED
@@ -259,9 +259,13 @@ export async function generateAchievementHTML(
259
259
  left: ${element.x}px;
260
260
  width: ${element.width}px;
261
261
  height: ${element.height}px;
262
+ isolation: isolate;
262
263
  display: flex;
263
264
  align-items: center;
264
265
  justify-content: center;
266
+ will-change: transform, contents;
267
+ transform: translateZ(0);
268
+ backface-visibility: hidden;
265
269
  `;
266
270
 
267
271
  html += `<div style="${optimizedStyles}">`;