ruby

PreviousNext
Docs
svglcomponent

Preview

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

const Ruby = (props: SVGProps<SVGSVGElement>) => (
  <svg {...props} preserveAspectRatio="xMidYMid" viewBox="0 0 256 255">
    <defs>
      <linearGradient x1="84.8%" y1="111.4%" x2="58.3%" y2="64.6%" id="a">
        <stop stop-color="#FB7655" offset="0%" />
        <stop stop-color="#FB7655" offset="0%" />
        <stop stop-color="#E42B1E" offset="41%" />
        <stop stop-color="#900" offset="99%" />
        <stop stop-color="#900" offset="100%" />
      </linearGradient>
      <linearGradient x1="116.7%" y1="60.9%" x2="1.7%" y2="19.3%" id="b">
        <stop stop-color="#871101" offset="0%" />
        <stop stop-color="#871101" offset="0%" />
        <stop stop-color="#911209" offset="99%" />
        <stop stop-color="#911209" offset="100%" />
      </linearGradient>
      <linearGradient x1="75.8%" y1="219.3%" x2="39%" y2="7.8%" id="c">
        <stop stop-color="#871101" offset="0%" />
        <stop stop-color="#871101" offset="0%" />
        <stop stop-color="#911209" offset="99%" />
        <stop stop-color="#911209" offset="100%" />
      </linearGradient>
      <linearGradient x1="50%" y1="7.2%" x2="66.5%" y2="79.1%" id="d">
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#E57252" offset="23%" />
        <stop stop-color="#DE3B20" offset="46%" />
        <stop stop-color="#A60003" offset="99%" />
        <stop stop-color="#A60003" offset="100%" />
      </linearGradient>
      <linearGradient x1="46.2%" y1="16.3%" x2="49.9%" y2="83%" id="e">
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#E4714E" offset="23%" />
        <stop stop-color="#BE1A0D" offset="56%" />
        <stop stop-color="#A80D00" offset="99%" />
        <stop stop-color="#A80D00" offset="100%" />
      </linearGradient>
      <linearGradient x1="37%" y1="15.6%" x2="49.5%" y2="92.5%" id="f">
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#E46342" offset="18%" />
        <stop stop-color="#C82410" offset="40%" />
        <stop stop-color="#A80D00" offset="99%" />
        <stop stop-color="#A80D00" offset="100%" />
      </linearGradient>
      <linearGradient x1="13.6%" y1="58.3%" x2="85.8%" y2="-46.7%" id="g">
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#C81F11" offset="54%" />
        <stop stop-color="#BF0905" offset="99%" />
        <stop stop-color="#BF0905" offset="100%" />
      </linearGradient>
      <linearGradient x1="27.6%" y1="21.1%" x2="50.7%" y2="79.1%" id="h">
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#FFF" offset="0%" />
        <stop stop-color="#DE4024" offset="31%" />
        <stop stop-color="#BF190B" offset="99%" />
        <stop stop-color="#BF190B" offset="100%" />
      </linearGradient>
      <linearGradient x1="-20.7%" y1="122.3%" x2="104.2%" y2="-6.3%" id="i">
        <stop stop-color="#BD0012" offset="0%" />
        <stop stop-color="#BD0012" offset="0%" />
        <stop stop-color="#FFF" offset="7%" />
        <stop stop-color="#FFF" offset="17%" />
        <stop stop-color="#C82F1C" offset="27%" />
        <stop stop-color="#820C01" offset="33%" />
        <stop stop-color="#A31601" offset="46%" />
        <stop stop-color="#B31301" offset="72%" />
        <stop stop-color="#E82609" offset="99%" />
        <stop stop-color="#E82609" offset="100%" />
      </linearGradient>
      <linearGradient x1="58.8%" y1="65.2%" x2="12%" y2="50.1%" id="j">
        <stop stop-color="#8C0C01" offset="0%" />
        <stop stop-color="#8C0C01" offset="0%" />
        <stop stop-color="#990C00" offset="54%" />
        <stop stop-color="#A80D0E" offset="99%" />
        <stop stop-color="#A80D0E" offset="100%" />
      </linearGradient>
      <linearGradient x1="79.3%" y1="62.8%" x2="23.1%" y2="17.9%" id="k">
        <stop stop-color="#7E110B" offset="0%" />
        <stop stop-color="#7E110B" offset="0%" />
        <stop stop-color="#9E0C00" offset="99%" />
        <stop stop-color="#9E0C00" offset="100%" />
      </linearGradient>
      <linearGradient x1="92.9%" y1="74.1%" x2="59.8%" y2="39.7%" id="l">
        <stop stop-color="#79130D" offset="0%" />
        <stop stop-color="#79130D" offset="0%" />
        <stop stop-color="#9E120B" offset="99%" />
        <stop stop-color="#9E120B" offset="100%" />
      </linearGradient>
      <linearGradient x1="56.6%" y1="101.7%" x2="3.1%" y2="12%" id="o">
        <stop stop-color="#8B2114" offset="0%" />
        <stop stop-color="#8B2114" offset="0%" />
        <stop stop-color="#9E100A" offset="43%" />
        <stop stop-color="#B3100C" offset="99%" />
        <stop stop-color="#B3100C" offset="100%" />
      </linearGradient>
      <linearGradient x1="30.9%" y1="35.6%" x2="92.5%" y2="100.7%" id="p">
        <stop stop-color="#B31000" offset="0%" />
        <stop stop-color="#B31000" offset="0%" />
        <stop stop-color="#910F08" offset="44%" />
        <stop stop-color="#791C12" offset="99%" />
        <stop stop-color="#791C12" offset="100%" />
      </linearGradient>
      <radialGradient cx="32%" cy="40.2%" fx="32%" fy="40.2%" r="69.6%" id="m">
        <stop stop-color="#A80D00" offset="0%" />
        <stop stop-color="#A80D00" offset="0%" />
        <stop stop-color="#7E0E08" offset="99%" />
        <stop stop-color="#7E0E08" offset="100%" />
      </radialGradient>
      <radialGradient
        cx="13.5%"
        cy="40.9%"
        fx="13.5%"
        fy="40.9%"
        r="88.4%"
        id="n"
      >
        <stop stop-color="#A30C00" offset="0%" />
        <stop stop-color="#A30C00" offset="0%" />
        <stop stop-color="#800E08" offset="99%" />
        <stop stop-color="#800E08" offset="100%" />
      </radialGradient>
    </defs>
    <path
      d="M197.5 167.8 51.9 254.2l188.5-12.8 14.5-190-57.4 116.4Z"
      fill="url(#a)"
    />
    <path d="m240.7 241.3-16.2-111.8-44.1 58.2 60.3 53.6Z" fill="url(#b)" />
    <path d="m240.9 241.3-118.7-9.4-69.6 22 188.3-12.6Z" fill="url(#c)" />
    <path d="m52.7 254 29.7-97.1-65.2 13.9L52.7 254Z" fill="url(#d)" />
    <path d="M180.4 188 153 81.3l-78 73.2L180.3 188Z" fill="url(#e)" />
    <path d="m248.7 82.7-73.8-60.2-20.5 66.4 94.3-6.2Z" fill="url(#f)" />
    <path d="m214.2 1-43.4 24L143.4.7l70.8.3Z" fill="url(#g)" />
    <path d="m0 203.4 18.2-33.2-14.7-39.5L0 203.4Z" fill="url(#h)" />
    <path
      d="m2.5 129.5 14.8 42L81.6 157 155 88.8 175.7 23 143 0 87.6 20.8C70.1 37 36.3 69 35 69.8c-1.2.6-22.4 40.6-32.5 59.7Z"
      fill="#FFF"
    />
    <path
      d="M54.4 54c37.9-37.4 86.7-59.6 105.4-40.7 18.8 18.9-1 64.8-39 102.3-37.8 37.5-86 61-104.7 42-18.8-18.8.5-66 38.3-103.5Z"
      fill="url(#i)"
    />
    <path
      d="m52.7 254 29.5-97.5 97.6 31.4c-35.3 33.1-74.6 61-127 66Z"
      fill="url(#j)"
    />
    <path
      d="m155 88.6 25.2 99.3c29.5-31 56-64.3 68.9-105.6l-94 6.3Z"
      fill="url(#k)"
    />
    <path
      d="M248.8 82.8c10-30.2 12.4-73.7-35-81.8l-38.7 21.5 73.7 60.3Z"
      fill="url(#l)"
    />
    <path
      d="M0 203c1.4 50 37.4 50.7 52.8 51.1l-35.5-82.9L0 203Z"
      fill="#9E1209"
    />
    <path
      d="m155.2 88.8 69.3 42.4c1.4.8 19.7-30.8 23.8-48.6l-93 6.2Z"
      fill="url(#m)"
    />
    <path
      d="m82.1 156.5 39.3 75.9c23.3-12.7 41.5-28 58.1-44.5l-97.4-31.4Z"
      fill="url(#n)"
    />
    <path
      d="m17.2 171.3-5.6 66.4c10.5 14.3 25 15.6 40.1 14.5-11-27.4-32.9-82-34.5-80.9Z"
      fill="url(#o)"
    />
    <path
      d="m174.8 22.7 78.1 11C248.8 16 236 4.5 214.1 1l-39.3 21.7Z"
      fill="url(#p)"
    />
  </svg>
);

export { Ruby };

Installation

npx shadcn@latest add @svgl/ruby

Usage

import { Ruby } from "@/components/ruby"
<Ruby />