Skip to content

Instantly share code, notes, and snippets.

@joaohcrangel

joaohcrangel/CreditCardBack.tsx

Created July 29, 2022 01:12
Show Gist options
  • Save joaohcrangel/f347b1bcd3c4d8f7980c92de3a686be4 to your computer and use it in GitHub Desktop.
Save joaohcrangel/f347b1bcd3c4d8f7980c92de3a686be4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CreditCardBack.tsx
import { processFontFamily, useFonts } from 'expo-font';
import * as React from 'react';
import Svg, { SvgProps, G, Path, Rect, Text, TSpan } from 'react-native-svg';
import { useSchedulePaymentCrediCardFlip } from '../../../contexts/SchedulePaymentCrediCardFlipContext/useSchedulePaymentCrediCardFlip';
export function CreditCardBack(props: SvgProps) {
const { cvv, name } = useSchedulePaymentCrediCardFlip();
try {
useFonts({
Teko: require('../../../assets/fonts/Teko.ttf'),
Segoe: require('../../../assets/fonts/Segoe.ttf'),
});
} catch (e) {
console.error(e);
}
return (
<Svg
width="100%"
height="100%"
viewBox="0 0 398 248"
fill="none"
{...props}
>
<G transform="translate(-4292.083 3734.497)">
<G transform="translate(4292.083 -3734.497)">
<Path
d="M590.213,409.912A20.6,20.6,0,0,1,569.527,430.6H213.285A20.6,20.6,0,0,1,192.6,409.912V204.785A20.6,20.6,0,0,1,213.285,184.1H569.527a20.6,20.6,0,0,1,20.685,20.685Z"
transform="translate(-192.6 -184.1)"
fill="#f0f0f0"
/>
</G>
<G transform="translate(4292.657 -3709.215)">
<Rect width="397.038" height="64.353" fill="#333" />
</G>
<G transform="translate(4309.39 -3625.305)">
<Rect width="304.157" height="47.116" fill="#fff" />
</G>
<G transform="translate(4613.478 -3625.9)">
<Rect width="59.555" height="47.116" fill="#e5e3df" />
</G>
<Rect
width="305"
height="6"
transform="translate(4309 -3613)"
fill="#ccc"
/>
<Rect
width="305"
height="7"
transform="translate(4309 -3599)"
fill="#ccc"
/>
<G transform="translate(4309.39 -3531.357)">
<Path
d="M113.935,280.128c-5.782,0-9.206,1.923-9.206,7.472,0,2.3,2.115,4.681,4.234,6.665,1.989,1.861,4.03,3.6,4.972,3.6s2.983-1.736,4.972-3.6c2.119-1.983,4.234-4.369,4.234-6.665C123.141,282.051,119.717,280.128,113.935,280.128Zm-3.87,4.819a.9.9,0,1,1,.9.9A.9.9,0,0,1,110.065,284.947Zm3.87,7.584a2.189,2.189,0,1,1,2.643-2.141A2.432,2.432,0,0,1,113.935,292.531Zm2.968-6.682a.9.9,0,1,1,.9-.9A.9.9,0,0,1,116.9,285.849Z"
transform="translate(-97.457 -271.226)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M95,285.079c-1.853.052-2.53-2.485-1.758-3.949.777-1.387,1.662-1.677,2.267-1.677a2.036,2.036,0,0,1,2.037,1.094A6.975,6.975,0,0,0,95,285.079"
transform="translate(-88.631 -270.721)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M92.377,244.835c.53,0,.865,3.134,1.166,3.8.154.339.426.157.629-.359.522-1.326,1.546-3.048,1.794-2.982s.063,1.908-.086,3.288c-.066.616.16.7.535.21.122-.161.827-1.1,1.123-1.025.07.017.151.075.165.435.01.269.335.129.787-.295.669-.628,1.325-1.25,1.473-1.12s-.205,1.133-.527,2.066c-.2.587-.138.868.177.661.138-.091.623-.405.763-.226.036.046.1.113-.049.508-.1.276.213.213.739-.115.715-.446,1.431-.884,1.541-.783.146.134-.323.993-.827,1.922-.3.545.045.589.4.369a5.833,5.833,0,0,1,1.182-.531c.2-.048,1-.557.345,1.148-.114.3.194.384.461.32a6.275,6.275,0,0,1,1.839-.31.423.423,0,0,1,.372.138c.1.162,0,.417-1.02,1.464-.125.128-.1.243.27.322,2.216.469,2.073.868,2.039.98s-.467.259-1.03.545c-.394.2-.275.536.27.832,1.447.786,1.365,1.093,1.35,1.16s-.042.163-.358.246c-.245.064-.1.316.319.637.374.291.687.542.634.678s-.437.185-.91.264c-.522.084-.671.363-.36.682.472.482.4.607.349.667a.578.578,0,0,1-.441.111c-.248-.009-.157.09-.048.165.227.157,1.342,1.037,1.3,1.224-.016.085-.343.024-.8-.07s-.657-.186-.584.088-.295.444-.58.483a3.8,3.8,0,0,1-.517.027c-.545,0-.638.519-.941,1A8.6,8.6,0,0,1,99.64,267.1c1.559-1.679,3.009-3.743,3.009-5.886,0-.329-.012-.645-.034-.952,2.634-.054,3.678-3.415,2.574-5.51l-.006-.012-.007-.012a3.786,3.786,0,0,0-3.2-2.222,3.078,3.078,0,0,0-2.93,1.563,13.626,13.626,0,0,0-6.673-1.393,13.626,13.626,0,0,0-6.673,1.393,3.078,3.078,0,0,0-2.93-1.563,3.787,3.787,0,0,0-3.2,2.222l-.007.012-.006.012c-1.1,2.1-.059,5.456,2.575,5.51-.022.306-.034.623-.034.952,0,2.144,1.449,4.207,3.008,5.886a8.6,8.6,0,0,1-5.677-3.637c-.3-.484-.4-1-.941-1a3.79,3.79,0,0,1-.517-.027c-.285-.038-.653-.209-.58-.483s-.135-.177-.584-.088-.787.155-.8.07c-.04-.187,1.075-1.066,1.3-1.224.109-.075.2-.174-.048-.165a.579.579,0,0,1-.441-.111c-.053-.061-.122-.185.35-.667.31-.32.161-.6-.36-.682-.472-.079-.856-.129-.91-.264s.26-.386.634-.678c.415-.321.565-.573.319-.637-.316-.083-.345-.192-.358-.246s-.1-.374,1.349-1.16c.545-.3.664-.632.27-.832-.564-.286-1-.431-1.031-.545s-.177-.511,2.039-.98c.375-.079.4-.194.27-.322-1.022-1.047-1.123-1.3-1.02-1.464a.423.423,0,0,1,.372-.138,6.275,6.275,0,0,1,1.838.31c.267.064.575-.022.461-.32-.652-1.705.146-1.2.345-1.148a5.833,5.833,0,0,1,1.182.531c.351.22.692.177.4-.369-.5-.929-.973-1.788-.827-1.922.109-.1.826.337,1.541.783.526.328.84.39.739.115-.144-.4-.085-.462-.049-.508.139-.179.625.135.762.226.315.208.379-.074.177-.661-.322-.933-.664-1.945-.527-2.066s.8.492,1.473,1.12c.452.424.777.563.787.295.014-.36.095-.418.165-.435.3-.072,1,.865,1.123,1.025.375.494.6.407.536-.21-.149-1.381-.332-3.223-.086-3.288s1.272,1.655,1.794,2.982c.2.517.475.7.629.359.3-.661.635-3.791,1.166-3.8"
transform="translate(-75.899 -244.835)"
fill="#ff760c"
fillRule="evenodd"
/>
<Path
d="M173.77,285.079c1.853.052,2.53-2.485,1.759-3.949-.777-1.387-1.662-1.677-2.267-1.677a2.036,2.036,0,0,0-2.037,1.094,6.974,6.974,0,0,1,2.545,4.532"
transform="translate(-147.181 -270.721)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M136.669,316.689c-.848,0-1.537.466-1.537,1.04s.689,1.04,1.537,1.04,1.538-.465,1.538-1.04S137.518,316.689,136.669,316.689Zm0,.651c-.664,0-1.144.424-1.132.281.035-.411.681-.65,1.132-.65s1.1.239,1.132.65C137.813,317.764,137.333,317.34,136.669,317.34Z"
transform="translate(-120.192 -298.565)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M244.422,276.172v6.757h1.631v-7.085c0-1.534-.763-5.366-4.947-5.387a5.413,5.413,0,0,0-3.985,1.833v-8.5h-1.63v19.141h1.63v-6.536c0-3.639,2.236-4.464,3.9-4.4,2.364.092,3.406,2.082,3.406,4.178"
transform="translate(-195.237 -259.007)"
fill="#ff760c"
fillRule="evenodd"
/>
<Path
d="M293.722,289.083a6.638,6.638,0,0,1,4.709,1.951l-1.153,1.153a5.028,5.028,0,1,0,0,7.111l1.153,1.153a6.659,6.659,0,1,1-4.709-11.368"
transform="translate(-233.801 -277.922)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M348.488,290.714a5.028,5.028,0,1,1-5.028,5.028,5.029,5.029,0,0,1,5.028-5.028m0-1.631a6.659,6.659,0,1,1-6.659,6.659A6.659,6.659,0,0,1,348.488,289.083Z"
transform="translate(-274.754 -277.922)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M416.016,276.816h-.005V276.6a5.028,5.028,0,1,0,.005.231Zm-5.029-6.647a6.643,6.643,0,0,1,5.023,2.287v-8.668h1.634v12.863c0,.059,0,.117,0,.176a6.659,6.659,0,1,1-6.659-6.659Z"
transform="translate(-321.489 -259.007)"
fill="#79756c"
fillRule="evenodd"
/>
<Path
d="M478.064,293.666a5.029,5.029,0,0,0-9.587,2.569Zm-6.306-4.36a6.659,6.659,0,0,1,8.156,4.709,6.732,6.732,0,0,1,.163.8L468.9,297.809a5.029,5.029,0,0,0,8.937.442l1.412.815a6.659,6.659,0,1,1-7.49-9.762Z"
transform="translate(-368.219 -277.918)"
fill="#79756c"
fillRule="evenodd"
/>
</G>
<Text transform="translate(4644 -3593)" fill="#333" fontSize="35">
<TSpan
x="-15.795"
y="0"
fontFamily={String(processFontFamily('Teko'))}
>
{cvv}
</TSpan>
</Text>
<Text transform="translate(4230 -3617)" fill="#333" fontSize="22">
<TSpan
x="89.566"
y="21"
fontFamily={String(processFontFamily('Segoe'))}
>
{name}
</TSpan>
</Text>
</G>
</Svg>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment