1import { palette } from '@expo/styleguide-base'; 2 3export const SnackImage = () => ( 4 <svg 5 style={{ 6 position: 'absolute', 7 right: 20, 8 bottom: 24, 9 }} 10 width="80" 11 height="81" 12 viewBox="0 0 80 81" 13 fill="none" 14 xmlns="http://www.w3.org/2000/svg"> 15 <g filter="url(#inset-shadow)"> 16 <circle 17 cx="68.2409" 18 cy="15.9358" 19 r="11.6439" 20 css={{ fill: 'var(--orange7)', '.dark-theme &': { fill: 'var(--orange11)' } }} 21 /> 22 </g> 23 <g> 24 <path 25 d="M34.9717 40.887V80.8089L0.0400391 60.8479V20.926L34.9717 40.887Z" 26 css={{ fill: 'var(--orange8)', '.dark-theme &': { fill: 'var(--orange8)' } }} 27 /> 28 <path 29 d="M51.607 32.5704V10.946L34.9729 20.9265V40.8875L51.607 32.5704Z" 30 css={{ fill: 'var(--orange11)', '.dark-theme &': { fill: 'var(--orange6)' } }} 31 /> 32 <path 33 d="M68.2403 40.8871L51.6062 32.5701L36.6355 40.8871L51.6062 49.2042L68.2403 40.8871Z" 34 fill="var(--orange8)" 35 /> 36 <path 37 d="M34.9729 40.8871V80.809L68.2412 60.848V40.8871L51.607 49.2042V30.9066L34.9729 40.8871Z" 38 css={{ fill: 'var(--orange11)', '.dark-theme &': { fill: 'var(--orange6)' } }} 39 /> 40 <path 41 d="M34.9723 0.964966L0.0406494 20.9259L34.9723 40.8869L51.6064 30.9064L34.9723 20.9259L51.6064 10.9454L34.9723 0.964966Z" 42 css={{ fill: 'var(--orange7)', '.dark-theme &': { fill: 'var(--orange11)' } }} 43 /> 44 </g> 45 <filter id="inset-shadow"> 46 <feOffset dx="1" dy="-3" /> 47 <feGaussianBlur stdDeviation="2.5" result="offset-blur" /> 48 <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" /> 49 <feFlood floodColor={palette.light.orange11} floodOpacity=".8" result="color" /> 50 <feComposite operator="in" in="color" in2="inverse" result="shadow" /> 51 <feComposite operator="over" in="shadow" in2="SourceGraphic" /> 52 </filter> 53 </svg> 54); 55