@blockspoon/cert-badge-renderer 1.0.1

package/src/templates/ribbons/RibbonType45.ts

@@ -0,0 +1,145 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType45({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId2 = `paint2_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 546 197"
+      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 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 105V0Z"
+        fill="${mainColor}"
+      />
+      <rect
+        x="485"
+        width="43"
+        height="109"
+        fill="url(#paint0_linear_2407_453)"
+      />
+      <path
+        d="M60 0H5.38448C2.70255 0 0.780418 2.58741 1.55488 5.15509L16.09 53.3449C16.3172 54.0982 16.3172 54.9018 16.09 55.6551L1.55488 103.845C0.780415 106.413 2.70254 109 5.38448 109H56C58.2091 109 60 107.209 60 105V0Z"
+        fill="${mainColor}"
+      />
+      <rect
+        width="47"
+        height="109"
+        transform="matrix(-1 0 0 1 60 0)"
+        fill="url(#paint1_linear_2407_453)"
+      />
+      <rect
+        x="33"
+        y="24"
+        width="480"
+        height="148.797"
+        rx="4"
+        fill="url(#${paintId2})"
+      />
+      <rect
+        x="33"
+        y="34"
+        width="480"
+        height="129"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <path d="M486 24V0L509 24H486Z" fill="${mainColor}" />
+      <path d="M486 24V0L509 24H486Z" fill="black" fill-opacity="0.4" />
+      <path d="M60 24V0L35 24H60Z" fill="${mainColor}" />
+      <path d="M60 24V0L35 24H60Z" fill="black" fill-opacity="0.4" />
+      <path d="M33 34L513 34" stroke="white" stroke-width="3" />
+      <path d="M33 162.797L513 162.797" stroke="white" stroke-width="3" />
+      <rect
+        x="486"
+        y="24"
+        width="426"
+        height="24"
+        transform="rotate(180 486 24)"
+        fill="url(#paint3_linear_2407_453)"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M62.8047 172.797H483.308C477.931 184.02 468.604 187.88 454.267 196.797H91.6191C73.109 185.053 67.1222 182.906 62.8047 172.797Z"
+        fill="url(#paint4_linear_2407_453)"
+        fill-opacity="0.3"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2407_453"
+          x1="444.905"
+          y1="48"
+          x2="517.303"
+          y2="32.6415"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2407_453"
+          x1="-43.8243"
+          y1="48"
+          x2="34.65"
+          y2="29.8038"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId2}"
+          x1="33"
+          y1="98.3984"
+          x2="513"
+          y2="98.3984"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="0.215" stop-color="${subColor}" />
+          <stop offset="0.75" stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_2407_453"
+          x1="704.849"
+          y1="30"
+          x2="704.849"
+          y2="48"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_2407_453"
+          x1="280.213"
+          y1="178.797"
+          x2="280.213"
+          y2="196.797"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType46.ts

@@ -0,0 +1,40 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType46({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 136 146"
+      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
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M135.963 0.0987041L0.173638 0L0.0195312 145.841H4.33039L68.0682 97.03L131.652 145.94H135.809L135.963 0.0987041Z"
+        fill="${mainColor}"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M67.0693 95.7607L2.03731 145.84H0.0195312L0.174891 0.000366211L133.964 0.100422L133.809 145.94H131.946L67.0693 95.7607ZM67.0693 93.8614L132.102 144.041V1.29988L2.03731 1.19982V144.041L67.0693 93.8614Z"
+        fill="${subColor}"
+      />
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType5.ts

@@ -0,0 +1,52 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType5({
+  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 371 251"
+      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="M370.097 61.4513C370.097 166.121 287.45 250.973 185.5 250.973C83.5508 250.973 0.904297 166.121 0.904297 61.4513C0.904297 -43.2188 83.5508 17.5327 185.5 17.5327C287.45 17.5327 370.097 -43.2188 370.097 61.4513Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M355.074 50.1775C355.074 118.254 294.267 174.426 184.851 174.426C75.4358 174.426 14.6289 118.254 14.6289 50.1775C14.6289 -17.8989 90.8401 27.9991 184.851 27.9991C278.863 27.9991 355.074 -17.8989 355.074 50.1775Z"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="82.7979"
+          y1="-16.0445"
+          x2="335.435"
+          y2="193.158"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType53.ts

@@ -0,0 +1,63 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType53({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 536 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;
+      "
+    >
+      <path
+        d="M30 169L506.5 169L499.5 187H36.5L30 169Z"
+        fill="url(#paint0_linear_2407_463)"
+        fill-opacity="0.4"
+      />
+      <path
+        d="M506.5 18.0001L30 18L37 1.99902e-05L500 6.04669e-05L506.5 18.0001Z"
+        fill="url(#paint1_linear_2407_463)"
+        fill-opacity="0.4"
+      />
+      <rect y="18" width="536" height="151" rx="4" fill="${mainColor}" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2407_463"
+          x1="322.756"
+          y1="169"
+          x2="322.756"
+          y2="187"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.5" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2407_463"
+          x1="213.744"
+          y1="18"
+          x2="213.744"
+          y2="3.54416e-05"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.5" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType57.ts

@@ -0,0 +1,54 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType57({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 176 204"
+      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="M20 6H156L176 204L88 166.834L0 204L20 6Z" fill="${mainColor}" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M169.999 143.408C162.315 144.053 154.676 144.764 147.591 146.454C140.448 148.433 133.305 151.636 126.066 154.881C113.805 160.379 101.27 166 87.999 166C74.9378 166 62.8275 160.556 50.7854 155.142C43.3687 151.808 35.9779 148.486 28.4068 146.454C21.2743 144.753 13.6617 144.044 6 143.396L16.7338 42H159.264L169.999 143.408Z"
+        fill="url(#paint0_linear_2407_468)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M54 175.194V0H121V174.771L88 160.834L54 175.194Z"
+        fill="${subColor}"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2407_468"
+          x1="87.9997"
+          y1="58"
+          x2="87.9997"
+          y2="146"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.4" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType6.ts

@@ -0,0 +1,75 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType6({
+  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 398 284"
+      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="M176.868 272.66L20.0509 182.428C7.64616 175.29 0 162.069 0 147.758V20C0 8.95431 8.9543 0 20 0H378C389.046 0 398 8.95432 398 20V147.478C398 161.939 390.194 175.274 377.585 182.355L216.402 272.867C204.109 279.77 189.089 279.692 176.868 272.66Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M169 181.5H229"
+        stroke="white"
+        stroke-width="3"
+        stroke-linecap="round"
+      />
+      <path
+        d="M177.267 263.643L29.003 180.016C16.4309 172.925 8.6543 159.61 8.6543 145.176V28.3047C8.6543 17.259 17.6086 8.30469 28.6543 8.30469H369.345C380.391 8.30469 389.345 17.259 389.345 28.3047V144.897C389.345 159.48 381.409 172.907 368.634 179.939L216.208 263.845C204.069 270.527 189.337 270.451 177.267 263.643Z"
+        stroke="black"
+        stroke-opacity="0.4"
+        stroke-width="3"
+      />
+      <path
+        d="M10.0782 29.6797C10.0782 18.634 19.0325 9.67969 30.0782 9.67969H367.92C378.966 9.67969 387.92 18.634 387.92 29.6797V150.738C384.898 164.293 379.876 170.246 368.438 179.604H28.3479L16.3839 168.102L10.0781 153.9L10.0782 29.6797Z"
+        fill="url(#paint1_linear_2364_546)"
+        fill-opacity="0.8"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="34.6595"
+          y1="-23.0027"
+          x2="338.979"
+          y2="245.514"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2364_546"
+          x1="198.999"
+          y1="9.67969"
+          x2="198.999"
+          y2="179.604"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="white" />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType61.ts

@@ -0,0 +1,112 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType61({
+  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 488 180"
+      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;
+      "
+    >
+      <rect
+        y="16.84"
+        width="488"
+        height="146.16"
+        rx="4"
+        fill="url(#${paintId0})"
+      />
+      <path d="M475 17V7L485 17H475Z" fill="${mainColor}" />
+      <path d="M475 17V7L485 17H475Z" fill="black" fill-opacity="0.4" />
+      <path d="M12 17V7L2 17H12Z" fill="${mainColor}" />
+      <path d="M12 17V7L2 17H12Z" fill="black" fill-opacity="0.4" />
+      <rect
+        y="34"
+        width="488"
+        height="112"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M0 32L488 32"
+        stroke="white"
+        stroke-opacity="0.6"
+        stroke-width="3"
+      />
+      <path
+        d="M0 148L488 148"
+        stroke="white"
+        stroke-opacity="0.6"
+        stroke-width="3"
+      />
+      <rect
+        x="12"
+        y="163"
+        width="463"
+        height="17"
+        fill="url(#paint1_linear_2407_491)"
+      />
+      <rect
+        x="475"
+        y="17"
+        width="463"
+        height="17"
+        transform="rotate(-180 475 17)"
+        fill="url(#paint2_linear_2407_491)"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="0"
+          y1="89.92"
+          x2="488"
+          y2="89.92"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="0.215" stop-color="${subColor}" />
+          <stop offset="0.75" stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2407_491"
+          x1="243.5"
+          y1="163"
+          x2="243.5"
+          y2="180"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.2" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2407_491"
+          x1="706.5"
+          y1="17"
+          x2="706.5"
+          y2="34"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.1" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType7.ts

@@ -0,0 +1,113 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType7({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+  const paintId1 = `paint1_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 502 199"
+      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="M26.1447 0H495V170L11 35.5L26.1447 0Z" fill="white" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.8398 6C7.10786 6 0.839844 12.268 0.839844 20V162C0.839844 162.03 0.839939 162.06 0.840128 162.09V182.635C1.93276 181.298 6.78412 176.901 17.4946 176H484.494C495.204 176.901 500.056 181.298 501.148 182.635V162.592C501.157 162.396 501.161 162.198 501.161 162V20C501.161 12.268 494.893 6 487.161 6H14.8398Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M0.839844 25.1651C5.05834 19.9148 8.77052 18.8231 17.0894 18.9453H487.107C494.077 19.6574 497.205 21.2604 501.16 27.3069V167.679C496.025 163.48 489.896 162.805 476.177 162.941H14.0422C7.88738 163.423 5.08344 164.87 0.839844 168.689V25.1651Z"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <mask
+        id="mask0_2481_282"
+        style="mask-type: alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="6"
+        width="502"
+        height="170"
+      >
+        <path
+          d="M0.839844 20C0.839844 12.268 7.10786 6 14.8398 6H487.161C494.893 6 501.161 12.268 501.161 20V176H0.839844V20Z"
+          fill="url(#${paintId0})"
+        />
+      </mask>
+      <g mask="url(#mask0_2481_282)">
+        <path
+          d="M-0.107422 24.8841C4.22475 19.5386 7.41907 18.1694 14.1601 18.0085L483.561 18.0085C492.634 17.8688 496.914 19.3999 502.109 27"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+        <path
+          d="M-0.751953 173.805C-0.125749 168.939 7.4186 163.83 14.1596 163.991L483.561 163.991C492.634 164.13 502.108 166.022 502.108 172.533"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </g>
+      <path
+        d="M29.8435 198.084C15.0673 196.321 0.0959688 190.089 0.855885 182.644C4.09354 175.31 11.1137 175.994 21 176.034L25.5 188.034L29.8435 198.084Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M29.8435 198.084C15.0673 196.321 0.0959688 190.089 0.855885 182.644C4.09354 175.31 11.1137 175.994 21 176.034L25.5 188.034L29.8435 198.084Z"
+        fill="black"
+        fill-opacity="0.4"
+      />
+      <path
+        d="M472 198.084C486.776 196.321 501.748 190.089 500.988 182.644C497.75 175.31 490.73 175.994 480.844 176.034L476.344 188.034L472 198.084Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M472 198.084C486.776 196.321 501.748 190.089 500.988 182.644C497.75 175.31 490.73 175.994 480.844 176.034L476.344 188.034L472 198.084Z"
+        fill="black"
+        fill-opacity="0.4"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="6.9991"
+          y1="14"
+          x2="505.119"
+          y2="151.122"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId1}"
+          x1="6.9991"
+          y1="14"
+          x2="505.119"
+          y2="151.122"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}