@blockspoon/cert-badge-renderer 1.0.1

package/src/templates/ribbons/RibbonType23_1.ts

@@ -0,0 +1,106 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType23_1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 543 156"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M98.4681 3.13996C97.0985 1.40658 94.5831 1.11165 92.8497 2.48121L6.28591 70.8762C3.79463 72.8446 4.4796 76.7915 7.48844 77.8054L55.942 94.1322C57.4422 94.6377 58.5032 95.9805 58.648 97.557L63.3238 148.473C63.6142 151.635 67.2956 153.214 69.7868 151.246L156.351 82.8509C158.084 81.4813 158.379 78.9659 157.009 77.2325L98.4681 3.13996Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M91.4922 13.1328L8.26989 78.8877"
+        stroke="white"
+        stroke-width="2"
+      />
+      <path
+        d="M145.383 81.3359L62.1605 147.091"
+        stroke="white"
+        stroke-width="2"
+      />
+      <path
+        d="M80.2924 12.4021L25.3526 55.8107L88.8535 136.18L148.986 88.8385L80.2924 12.4021Z"
+        fill="url(#paint0_linear_2399_1180)"
+      />
+      <path
+        d="M445.016 3.13953C446.386 1.40616 448.901 1.11122 450.635 2.48078L537.198 70.8758C539.69 72.8442 539.005 76.7911 535.996 77.8049L487.542 94.1318C486.042 94.6373 484.981 95.9801 484.836 97.5566L480.161 148.473C479.87 151.634 476.189 153.214 473.698 151.245L387.134 82.8505C385.4 81.4809 385.105 78.9655 386.475 77.2321L445.016 3.13953Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M451.992 13.1338L535.214 78.8886"
+        stroke="white"
+        stroke-width="2"
+      />
+      <path
+        d="M398.102 81.3369L481.324 147.092"
+        stroke="white"
+        stroke-width="2"
+      />
+      <path
+        d="M463.192 12.4016L518.132 55.8102L454.631 136.18L394.499 88.8381L463.192 12.4016Z"
+        fill="url(#paint1_linear_2399_1180)"
+      />
+      <path
+        d="M115.996 41L16.9961 43.0199L132.496 101L115.996 41Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M115.996 41L16.9961 43.0199L132.496 101L115.996 41Z"
+        fill="black"
+        fill-opacity="0.5"
+      />
+      <path
+        d="M426.996 41L525.996 43.0199L410.496 101L426.996 41Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M426.996 41L525.996 43.0199L410.496 101L426.996 41Z"
+        fill="black"
+        fill-opacity="0.5"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2399_1180"
+          x1="109.498"
+          y1="23.0014"
+          x2="50.3698"
+          y2="84.9932"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2399_1180"
+          x1="433.986"
+          y1="23.001"
+          x2="493.115"
+          y2="84.9928"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType24.ts

@@ -0,0 +1,80 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType24({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 501 183"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M50.4961 149H476.496C471.113 162.848 467.873 170.338 461.496 183H65.723C58.1698 169.968 55.1254 163.245 50.4961 149Z"
+        fill="black"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M484.844 30.0006L13.4967 30L25.5963 9.53674e-06H475.445L484.844 30.0006Z"
+        fill="white"
+      />
+      <rect
+        x="0.496094"
+        y="6"
+        width="500"
+        height="162"
+        rx="10"
+        fill="url(#${paintId0})"
+      />
+      <rect
+        x="0.496094"
+        y="17.5234"
+        width="500"
+        height="138.953"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M-20.7969 23.9938C-16.1165 18.8998 -12.6654 17.5951 -5.38263 17.4417L501.746 17.4417C511.549 17.3086 516.173 18.7676 521.785 26.0101"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+      <path
+        d="M-20.7969 150.811C-16.1165 155.905 -12.6654 157.21 -5.38263 157.363L501.746 157.363C511.549 157.496 516.173 156.037 521.785 148.795"
+        stroke="white"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="0.496094"
+          y1="19.1029"
+          x2="518.305"
+          y2="135.095"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType24_1.ts

@@ -0,0 +1,73 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType24_1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 217 187"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <g clip-path="url(#clip0_2487_140)">
+        <path
+          d="M107.142 -1.66366L211.32 34.212C214.895 35.3997 216.492 39.9406 214.561 43.445L187.147 69.5479C186.654 70.4657 186.363 71.5026 186.328 72.5669L186.245 115.131C186.092 119.781 181.543 122.672 177.777 120.525L45.6875 47.9715C42.6108 46.2214 41.6565 41.9268 43.6263 38.8162L100.671 0.807069C102.099 -1.46208 104.719 -2.45679 107.142 -1.66366Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M36.5898 32.1982L185.963 112.587"
+          stroke="white"
+          stroke-width="2"
+        />
+        <path
+          d="M107 10.6572L212.187 45.0667"
+          stroke="white"
+          stroke-width="2"
+        />
+        <path
+          d="M120.222 1.30252L203.867 31.4689C198.138 42.5324 196.882 50.473 143.426 86.4574L151.434 105.972L97.9403 76.9254L120.222 1.30252Z"
+          fill="black"
+          fill-opacity="0.4"
+        />
+        <path
+          d="M108.967 44.4656L145.513 151.292C146.753 154.815 144.341 158.603 140.604 158.99L85.7475 152.455C84.7767 152.566 83.8373 152.905 83.0294 153.465L44.7449 185.954C41.2154 188.398 36.3817 186.347 35.7387 182.141L-0.328264 30.6006C-0.856817 27.1668 1.75395 24.03 5.22151 23.8919L103.306 40.6411C105.831 40.5333 108.118 42.0845 108.967 44.4656Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M6.93359 23.0526L46.3657 184.844"
+          stroke="white"
+          stroke-width="2"
+        />
+        <path
+          d="M87 10.1361L137.114 158.415"
+          stroke="white"
+          stroke-width="2"
+        />
+        <path
+          d="M126.243 95.2616C104.357 110.369 60.2952 132.984 26.7089 143.809L11.5364 80.9007L132.15 57.9559L151.348 105.87L124.936 91.3938L126.243 95.2616Z"
+          fill="black"
+          fill-opacity="0.4"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_2487_140">
+          <rect width="217" height="187" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType26.ts

@@ -0,0 +1,116 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType26({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId4 = `paint4_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 546 166"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M485 4C485 1.79086 486.791 0 489 0H540.59C543.279 0 545.202 2.60126 544.414 5.1727L529.647 53.3273C529.413 54.0915 529.413 54.9085 529.647 55.6727L544.414 103.827C545.202 106.399 543.279 109 540.59 109H489C486.791 109 485 107.209 485 105V4Z"
+        fill="${subColor}"
+      />
+      <path d="M490.848 8L544.01 8.00001" stroke="white" stroke-width="3" />
+      <path
+        d="M490.848 100.5L544.01 100.5"
+        stroke="white"
+        stroke-width="3"
+      />
+      <rect
+        x="485"
+        width="45"
+        height="109"
+        fill="url(#paint0_linear_2399_1191)"
+      />
+      <path
+              d="M62 4C62 1.79086 60.2091 0 58 0H6.41035C3.72086 0 1.79807 2.60126 2.58621 5.1727L17.3527 53.3273C17.5871 54.0915 17.5871 54.9085 17.3527 55.6727L2.58621 103.827C1.79807 106.399 3.72086 109 6.41035 109H58C60.2091 109 62 107.209 62 105V4Z"
+        fill="${subColor}"
+      />
+      <path d="M2.99023 8L56.1523 8.00001" stroke="white" stroke-width="3" />
+      <path
+        d="M2.99023 100.5L56.1523 100.5"
+        stroke="white"
+        stroke-width="3"
+      />
+      <rect
+        width="45"
+        height="109"
+        transform="matrix(-1 0 0 1 62 0)"
+        fill="url(#paint1_linear_2399_1191)"
+      />
+      <rect x="62" y="4" width="423" height="105" rx="4" fill="${mainColor}" />
+      <rect
+        x="62"
+        y="14"
+        width="423"
+        height="85"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <path d="M62 14L485 14" stroke="white" stroke-width="3" />
+      <path d="M62 99L485 99" stroke="white" stroke-width="3" />
+      <rect
+        x="62"
+        y="109"
+        width="423"
+        height="57"
+        fill="url(#${paintId4})"
+        fill-opacity="0.4"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2399_1191"
+          x1="530"
+          y1="0"
+          x2="485"
+          y2="0"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.4" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2399_1191"
+          x1="45"
+          y1="0"
+          x2="0"
+          y2="0"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.4" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId4}"
+          x1="273.5"
+          y1="109"
+          x2="273.5"
+          y2="166"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType27.ts

@@ -0,0 +1,97 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType27({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+  extraColor1 = "#96A6B4",
+}: ISvgProps): string {
+  const paintId2 = `paint2_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 526 126"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M13.7383 125.824C1.82189 115.651 -1.7368 111.495 0.746487 101.342C9.71646 93.4275 14.9489 91.4801 33.2383 92.3237L13.7383 125.824Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M13.7383 125.824C1.82189 115.651 -1.7368 111.495 0.746487 101.342C9.71646 93.4275 14.9489 91.4801 33.2383 92.3237L13.7383 125.824Z"
+        fill="black"
+        fill-opacity="0.4"
+      />
+      <path
+        d="M511.255 126.005C523.171 115.832 527.222 111.476 524.738 101.324C515.768 93.4087 510.044 91.6616 491.755 92.5052L511.255 126.005Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M511.255 126.005C523.171 115.832 527.222 111.476 524.738 101.324C515.768 93.4087 510.044 91.6616 491.755 92.5052L511.255 126.005Z"
+        fill="black"
+        fill-opacity="0.4"
+      />
+      <path
+        d="M500.288 106.349H25.0273L34.2383 90.3219C213.163 79.4565 311.807 79.0329 490.738 90.322L500.288 106.349Z"
+        fill="url(#paint0_linear_2490_282)"
+      />
+      <path
+        d="M438.506 1.90735e-06H86.9707L78.3242 14.8589L447.313 14.8572L438.506 1.90735e-06Z"
+        fill="url(#paint1_linear_2490_282)"
+      />
+      <path
+        d="M494.267 94.5083C497.126 94.6928 516.252 96.0864 524.738 101.324L521.226 95.8701C521.226 95.8701 521.233 95.8701 521.239 95.8701C516.686 88.8001 512.132 81.7364 507.579 74.6664L507.546 74.6155C498.303 60.2782 489.067 45.9345 479.824 31.5972C473.796 22.2426 463.674 16.1844 452.452 15.249C394.893 10.4317 332.606 7.42803 266.153 7.32621C197.094 7.22439 132.505 10.2662 73.0119 15.2426C61.8028 16.178 51.6869 22.2362 45.6651 31.5908C36.4223 45.9345 27.1795 60.2782 17.9367 74.6218L6.99932 91.6001C6.08086 93.0255 5.16241 94.4446 4.25041 95.8701L0.738281 101.324C9.21785 96.0928 28.3114 94.6928 31.2026 94.5083C104.712 90.9955 181.532 88.9973 261.432 88.9782C342.275 88.9591 419.969 90.9573 494.274 94.5083H494.267Z"
+        fill="url(#${paintId2})"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2490_282"
+          x1="225.334"
+          y1="91.49"
+          x2="225.334"
+          y2="106.347"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.4" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2490_282"
+          x1="249.43"
+          y1="28.5673"
+          x2="249.43"
+          y2="0.00165832"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.4" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId2}"
+          x1="42.3591"
+          y1="35.9098"
+          x2="517.596"
+          y2="108.977"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="0.673474" stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType27_1.ts

@@ -0,0 +1,64 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType27_1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 591 297"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M8.10711 212.922C5.22678 211.204 5.61214 206.917 8.75267 205.741L550.12 2.91916C553.261 1.74257 556.368 4.72083 555.325 7.90838L540.149 54.3103C539.567 56.0879 540.295 58.0311 541.902 58.9892L583.832 83.9963C586.712 85.7141 586.327 90.0009 583.186 91.1775L41.8184 293.999C38.6778 295.176 35.5707 292.198 36.6132 289.01L51.7899 242.608C52.3713 240.83 51.6432 238.887 50.0369 237.929L8.10711 212.922Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M553.501 102.339L488.739 25.908L514.27 16.4573L566.669 97.1601L553.501 102.339Z"
+        fill="url(#paint0_linear_2399_1194)"
+      />
+      <path
+        d="M45.6903 191.848L93.548 274.536L73.4327 282.06L29.9448 197.972L45.6903 191.848Z"
+        fill="url(#paint1_linear_2399_1194)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2399_1194"
+          x1="538.656"
+          y1="57.6766"
+          x2="522.212"
+          y2="68.5312"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0" />
+          <stop offset="1" stop-opacity="0.5" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2399_1194"
+          x1="52.7447"
+          y1="236.977"
+          x2="76.3464"
+          y2="224.214"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0" />
+          <stop offset="1" stop-opacity="0.5" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}