@blockspoon/cert-badge-renderer 1.0.1

package/src/templates/ribbons/RibbonType34.ts

@@ -0,0 +1,163 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType34({
+  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 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 4.20313C485 1.99399 486.791 0.203125 489 0.203125H540.59C543.279 0.203125 545.202 2.80438 544.414 5.37582L529.647 53.5304C529.413 54.2947 529.413 55.1116 529.647 55.8758L544.414 104.03C545.202 106.602 543.279 109.203 540.59 109.203H489C486.791 109.203 485 107.412 485 105.203V4.20313Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M485 4.20313C485 1.99399 486.791 0.203125 489 0.203125H540.59C543.279 0.203125 545.202 2.80438 544.414 5.37582L529.647 53.5304C529.413 54.2947 529.413 55.1116 529.647 55.8758L544.414 104.03C545.202 106.602 543.279 109.203 540.59 109.203H489C486.791 109.203 485 107.412 485 105.203V4.20313Z"
+        fill="black"
+        fill-opacity="0.2"
+      />
+      <rect
+        x="485"
+        width="46"
+        height="109"
+        fill="url(#paint0_linear_2407_190)"
+      />
+      <path
+        d="M62 4.20313C62 1.99399 60.2091 0.203125 58 0.203125H5.43648C2.73918 0.203125 0.815063 2.81823 1.61767 5.39335L16.6153 53.5129C16.8569 54.288 16.8569 55.1183 16.6153 55.8934L1.61767 104.013C0.815063 106.588 2.73918 109.203 5.43648 109.203H58C60.2091 109.203 62 107.412 62 105.203V4.20313Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M62 4.20313C62 1.99399 60.2091 0.203125 58 0.203125H5.43648C2.73918 0.203125 0.815063 2.81823 1.61767 5.39335L16.6153 53.5129C16.8569 54.288 16.8569 55.1183 16.6153 55.8934L1.61767 104.013C0.815063 106.588 2.73918 109.203 5.43648 109.203H58C60.2091 109.203 62 107.412 62 105.203V4.20313Z"
+        fill="black"
+        fill-opacity="0.2"
+      />
+      <rect
+        width="48"
+        height="109"
+        transform="matrix(-1 0 0 1 62 0)"
+        fill="url(#paint1_linear_2407_190)"
+      />
+      <path
+        d="M63.3829 173H482.255C478.396 183.094 474.898 188.471 466.279 197H79.9829C71.6664 189.461 68.3305 184.142 63.3829 173Z"
+        fill="url(#paint2_linear_2407_190)"
+        fill-opacity="0.4"
+      />
+      <rect
+        x="485"
+        y="24.2031"
+        width="423"
+        height="24"
+        transform="rotate(180 485 24.2031)"
+        fill="url(#paint3_linear_2407_190)"
+        fill-opacity="0.3"
+      />
+      <rect
+        x="33"
+        y="24.2031"
+        width="480"
+        height="148.797"
+        rx="4"
+        fill="url(#${paintId4})"
+      />
+      <rect
+        x="33"
+        y="34"
+        width="480"
+        height="129"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <path d="M485 24.2031V0.203125L508 24.2031H485Z" fill="${mainColor}" />
+      <path
+        d="M485 24.2031V0.203125L508 24.2031H485Z"
+        fill="black"
+        fill-opacity="0.6"
+      />
+      <path d="M62 24.2031V0.203125L35 24.2031H62Z" fill="${mainColor}" />
+      <path
+        d="M62 24.2031V0.203125L35 24.2031H62Z"
+        fill="black"
+        fill-opacity="0.6"
+      />
+      <path d="M33 34.2031L513 34.2031" stroke="white" stroke-width="3" />
+      <path d="M33 163L513 163" stroke="white" stroke-width="3" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2407_190"
+          x1="442.108"
+          y1="48"
+          x2="519.078"
+          y2="30.5323"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2407_190"
+          x1="-44.7568"
+          y1="48"
+          x2="35.2118"
+          y2="29.0628"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_2407_190"
+          x1="279.88"
+          y1="179"
+          x2="279.88"
+          y2="197"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_2407_190"
+          x1="702.308"
+          y1="30.2031"
+          x2="702.308"
+          y2="48.2031"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId4}"
+          x1="33"
+          y1="98.6016"
+          x2="513"
+          y2="98.6016"
+          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>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType35.ts

@@ -0,0 +1,148 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType35({
+  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 464 196"
+      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="M31.2383 170.25H433.999C429.782 178.33 425.13 187.478 423.548 194.25H41.5705C39.179 186.194 36.7269 180.216 31.2383 170.25Z"
+        fill="url(#paint0_linear_2417_184)"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M30.6641 24H433.425C429.207 15.92 424.556 6.7717 422.974 0H40.9963C38.6048 8.05581 36.1527 14.0344 30.6641 24Z"
+        fill="url(#paint1_linear_2417_184)"
+        fill-opacity="0.4"
+      />
+      <path
+        d="M430.613 19H33.5002C32.5 20 29.5 24 29 31.3484V147.652C29 154.471 33.4644 160 38.9716 160H424.028C429.536 160 434 154.471 434 147.652V31.3484C434 23 433.613 24.5 430.613 19Z"
+        fill="white"
+      />
+      <path
+        d="M44.0062 195.521C25.7275 197.635 -1.04772 189.933 0.0316382 180.001C5.08497 169.25 15.3606 168.981 37.8473 171.69L44.0062 195.521Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M44.0062 195.521C25.7275 197.635 -1.04772 189.933 0.0316382 180.001C5.08497 169.25 15.3606 168.981 37.8473 171.69L44.0062 195.521Z"
+        fill="black"
+        fill-opacity="0.5"
+      />
+      <path
+        d="M420.136 195.129C438.546 197.243 465.059 189.933 463.972 180.001C458.882 169.25 448.532 168.981 425.883 171.69L420.136 195.129Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M420.136 195.129C438.546 197.243 465.059 189.933 463.972 180.001C458.882 169.25 448.532 168.981 425.883 171.69L420.136 195.129Z"
+        fill="black"
+        fill-opacity="0.5"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M14.0938 19C6.36176 19 0.09375 25.268 0.09375 33V161.526C0.09375 161.567 0.0939267 161.608 0.0942793 161.649V181.635C1.10738 180.404 5.60565 176.356 15.5366 175.526H448.547C458.478 176.356 462.977 180.404 463.99 181.635V162.053C463.996 161.878 463.999 161.702 463.999 161.526V33C463.999 25.268 457.731 19 449.999 19H14.0938Z"
+        fill="url(#${paintId2})"
+      />
+      <path
+        d="M0 35.8231C3.91225 30.9147 7.35496 29.8941 15.0699 30.0083H450.967C457.431 30.674 460.332 32.1727 464 37.8254V169.055C459.238 165.13 453.553 164.499 440.83 164.626H12.2439C6.53593 165.076 3.93553 166.429 0 170V35.8231Z"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <mask
+        id="mask0_2417_184"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="19"
+        width="464"
+        height="157"
+      >
+        <path
+          d="M0.09375 33C0.09375 25.268 6.36176 19 14.0938 19H449.999C457.731 19 463.999 25.268 463.999 33V175.526H0.09375V33Z"
+          fill="url(#paint3_linear_2417_184)"
+        />
+      </mask>
+      <g mask="url(#mask0_2417_184)">
+        <path
+          d="M-0.785157 36.3874C3.23171 31.4656 6.19353 30.2049 12.4439 30.0567L447.68 30.0567C456.093 29.9281 460.061 31.3378 464.878 38.3356"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+        <path
+          d="M-1.38281 173.505C-0.802185 169.024 6.19306 164.32 12.4434 164.469L447.68 164.468C456.093 164.597 464.877 166.339 464.877 172.334"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="round"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_2417_184"
+          x1="240.423"
+          y1="167.738"
+          x2="240.423"
+          y2="194.25"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2417_184"
+          x1="239.848"
+          y1="30.9798"
+          x2="239.848"
+          y2="2.1313e-06"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0.4" />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId2}"
+          x1="0.0937504"
+          y1="36.795"
+          x2="472.838"
+          y2="91.4274"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="0.673474" stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_2417_184"
+          x1="5.80471"
+          y1="26.3659"
+          x2="467.211"
+          y2="154.275"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FF1B64" />
+          <stop offset="1" stop-color="#FF91B2" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType35_1.ts

@@ -0,0 +1,130 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType35_1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 512 150"
+      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="M420.954 4.13874C422.323 2.40536 424.839 2.11043 426.572 3.47999L505.509 65.8492C507.961 67.7863 507.345 71.6605 504.413 72.741L458.361 89.7131C456.951 90.2325 455.952 91.4976 455.772 92.9888L449.913 141.718C449.54 144.82 445.914 146.316 443.462 144.379L364.525 82.0098C362.792 80.6403 362.497 78.1248 363.866 76.3915L420.954 4.13874Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M420.954 4.13874C422.323 2.40536 424.839 2.11043 426.572 3.47999L505.509 65.8492C507.961 67.7863 507.345 71.6605 504.413 72.741L458.361 89.7131C456.951 90.2325 455.952 91.4976 455.772 92.9888L449.913 141.718C449.54 144.82 445.914 146.316 443.462 144.379L364.525 82.0098C362.792 80.6403 362.497 78.1248 363.866 76.3915L420.954 4.13874Z"
+        fill="black"
+        fill-opacity="0.3"
+      />
+      <mask
+        id="mask0_2407_272"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="363"
+        y="2"
+        width="145"
+        height="144"
+      >
+        <path
+          d="M420.954 4.13874C422.323 2.40536 424.839 2.11043 426.572 3.47999L505.509 65.8492C507.961 67.7863 507.345 71.6605 504.413 72.741L458.361 89.7131C456.951 90.2325 455.952 91.4976 455.772 92.9888L449.913 141.718C449.54 144.82 445.914 146.316 443.462 144.379L364.525 82.0098C362.792 80.6403 362.497 78.1248 363.866 76.3915L420.954 4.13874Z"
+          fill="#FA2E43"
+        />
+      </mask>
+      <g mask="url(#mask0_2407_272)">
+        <path
+          d="M427.289 13.4044L503.7 73.7775"
+          stroke="white"
+          stroke-width="2"
+        />
+        <path
+          d="M374.633 80.0454L451.044 140.418"
+          stroke="white"
+          stroke-width="2"
+        />
+      </g>
+      <path
+        d="M421.011 4.0758C422.39 2.37162 424.883 2.09437 426.602 3.45409L492.393 55.4856L430.345 134.015L363.227 82.0018C361.455 80.6286 361.157 78.0674 362.567 76.3244L421.011 4.0758Z"
+        fill="url(#paint0_linear_2407_272)"
+      />
+      <path
+        d="M91.054 4.13874C89.6845 2.40536 87.169 2.11043 85.4357 3.47999L6.49832 65.8492C4.04667 67.7863 4.66312 71.6605 7.59491 72.741L53.6472 89.7131C55.0565 90.2325 56.0561 91.4976 56.2354 92.9888L62.0944 141.718C62.4674 144.82 66.0939 146.316 68.5456 144.379L147.483 82.0098C149.216 80.6403 149.511 78.1248 148.142 76.3915L91.054 4.13874Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M91.054 4.13874C89.6845 2.40536 87.169 2.11043 85.4357 3.47999L6.49832 65.8492C4.04667 67.7863 4.66312 71.6605 7.59491 72.741L53.6472 89.7131C55.0565 90.2325 56.0561 91.4976 56.2354 92.9888L62.0944 141.718C62.4674 144.82 66.0939 146.316 68.5456 144.379L147.483 82.0098C149.216 80.6403 149.511 78.1248 148.142 76.3915L91.054 4.13874Z"
+        fill="black"
+        fill-opacity="0.3"
+      />
+      <mask
+        id="mask1_2407_272"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="2"
+        width="146"
+        height="144"
+      >
+        <path
+          d="M91.054 4.13874C89.6845 2.40536 87.169 2.11043 85.4357 3.47999L6.49832 65.8492C4.04667 67.7863 4.66312 71.6605 7.59491 72.741L53.6472 89.7131C55.0565 90.2325 56.0561 91.4976 56.2354 92.9888L62.0944 141.718C62.4674 144.82 66.0939 146.316 68.5456 144.379L147.483 82.0098C149.216 80.6403 149.511 78.1248 148.142 76.3915L91.054 4.13874Z"
+          fill="#FA2E43"
+        />
+      </mask>
+      <g mask="url(#mask1_2407_272)">
+        <path
+          d="M84.7188 13.4044L8.30789 73.7775"
+          stroke="white"
+          stroke-width="2"
+        />
+        <path
+          d="M137.375 80.0454L60.9641 140.418"
+          stroke="white"
+          stroke-width="2"
+        />
+      </g>
+      <path
+        d="M91.4812 3.66184C90.1128 1.91814 87.5873 1.61971 85.8502 2.99642L19.6174 55.4856L81.6647 134.015L147.857 81.9701C149.592 80.6055 149.894 78.0929 148.531 76.3562L91.4812 3.66184Z"
+        fill="url(#paint1_linear_2407_272)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2407_272"
+          x1="409.544"
+          y1="22.9239"
+          x2="467.781"
+          y2="84.1453"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2407_272"
+          x1="102.476"
+          y1="22.9242"
+          x2="44.2382"
+          y2="84.1456"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/ribbons/RibbonType4.ts

@@ -0,0 +1,142 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createRibbonType4({
+  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)}`;
+  const paintId2 = `paint2_linear_${Math.random().toString(36).substr(2, 9)}`;
+  const paintId3 = `paint3_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 564 173"
+      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;
+      "
+    >
+      <path d="M67.3261 0H496.657L504 22L60 21.5L67.3261 0Z" fill="white" />
+      <path
+        opacity="0.5"
+        d="M60 127H504L493.5 154H69.5L60 127Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M44.7492 40.1859L4.0042 51.2967C0.615478 52.2159 -1.02268 56.0862 0.679707 59.1664L26.6974 106.626C27.131 107.432 27.3719 108.335 27.3719 109.254V167.551C27.3719 171.566 31.5476 174.195 35.1451 172.453L104.927 138.814C107.866 137.395 108.894 133.718 107.143 130.976L50.7397 42.508C49.4709 40.5084 47.0458 39.5731 44.7492 40.1859Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M44.7492 40.1859L4.0042 51.2967C0.615478 52.2159 -1.02268 56.0862 0.679707 59.1664L26.6974 106.626C27.131 107.432 27.3719 108.335 27.3719 109.254V167.551C27.3719 171.566 31.5476 174.195 35.1451 172.453L104.927 138.814C107.866 137.395 108.894 133.718 107.143 130.976L50.7397 42.508C49.4709 40.5084 47.0458 39.5731 44.7492 40.1859Z"
+        fill="black"
+        fill-opacity="0.2"
+      />
+      <path
+        opacity="0.3"
+        d="M32.0089 43.1746L43.5092 40L78.5098 153.5H43.0095C33.8095 153.5 31.8428 146.5 32.0095 143L32.0089 43.1746Z"
+        fill="url(#${paintId1})"
+      />
+      <path
+        d="M519.251 40.1859L559.996 51.2967C563.385 52.2159 565.023 56.0862 563.32 59.1664L537.303 106.626C536.869 107.432 536.628 108.335 536.628 109.254V167.551C536.628 171.566 532.452 174.195 528.855 172.453L459.073 138.814C456.134 137.395 455.106 133.718 456.857 130.976L513.26 42.508C514.529 40.5084 516.954 39.5731 519.251 40.1859Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M519.251 40.1859L559.996 51.2967C563.385 52.2159 565.023 56.0862 563.32 59.1664L537.303 106.626C536.869 107.432 536.628 108.335 536.628 109.254V167.551C536.628 171.566 532.452 174.195 528.855 172.453L459.073 138.814C456.134 137.395 455.106 133.718 456.857 130.976L513.26 42.508C514.529 40.5084 516.954 39.5731 519.251 40.1859Z"
+        fill="black"
+        fill-opacity="0.2"
+      />
+      <path
+        opacity="0.3"
+        d="M532.001 43.6746L520.501 40.5L485.5 154H521C530.2 154 532.167 147 532 143.5L532.001 43.6746Z"
+        fill="url(#${paintId2})"
+      />
+      <path
+        d="M509.206 5H53.7936C47.2802 5 42 10.3325 42 16.9105V129.089C42 135.667 47.2802 141 53.7936 141H509.206C515.72 141 521 135.667 521 129.089V16.9105C521 10.3325 515.72 5 509.206 5Z"
+        fill="url(#${paintId3})"
+      />
+      <rect
+        x="42"
+        y="18.5039"
+        width="479"
+        height="108.992"
+        fill="white"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M42 17L521 17"
+        stroke="white"
+        stroke-opacity="0.6"
+        stroke-width="3"
+      />
+      <path
+        d="M42 129L521 129"
+        stroke="white"
+        stroke-opacity="0.6"
+        stroke-width="3"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="282"
+          y1="138"
+          x2="282"
+          y2="154"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-color="white" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId1}"
+          x1="76.5098"
+          y1="81"
+          x2="23.5098"
+          y2="107.5"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId2}"
+          x1="487.5"
+          y1="81.5"
+          x2="540.5"
+          y2="108"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId3}"
+          x1="42"
+          y1="16"
+          x2="531"
+          y2="141"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}