microsoft-clipchamp

PreviousNext
Docs
svglcomponent

Preview

Loading preview…
././static/components-generated/microsoftClipchamp.tsx
import type { SVGProps } from "react";

const MicrosoftClipchamp = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} id="a" viewBox="0 0 454 500">
    <defs>
      <linearGradient
        id="e"
        x1="225.25"
        x2="212.19"
        y1="128.63"
        y2="51.22"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#330072" />
        <stop offset="1" stop-color="#7611f0" stop-opacity="0" />
      </linearGradient>
      <linearGradient
        id="f"
        x1="227"
        x2="227"
        y1="117.38"
        y2="2.96"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#9136f2" stop-opacity="0" />
        <stop offset=".84" stop-color="#b76aff" />
      </linearGradient>
      <linearGradient
        id="g"
        x1="123.94"
        x2=".11"
        y1="110.91"
        y2="109.79"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#9136f2" stop-opacity="0" />
        <stop offset=".84" stop-color="#b76aff" />
      </linearGradient>
      <linearGradient
        id="h"
        x1="256.51"
        x2="442.07"
        y1="50.34"
        y2="-103.15"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#9136f2" stop-opacity="0" />
        <stop offset=".84" stop-color="#b76aff" />
      </linearGradient>
      <linearGradient
        id="i"
        x1="123.82"
        x2="-.01"
        y1="270.76"
        y2="270.76"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#bc80ff" stop-opacity="0" />
        <stop offset=".84" stop-color="#ecb4ff" />
      </linearGradient>
      <linearGradient
        id="j"
        x1="303.59"
        x2="454"
        y1="270.76"
        y2="270.76"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#bc7fff" stop-opacity="0" />
        <stop offset=".84" stop-color="#ecb4ff" />
      </linearGradient>
      <linearGradient
        id="l"
        x1="231.96"
        x2="226.19"
        y1="297.77"
        y2="158.17"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#6200d5" />
        <stop offset="1" stop-color="#3e008d" stop-opacity="0" />
      </linearGradient>
      <linearGradient
        id="m"
        x1="330.2"
        x2="454.04"
        y1="177.81"
        y2="177.81"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#9b54fd" stop-opacity="0" />
        <stop offset=".84" stop-color="#ecb4ff" />
      </linearGradient>
      <linearGradient
        id="n"
        x1="123.82"
        x2="-.01"
        y1="182.36"
        y2="182.36"
        gradientTransform="matrix(1 0 0 -1 0 503.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#944ef6" stop-opacity="0" />
        <stop offset=".84" stop-color="#ecb4ff" />
      </linearGradient>
      <radialGradient
        id="b"
        cx="-750.94"
        cy="816.14"
        r=".91"
        fx="-750.94"
        fy="816.14"
        gradientTransform="matrix(-409.1256 211.34636 246.6282 476.37371 -508259.08 -230280.48)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".62" stop-color="#974cff" />
        <stop offset="1" stop-color="#5000b0" />
      </radialGradient>
      <radialGradient
        id="c"
        cx="-755.52"
        cy="805.62"
        r=".91"
        fx="-755.52"
        fy="805.62"
        gradientTransform="matrix(-372.56327 162.14978 358.81482 822.65344 -570026.29 -540318.77)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset=".15" stop-color="#de91ff" />
        <stop offset=".68" stop-color="#d373fc" stop-opacity="0" />
      </radialGradient>
      <radialGradient
        id="d"
        cx="-740.71"
        cy="815.67"
        r=".91"
        fx="-740.71"
        fy="815.67"
        gradientTransform="matrix(-155.19569 204.61103 518.4839 392.47792 -537600.88 -168692.44)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#ffc7a3" />
        <stop offset=".83" stop-color="#de67fd" stop-opacity="0" />
      </radialGradient>
      <radialGradient
        id="k"
        cx="-735.51"
        cy="817.83"
        r=".91"
        fx="-735.51"
        fy="817.83"
        gradientTransform="matrix(-163.30818 252.82286 505.16125 325.61552 -532860.41 -80484.81)"
        gradientUnits="userSpaceOnUse"
      >
        <stop offset="0" stop-color="#ffc7a3" />
        <stop offset=".83" stop-color="#de67fd" stop-opacity="0" />
      </radialGradient>
    </defs>
    <path d="M384.29.77c27.23-4.81 53.57 13.27 58.83 40.4l2.15 11.13c5.25 27.12-12.58 53.02-39.81 57.83L35.59 175.42c-12.71 2.24-25-6.21-27.45-18.86L.92 119.24C-4.33 92.11 13.5 66.23 40.73 61.43L384.29.77Z" />
    <path
      d="M384.29.77c27.23-4.81 53.57 13.27 58.83 40.4l2.15 11.13c5.25 27.12-12.58 53.02-39.81 57.83L35.59 175.42c-12.71 2.24-25-6.21-27.45-18.86L.92 119.24C-4.33 92.11 13.5 66.23 40.73 61.43L384.29.77Z"
      style={{ fill: "url(#b)", fillOpacity: ".9" }}
    />
    <path
      d="M384.29.77c27.23-4.81 53.57 13.27 58.83 40.4l2.15 11.13c5.25 27.12-12.58 53.02-39.81 57.83L35.59 175.42c-12.71 2.24-25-6.21-27.45-18.86L.92 119.24C-4.33 92.11 13.5 66.23 40.73 61.43L384.29.77Z"
      style={{ fill: "url(#c)", fillOpacity: ".6" }}
    />
    <path
      d="M384.29.77c27.23-4.81 53.57 13.27 58.83 40.4l2.15 11.13c5.25 27.12-12.58 53.02-39.81 57.83L35.59 175.42c-12.71 2.24-25-6.21-27.45-18.86L.92 119.24C-4.33 92.11 13.5 66.23 40.73 61.43L384.29.77Z"
      style={{ fillOpacity: ".4", fill: "url(#d)" }}
    />
    <path d="M0 439.97C0 473.12 26.9 500 60.09 500H393.9c33.19 0 60.09-26.88 60.09-60.03V417.5c0-33.15-26.9-60.03-60.09-60.03H60.1C26.91 357.47 0 330.6 0 297.44v-13.63 156.16Z" />
    <path
      d="M0 439.97C0 473.12 26.9 500 60.09 500H393.9c33.19 0 60.09-26.88 60.09-60.03V417.5c0-33.15-26.9-60.03-60.09-60.03H60.1C26.91 357.47 0 330.6 0 297.44v-13.63 156.16Z"
      style={{ fill: "rgba(169,102,255,.2)" }}
    />
    <path
      d="M0 439.97C0 473.12 26.9 500 60.09 500H393.9c33.19 0 60.09-26.88 60.09-60.03V417.5c0-33.15-26.9-60.03-60.09-60.03H60.1C26.91 357.47 0 330.6 0 297.44v-13.63 156.16Z"
      style={{ fill: "url(#e)", fillOpacity: ".4" }}
    />
    <path
      d="M0 439.97C0 473.12 26.9 500 60.09 500H393.9c33.19 0 60.09-26.88 60.09-60.03V417.5c0-33.15-26.9-60.03-60.09-60.03H60.1C26.91 357.47 0 330.6 0 297.44v-13.63 156.16Z"
      style={{ fill: "url(#f)", fillOpacity: ".15" }}
    />
    <path
      d="M0 439.97C0 473.12 26.9 500 60.09 500H393.9c33.19 0 60.09-26.88 60.09-60.03V417.5c0-33.15-26.9-60.03-60.09-60.03H60.1C26.91 357.47 0 330.6 0 297.44v-13.63 156.16Z"
      style={{ fill: "url(#g)", fillOpacity: ".3" }}
    />
    <path
      d="M0 439.97C0 473.12 26.9 500 60.09 500H393.9c33.19 0 60.09-26.88 60.09-60.03V417.5c0-33.15-26.9-60.03-60.09-60.03H60.1C26.91 357.47 0 330.6 0 297.44v-13.63 156.16Z"
      style={{ fill: "url(#h)", fillOpacity: ".2" }}
    />
    <path
      d="M0 223.11c0 33.15 26.9 60.03 60.09 60.03H393.9c33.19 0 60.09 26.88 60.09 60.03v15.8-139.11c0-33.15-26.9-60.03-60.09-60.03H53.42C23.92 159.83 0 135.94 0 106.47v116.64Z"
      style={{ fill: "#bc7fff" }}
    />
    <path
      d="M0 223.11c0 33.15 26.9 60.03 60.09 60.03H393.9c33.19 0 60.09 26.88 60.09 60.03v15.8-139.11c0-33.15-26.9-60.03-60.09-60.03H53.42C23.92 159.83 0 135.94 0 106.47v116.64Z"
      style={{ fill: "url(#i)" }}
    />
    <path
      d="M0 223.11c0 33.15 26.9 60.03 60.09 60.03H393.9c33.19 0 60.09 26.88 60.09 60.03v15.8-139.11c0-33.15-26.9-60.03-60.09-60.03H53.42C23.92 159.83 0 135.94 0 106.47v116.64Z"
      style={{ fill: "url(#j)", fillOpacity: ".8" }}
    />
    <path
      d="M0 223.11c0 33.15 26.9 60.03 60.09 60.03H393.9c33.19 0 60.09 26.88 60.09 60.03v15.8-139.11c0-33.15-26.9-60.03-60.09-60.03H53.42C23.92 159.83 0 135.94 0 106.47v116.64Z"
      style={{ fill: "url(#k)" }}
    />
    <path
      d="M0 326.5c0 33.15 26.9 60.03 60.09 60.03h337.83c30.97 0 56.07 25.08 56.07 56.02v-109.3c0-33.15-26.9-60.02-60.09-60.02H60.1C26.91 273.23 0 246.35 0 213.2v-13.51V326.5Z"
      style={{ fill: "#974cff" }}
    />
    <path
      d="M0 326.5c0 33.15 26.9 60.03 60.09 60.03h337.83c30.97 0 56.07 25.08 56.07 56.02v-109.3c0-33.15-26.9-60.02-60.09-60.02H60.1C26.91 273.23 0 246.35 0 213.2v-13.51V326.5Z"
      style={{ fill: "rgba(169,102,255,.35)" }}
    />
    <path
      d="M0 326.5c0 33.15 26.9 60.03 60.09 60.03h337.83c30.97 0 56.07 25.08 56.07 56.02v-109.3c0-33.15-26.9-60.02-60.09-60.02H60.1C26.91 273.23 0 246.35 0 213.2v-13.51V326.5Z"
      style={{ fill: "url(#l)", fillOpacity: ".4" }}
    />
    <path
      d="M0 326.5c0 33.15 26.9 60.03 60.09 60.03h337.83c30.97 0 56.07 25.08 56.07 56.02v-109.3c0-33.15-26.9-60.02-60.09-60.02H60.1C26.91 273.23 0 246.35 0 213.2v-13.51V326.5Z"
      style={{ fill: "url(#m)", fillOpacity: ".4" }}
    />
    <path
      d="M0 326.5c0 33.15 26.9 60.03 60.09 60.03h337.83c30.97 0 56.07 25.08 56.07 56.02v-109.3c0-33.15-26.9-60.02-60.09-60.02H60.1C26.91 273.23 0 246.35 0 213.2v-13.51V326.5Z"
      style={{ fillOpacity: ".6", fill: "url(#n)" }}
    />
  </svg>
);

export { MicrosoftClipchamp };

Installation

npx shadcn@latest add @svgl/microsoft-clipchamp

Usage

import { MicrosoftClipchamp } from "@/components/microsoft-clipchamp"
<MicrosoftClipchamp />