@blockspoon/cert-badge-renderer 1.0.1

package/src/templates/badges/BadgeType36.ts

@@ -0,0 +1,147 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createBadgeType36({
+  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 456 516"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        max-width: 100%;
+        max-height: 100%;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M38 190C38 85.0659 123.066 0 228 0C332.934 0 418 85.0659 418 190V361.818C418 381.801 401.801 398 381.818 398H74.1818C54.1992 398 38 381.801 38 361.818V190Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M54 190C54 93.9025 131.902 16 228 16C324.098 16 402 93.9025 402 190V347.818C402 366.144 387.144 381 368.818 381H87.1818C68.856 381 54 366.144 54 347.818V190Z"
+        fill="white"
+      />
+      <path
+        d="M64 190C64 99.4253 137.425 26 228 26C318.575 26 392 99.4253 392 190V335.091C392 352.162 378.162 366 361.091 366H94.9091C77.8385 366 64 352.162 64 335.091V190Z"
+        fill="${mainColor}"
+      />
+      <mask
+        id="mask0_2407_307"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="64"
+        y="88"
+        width="328"
+        height="207"
+      >
+        <path
+          d="M64 112C64 98.7452 74.7452 88 88 88H368C381.255 88 392 98.7452 392 112V295H64V112Z"
+          fill="#5890CB"
+        />
+      </mask>
+      <g mask="url(#mask0_2407_307)">
+        <ellipse
+          cx="228.5"
+          cy="300.5"
+          rx="178.5"
+          ry="97.5"
+          fill="black"
+          fill-opacity="0.2"
+        />
+      </g>
+      <path
+        d="M441.15 446.417L243.731 513.532C234.053 516.823 221.947 516.823 212.269 513.532L14.8497 446.417C5.63723 443.287 0 430.794 0 424.704V317.227C0 307.648 13.6857 295 30.5807 295H425.419C442.314 295 456 307.648 456 317.227V424.694C456 430.785 450.363 443.277 441.15 446.407V446.417Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M426.192 440.492L242.627 497.89C233.628 500.703 222.372 500.703 213.373 497.89L29.8076 440.492C21.2416 437.815 16 427.132 16 421.923V330.009C16 321.817 22.7253 311 38.4347 311H417.565C433.275 311 440 321.817 440 330.009V421.915C440 427.124 434.758 437.807 426.192 440.484V440.492Z"
+        fill="white"
+      />
+      <path
+        d="M418.713 434.951L242.075 491.046C233.416 493.651 222.584 493.651 213.925 491.046L37.2866 434.951C29.0438 432.472 24 425.529 24 420.707V335.601C24 328.016 28.2451 318 43.3617 318H412.638C427.755 318 432 328.016 432 335.601V420.699C432 425.522 426.956 432.465 418.713 434.943V434.951Z"
+        fill="url(#${paintId1})"
+      />
+      <path
+        d="M418.713 434.951L242.075 491.046C233.416 493.651 222.584 493.651 213.925 491.046L37.2866 434.951C29.0438 432.472 24 425.529 24 420.707V335.601C24 328.016 28.2451 318 43.3617 318H412.638C427.755 318 432 328.016 432 335.601V420.699C432 425.522 426.956 432.465 418.713 434.943V434.951Z"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <rect
+        width="380"
+        height="24"
+        transform="matrix(1 0 0 -1 38 295)"
+        fill="url(#paint2_linear_2407_307)"
+        fill-opacity="0.4"
+      />
+      <path
+        d="M197 461H259"
+        stroke="black"
+        stroke-opacity="0.5"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+      <mask
+        id="mask1_2407_307"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="64"
+        y="26"
+        width="328"
+        height="340"
+      >
+        <path
+          d="M64 190C64 99.4253 137.425 26 228 26C318.575 26 392 99.4253 392 190V335.091C392 352.162 378.162 366 361.091 366H94.9091C77.8385 366 64 352.162 64 335.091V190Z"
+          fill="${mainColor}"
+        />
+      </mask>
+      <g mask="url(#mask1_2407_307)">
+        <ellipse cx="228" cy="26" rx="108" ry="73" fill="#7368E8" />
+      </g>
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="228"
+          y1="0"
+          x2="228"
+          y2="398"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId1}"
+          x1="107.658"
+          y1="318"
+          x2="301.155"
+          y2="520.931"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="#360A8C" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2407_307"
+          x1="195.217"
+          y1="6"
+          x2="195.217"
+          y2="24"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+} 

package/src/templates/badges/BadgeType37.ts

@@ -0,0 +1,146 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createBadgeType37({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 467 540"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        max-width: 100%;
+        max-height: 100%;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M0 234.279C0 227.007 3.94676 220.308 10.3074 216.784L86.7794 174.416C93.1401 170.892 97.0868 164.193 97.0868 156.921V92.0707C97.0868 85.0121 100.808 78.4761 106.877 74.8729L222.541 6.20902C228.966 2.39467 236.982 2.48013 243.324 6.4306L353.113 74.8138C358.976 78.4654 362.539 84.8833 362.539 91.7901V156.508C362.539 163.998 366.724 170.86 373.383 174.289L456.156 216.911C462.815 220.34 467 227.202 467 234.692V447C467 458.046 458.046 467 447 467H20C8.9543 467 0 458.046 0 447V234.279Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M22 244.05C22 237.563 25.4912 231.577 31.1382 228.383L106.602 185.699C113.504 181.795 117.771 174.479 117.771 166.55V102.044C117.771 95.7383 121.071 89.8922 126.47 86.6336L223.434 28.1094C229.279 24.5817 236.617 24.6642 242.381 28.3224L334.132 86.5521C339.335 89.8539 342.487 95.5877 342.487 101.75V166.163C342.487 174.318 346.998 181.804 354.208 185.614L435.41 228.522C441.309 231.64 445 237.765 445 244.437V427C445 436.941 436.941 445 427 445H40C30.0589 445 22 436.941 22 427V244.05Z"
+        fill="${subColor}"
+        stroke="white"
+        stroke-width="4"
+      />
+      <mask
+        id="mask0_2407_338"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="20"
+        y="22"
+        width="427"
+        height="425"
+      >
+        <path
+          d="M20 235.5C20 117.587 115.587 22 233.5 22C351.413 22 447 117.587 447 235.5V427C447 438.046 438.046 447 427 447H40C28.9543 447 20 438.046 20 427V235.5Z"
+          fill="#FF5D94"
+        />
+      </mask>
+      <g mask="url(#mask0_2407_338)">
+        <ellipse
+          cx="49.2039"
+          cy="455.758"
+          rx="105.743"
+          ry="84.6993"
+          fill="white"
+        />
+        <ellipse
+          cx="417.805"
+          cy="455.758"
+          rx="106.75"
+          ry="84.6993"
+          fill="white"
+        />
+        <ellipse
+          cx="383.557"
+          cy="405.64"
+          rx="51.3613"
+          ry="57.6356"
+          fill="white"
+        />
+        <ellipse
+          cx="81.9374"
+          cy="401.636"
+          rx="48.8436"
+          ry="57.6356"
+          fill="white"
+        />
+        <ellipse
+          cx="41.8724"
+          cy="59.1571"
+          rx="41.8724"
+          ry="59.1571"
+          transform="matrix(0.916876 0.399172 -0.478588 0.87804 111.914 357.125)"
+          fill="white"
+        />
+        <ellipse
+          cx="36.4324"
+          cy="59.1571"
+          rx="36.4324"
+          ry="59.1571"
+          transform="matrix(-0.916876 0.399172 0.478588 0.87804 354.066 357.344)"
+          fill="white"
+        />
+        <ellipse
+          cx="48.2962"
+          cy="59.1571"
+          rx="48.2962"
+          ry="59.1571"
+          transform="matrix(0.916876 0.399172 -0.478588 0.87804 147.852 376.758)"
+          fill="white"
+        />
+        <ellipse
+          cx="48.2962"
+          cy="59.1571"
+          rx="48.2962"
+          ry="59.1571"
+          transform="matrix(-0.916876 0.399172 0.478588 0.87804 328.102 372.629)"
+          fill="white"
+        />
+        <path
+          d="M269.754 402.633C250.116 418.169 218.413 414.507 203.831 404.194L35.1055 543.965L432.397 549.98L269.754 402.633Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M88 469C88 462.373 93.3726 457 100 457H367C373.627 457 379 462.373 379 469V524C379 532.837 371.837 540 363 540H104C95.1635 540 88 532.837 88 524V469Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M110 467H357V509C357 515.627 351.627 521 345 521H122C115.373 521 110 515.627 110 509V467Z"
+        fill="white"
+      />
+      <path
+        d="M113.58 382.96C101.116 366.011 80.9662 369.251 72.4493 372.99C96.8783 372.99 106.725 385.037 108.594 391.06C120.061 387.072 134.976 392.722 141 396.045C132.525 382.087 119.188 381.506 113.58 382.96Z"
+        fill="black"
+        fill-opacity="0.11"
+      />
+      <path
+        d="M55 411C61.8551 405.807 78.6812 397.167 91.1449 404.146C83.2512 397.499 64.971 389.564 55 411Z"
+        fill="black"
+        fill-opacity="0.11"
+      />
+      <path
+        d="M354.42 382.96C366.884 366.011 387.034 369.251 395.551 372.99C371.122 372.99 361.275 385.037 359.406 391.06C347.939 387.072 333.024 392.722 327 396.045C335.475 382.087 348.812 381.506 354.42 382.96Z"
+        fill="black"
+        fill-opacity="0.11"
+      />
+      <path
+        d="M413 411C406.145 405.807 389.319 397.167 376.855 404.146C384.749 397.499 403.029 389.564 413 411Z"
+        fill="black"
+        fill-opacity="0.11"
+      />
+      <circle cx="428" cy="341" r="4" fill="white" />
+      <circle cx="418" cy="353" r="2" fill="white" />
+      <circle cx="33.5" cy="316.5" r="3.5" fill="white" />
+    </svg>
+  `;
+} 

package/src/templates/badges/BadgeType38.ts

@@ -0,0 +1,115 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createBadgeType38({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 480 410"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        max-width: 100%;
+        max-height: 100%;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <g filter="url(#filter0_d_2407_340)">
+        <path
+          d="M453.15 261.005L255.731 393.142C246.053 399.62 233.947 399.62 224.269 393.142L26.8497 261.005C17.6372 254.842 12 243.724 12 231.734L12 47.0003C12 28.1422 25.6857 12.8663 42.5807 12.8663L437.419 12.8663C454.314 12.8663 468 28.1422 468 47.0003V231.715C468 243.706 462.363 254.824 453.15 260.986V261.005Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M438.192 257.835L254.627 377.597C245.628 383.468 234.372 383.468 225.373 377.597L41.8076 257.835C33.2416 252.249 28 242.173 28 231.305L28 59.9371C28 42.8452 40.7253 29 56.4347 29L423.565 29C439.275 29 452 42.8452 452 59.9371V231.288C452 242.156 446.758 252.233 438.192 257.818V257.835Z"
+        fill="${mainColor}"
+      />
+      <circle cx="375" cy="95" r="43" fill="white" />
+      <circle cx="375" cy="95" r="40" fill="${subColor}" />
+      <circle cx="375" cy="95" r="38" fill="white" />
+      <mask
+        id="mask0_2407_340"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="28"
+        y="29"
+        width="424"
+        height="353"
+      >
+        <path
+          d="M438.192 257.835L254.627 377.597C245.628 383.468 234.372 383.468 225.373 377.597L41.8076 257.835C33.2416 252.249 28 242.173 28 231.305L28 59.9371C28 42.8452 40.7253 29 56.4347 29L423.565 29C439.275 29 452 42.8452 452 59.9371V231.288C452 242.156 446.758 252.233 438.192 257.818V257.835Z"
+          fill="${mainColor}"
+        />
+      </mask>
+      <g mask="url(#mask0_2407_340)">
+        <rect
+          y="149"
+          width="480"
+          height="233"
+          fill="url(#paint0_linear_2407_340)"
+          fill-opacity="0.3"
+        />
+      </g>
+      <path
+        d="M52.2506 253.788L52.2501 253.788C44.6961 248.853 40 239.888 40 230.135L40 66.5349C40 51.1563 51.3885 39 65.0934 39L414.907 39C428.612 39 440 51.1563 440 66.5349V230.119C440 239.871 435.304 248.837 427.75 253.772L426.844 254.364V254.381L252.843 368.122C244.933 373.293 235.067 373.293 227.157 368.122L52.2506 253.788Z"
+        stroke="black"
+        stroke-opacity="0.6"
+        stroke-width="4"
+      />
+      <defs>
+        <filter
+          id="filter0_d_2407_340"
+          x="0"
+          y="0.866333"
+          width="480"
+          height="409.134"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="6" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_2407_340"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_2407_340"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_2407_340"
+          x1="240"
+          y1="149"
+          x2="240"
+          y2="382"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="white" />
+          <stop offset="1" stop-color="white" stop-opacity="0.37" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+} 

package/src/templates/badges/BadgeType39.ts

@@ -0,0 +1,105 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createBadgeType39({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 520 544"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        max-width: 100%;
+        max-height: 100%;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <g filter="url(#filter0_d_2407_341)">
+        <path
+          d="M508 284C508 420.967 396.967 532 260 532C123.033 532 12 420.967 12 284L12 52C12 29.9086 29.9086 12 52 12L468 12.0001C490.091 12.0001 508 29.9087 508 52.0001L508 284Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M488 284C488 409.921 385.921 512 260 512C134.079 512 32 409.921 32 284L32 76C32 51.6995 51.6995 32 76 32L444 32C468.301 32 488 51.6995 488 76L488 284Z"
+        fill="#101113"
+      />
+      <path
+        d="M475 283C475 401.741 378.741 498 260 498C141.259 498 45 401.741 45 283L45 83C45 62.5655 61.5655 46 82 46L438 46C458.435 46 475 62.5655 475 83L475 283Z"
+        fill="${mainColor}"
+        stroke="${subColor}"
+        stroke-width="6"
+      />
+      <path
+        d="M178.999 98.6569C178.999 99.2091 241.508 99.6569 243.224 99.6569C244.941 99.6569 246.332 99.2091 246.332 98.6569C246.332 98.1046 244.941 97.6569 243.224 97.6569C241.508 97.6569 178.999 98.1046 178.999 98.6569Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M258.416 95.0017C259.216 93.9825 260.76 93.9825 261.561 95.0017L263.462 97.4212C264.032 98.1465 264.032 99.1673 263.462 99.8925L261.561 102.312C260.76 103.331 259.216 103.331 258.416 102.312L256.515 99.8925C255.945 99.1673 255.945 98.1465 256.515 97.4213L258.416 95.0017Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M340.982 98.6569C340.982 99.2091 278.472 99.6569 276.756 99.6569C275.04 99.6569 273.648 99.2091 273.648 98.6569C273.648 98.1046 275.04 97.6569 276.756 97.6569C278.472 97.6569 340.982 98.1046 340.982 98.6569Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M445.002 336.772C423.668 419.131 348.934 476.337 263.862 475.429L255.808 475.343C171.898 474.447 98.6086 418.378 75.7926 337.625C72.8686 327.277 80.6439 317 91.3977 317L429.7 317C440.039 317 447.595 326.763 445.002 336.772Z"
+        fill="white"
+        stroke="${subColor}"
+        stroke-width="6"
+      />
+      <rect x="48" y="120" width="424" height="130" fill="${mainColor}" />
+      <rect
+        x="48"
+        y="120"
+        width="424"
+        height="130"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <defs>
+        <filter
+          id="filter0_d_2407_341"
+          x="0"
+          y="0"
+          width="520"
+          height="544"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset />
+          <feGaussianBlur stdDeviation="6" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_2407_341"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_2407_341"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  `;
+} 

package/src/templates/badges/BadgeType4.ts

@@ -0,0 +1,72 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createBadgeType4({
+  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 454 454"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <circle
+        cx="227"
+        cy="227"
+        r="227"
+        fill="url(#${paintId0})"
+      />
+      <circle
+        cx="227"
+        cy="227"
+        r="212"
+        stroke="white"
+        stroke-opacity="0.3"
+        stroke-width="4"
+      />
+      <circle cx="227" cy="227" r="182" fill="#EFEFEF" />
+      <circle cx="227" cy="227" r="164" fill="white" />
+      <circle
+        cx="227"
+        cy="227"
+        r="220.5"
+        stroke="black"
+        stroke-opacity="0.5"
+        stroke-width="13"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="227"
+          y1="0"
+          x2="227"
+          y2="454"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}