getGradient(slug) { return ( <linearGradient id={`graph__gradient--${slug}`} x1="0%" y1="0%" x2="0%" y2="100%"> <stop className={`graph__gradient--top graph__gradient--top--${slug}`} offset="0%" /> <stop className={`graph__gradient--bottom graph__gradient--bottom--${slug}`} offset="100%" /> </linearGradient> ); }
const GradientIcon = () => { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 442 232"> <defs> <linearGradient id="a" x1="50%" x2="50%" y1="100%" y2="0%"> <stop stopColor="#FFF" offset="0%"/> <stop offset="100%"/> </linearGradient> </defs> <path fill="url(#a)" fillOpacity=".3" fillRule="evenodd" d="M798 1401h441.191117v232H798z" style={{mixBlendMode: "multiply"}} transform="rotate(-180 619.596 816.5)"/> </svg> ) }
render () { return ( <AreaChart width={750} height={300} data={data.data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}> <defs> <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#1bc98e" stopOpacity={0.8}/> <stop offset="95%" stopColor="#1bc98e" stopOpacity={0}/> </linearGradient> <linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#1ca8dd" stopOpacity={0.8}/> <stop offset="95%" stopColor="#1ca8dd" stopOpacity={0}/> </linearGradient> </defs> <XAxis dataKey="date" /> <YAxis /> <CartesianGrid strokeDasharray="3 3" fill="rgba(37, 40, 48, 0.3)" vertical={false} horizontal={false}/> <Tooltip /> <Area type="monotone" dataKey="bitcoin" stroke="#1bc98e" fillOpacity={1} fill="url(#colorUv)" /> <Area type="monotone" dataKey="ether" stroke="#1ca8dd" fillOpacity={1} fill="url(#colorPv)" /> </AreaChart> ); }
const Defs = () => ( <defs> <linearGradient x1='53.9023438%' y1='0%' x2='53.9023459%' y2='100%' id='linearGradient-1'> <stop stopColor='#A3A3A3' offset='0%' /> <stop stopColor='#999999' offset='100%' /> </linearGradient> </defs> )
chordData.map(chord => { const { source, target } = chord; const x1 = (innerRadius - 2) * Math.cos((source.endAngle - source.startAngle)/2 + source.startAngle - Math.PI/2); const y1 = (innerRadius - 2) * Math.sin((source.endAngle - source.startAngle)/2 + source.startAngle - Math.PI/2); const x2 = (innerRadius - 2) * Math.cos((target.endAngle - target.startAngle)/2 + target.startAngle - Math.PI/2); const y2 = (innerRadius - 2) * Math.sin((target.endAngle - target.startAngle)/2 + target.startAngle - Math.PI/2); return ( <linearGradient key={this.getGradientId(chord)} id={this.getGradientId(chord)} gradientUnits="userSpaceOnUse" x1={x1} y1={y1} x2={x2} y2={y2} > <stop offset="0%" stopColor={fill(source.index)} /> <stop offset="100%" stopColor={fill(target.index)} /> </linearGradient> ); })
<linearGradient id="MyGradient" x1="0" y1="100%" x2="0" y2="0%"> <stop offset="0%" stopColor="#b5d0ff" stopOpacity={0.2} /> <stop offset="70%" stopColor="#6fa4fc" stopOpacity={0.4} />
const TelegramIcon = () => ( <svg width='70px' height='70px' viewBox='153 264 70 70'> <title>Telegram</title> <desc>The Telegram Logo</desc> <defs> <linearGradient x1='66.67%' y1='16.67%' x2='41.67%' y2='75%' id='linearGradient-1'> <stop stopColor='#37AEE2' offset='0%' /> <stop stopColor='#1E96C8' offset='100%' /> </linearGradient> <linearGradient x1='61.2346759%' y1='43.69%' x2='74.7064382%' y2='80.24%' id='linearGradient-2'> <stop stopColor='#EFF7FC' offset='0%' /> <stop stopColor='#FFFFFF' offset='100%' /> </linearGradient> </defs> <g id='Telegram_logo' stroke='none' strokeWidth='1' fill='none' fillRule='evenodd' transform='translate(153.000000, 264.000000)'> <circle id='Oval' fill='url(#linearGradient-1)' cx='35' cy='35' r='35' /> <path d='M28.5833333,51.0416667 C27.44945,51.0416667 27.642125,50.6135292 27.2510583,49.5338958 L23.9166667,38.5600542 L49.5833333,23.3333333' id='Shape' fill='#C8DAEA' /> <path d='M28.5833333,51.0416667 C29.4583333,51.0416667 29.8449375,50.6415 30.3333333,50.1666667 L35,45.6289167 L29.1789167,42.1187083' id='Shape' fill='#A9C9DD' /> <path d='M29.1783333,42.1195833 L43.2833333,52.5405417 C44.8928958,53.4286375 46.054575,52.968825 46.4555,51.0461875 L52.1969583,23.9903125 C52.7847833,21.6335875 51.2985958,20.5646875 49.7588,21.2637542 L16.04505,34.2636292 C13.7437708,35.1866667 13.7571875,36.4705542 15.625575,37.0426292 L24.2772833,39.7429667 L44.3069083,27.1065083 C45.2524625,26.5331208 46.1202875,26.8413862 45.4080083,27.4735417' id='Shape' fill='url(#linearGradient-2)' /> </g> </svg> )
<AreaChart data={props.data} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}> <defs> <linearGradient id="colorIncome" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} /> <stop offset="95%" stopColor="#82ca9d" stopOpacity={0} /> </linearGradient> <linearGradient id="colorExpenses" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} /> <stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
<linearGradient id="colorPeritus" x1="0" y1="0" x2="0" y2="1"> <stop offset="5%" stopColor="#c034f7" stopOpacity={1} /> <stop offset="95%" stopColor="#26d3fc" stopOpacity={1} />
<svg width={2 * maxWidth + marginLeft} height={maxHeight + marginTop}> <defs> <linearGradient id="areaGradient" gradientUnits="userSpaceOnUse"
<linearGradient id={linearId} x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stopColor="#64bbe8"/> <stop offset="80%" stopColor="#c5aed3"/>
<linearGradient id='prefix__editing-gradow-gradient' x2={1}
const PieChart = (props) => { return ( <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="80" height="80" viewBox="-10 -10 220 220"> <defs> <linearGradient id="grey" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor="#efefef"></stop> <stop offset="100%" stopColor="#efefef"></stop> </linearGradient> <linearGradient id="orange" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1"> <stop offset="0%" stopColor="#ffbe88"></stop> <stop offset="100%" stopColor="#ffbe88"></stop> </linearGradient> </defs> <g fill="none" strokeWidth="18" transform="translate(100,100)"> <circle cx="0" cy="0" r="100" stroke="url(#grey)"></circle> <path className="animatingProgress progressPath" d="M 0, -100 A 100, 100, 0, 1, 1, -58.778016907718, 80.902068752264" stroke="url(#orange)"></path> </g> <text fill="#334659" fontSize="30" x="0%" y="29%" textAnchor="middle"> <tspan id="predictionData" x="47%" dy="1em" textAnchor="middle">60%</tspan> <tspan id="predictionDataCount" x="47%" dy="1em" textAnchor="middle">Accuracy</tspan> </text> </svg> ); }
gradient() { return ( <GradientDefs> <linearGradient id="borderGradient" gradientUnits="userSpaceOnUse"> <stop offset="10%" stopColor="#c5cae9" stopOpacity={0.3} /> <stop offset="33%" stopColor="#9fa8da" stopOpacity={0.3} /> <stop offset="66%" stopColor="#7986cb" stopOpacity={0.3} /> <stop offset="90%" stopColor="#3f51b5" stopOpacity={0.3} /> </linearGradient> </GradientDefs> ); }
const PythonIcon = () => { return ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"> <linearGradient id="a" gradientUnits="userSpaceOnUse" d="M63.391 1.988c-4.222.02-8.252.379-11.8 1.007-10.45 1.846-12.346 5.71-12.346 12.837v9.411h24.693v3.137h-33.961c-7.176 0-13.46 4.313-15.426 12.521-2.268 9.405-2.368 15.275 0 25.096 1.755 7.311 5.947 12.519 13.124 12.519h8.491v-11.282c0-8.151 7.051-15.34 15.426-15.34h24.665c6.866 0 12.346-5.654 12.346-12.548v-23.513c0-6.693-5.646-11.72-12.346-12.837-4.244-.706-8.645-1.027-12.866-1.008zm-13.354 7.569c2.55 0 4.634 2.117 4.634 4.721 0 2.593-2.083 4.69-4.634 4.69-2.56 0-4.633-2.097-4.633-4.69-.001-2.604 2.073-4.721 4.633-4.721z" /> <linearGradient id="b" gradientUnits="userSpaceOnUse"