Public
Edited
Jan 15, 2024
orange = '#F7AE70'
green = '#B4B851'
pink = '#DC91BD'
white = '#FFFFFF'
purple = '#C5A1FF'
yellow = '#F8C851'
workaroundBackground = {
const background = 'linear-gradient(207deg, rgba(247,174,112,.7), rgba(247,174,112,.5), rgba(220,145,189,.2), rgba(255,255,255,.1) 70%),linear-gradient(157deg, rgba(180,255,81,.5), rgba(180,255,81,.3), rgba(180,184,81,.2), rgba(255,255,255, .1) 70%),linear-gradient(306deg, rgba(255,255,255, .1), rgba(197,161,255,0.3) 70%);'
return htl.html`<div style="width: 256px; height: 256px;background-size: 100% 100%;background-image: ${background};" />`
}
rasterTarget = FileAttachment("Gradient_AI_Search.png").image()
radialBasedSixPointGradient = {
const backgroundImageSource = `
<svg preserveAspectRatio="none" viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<defs>
<radialGradient id='g' >
<stop offset='0' stop-color='#fff' stop-opacity='1'/>
<stop offset='1' stop-color='#fff' stop-opacity='0'/>
</radialGradient>
<mask id='green'>
<circle cx='0' cy='0.5' r='0.6' fill='url(#g)'/>
</mask>
<mask id='orange'>
<circle cx='1' cy='0.3' r='1' fill='url(#g)'/>
</mask>
<mask id='pink'>
<circle cx='0.5' cy='0.7' r='0.4' fill='url(#g)'/>
</mask>
<mask id='purple'>
<circle cx='0.8' cy='1' r='1' fill='url(#g)'/>
</mask>
<mask id='yellow'>
<circle cx='0.2' cy='-0.5' r='1' fill='url(#g)'/>
</mask>
<mask id='white-1'>
<circle cx='-0.2' cy='1.2' r='1' fill='url(#g)'/>
</mask>
<mask id='white-2'>
<circle cx='0.3' cy='0.5' r='0.5' fill='url(#g)'/>
</mask>
<mask id='white-3'>
<circle cx='0.8' cy='-0.2' r='0.5' fill='url(#g)'/>
</mask>
</defs>
<rect x='0' y='0' width='1' height='1' fill='${green}' opacity="0.5" mask='url(#green)'/>
<rect x='0' y='0' width='1' height='1' fill='${orange}' opacity="0.6" mask='url(#orange)'/>
<rect x='0' y='0' width='1' height='1' fill='${pink}' opacity="0.5" mask='url(#pink)'/>
<rect x='0' y='0' width='1' height='1' fill='${purple}' opacity="0.5" mask='url(#purple)'/>
<rect x='0' y='0' width='1' height='1' fill='${yellow}' opacity="0.5" mask='url(#yellow)'/>
<rect x='0' y='0' width='1' height='1' fill='${white}' opacity="0.5" mask='url(#white-1)'/>
<rect x='0' y='0' width='1' height='1' fill='${white}' opacity="0.3" mask='url(#white-2)'/>
<rect x='0' y='0' width='1' height='1' fill='${white}' opacity="0.75" mask='url(#white-3)'/>
</svg>
`
return testDiv(backgroundImageSource)
}
linearBasedFourPointGradient = {
const backgroundImageSource = `
<svg width="256" height="256" preserveAspectRatio='none' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id='g' >
<stop offset='0' stop-color='#fff' stop-opacity='0'/>
<stop offset='1' stop-color='#fff' stop-opacity='1'/>
</linearGradient>
<mask id='m'>
<rect x='0' y='0' width='1' height='1' fill='url(#g)'/>
</mask>
<linearGradient id='a' gradientTransform='rotate(90)'>
<stop offset='0' stop-color='${green}'/>
<stop offset='1' stop-color='${purple}'/>
</linearGradient>
<linearGradient id='b' gradientTransform='rotate(90)'>
<stop offset='0' stop-color='${pink}'/>
<stop offset='1' stop-color='${orange}'/>
</linearGradient>
</defs>
<rect x='0' y='0' width='1' height='1' fill='url(#a)' mask='url(#m)'/>
<rect x='0' y='0' width='1' height='1' fill='url(#b)' mask='url(#m)' transform='translate(1,1) rotate(180)'/>
</svg>
`
return testDiv(backgroundImageSource)
}
referenceSvgFourPointGradient = {
const exampleSvg = `%3Csvg preserveAspectRatio='none' viewBox='0 0 1 1' version='1.1' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='1'%3E%3C/stop%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23g)'%3E%3C/rect%3E%3C/mask%3E%3ClinearGradient id='a' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='magenta'%3E%3C/stop%3E%3Cstop offset='1' stop-color='white'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientTransform='rotate(90)'%3E%3Cstop offset='0' stop-color='yellow'%3E%3C/stop%3E%3Cstop offset='1' stop-color='red'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23a)' mask='url(%23m)'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='1' fill='url(%23b)' mask='url(%23m)' transform='translate(1,1) rotate(180)'%3E%3C/rect%3E%3C/svg%3E`
return testDiv(exampleSvg, true)
}
testDiv = (backgroundImageString, skipEncoding = false) => {
const backgroundImage = `url("data:image/svg+xml;utf8,${skipEncoding ? backgroundImageString : encodeURIComponent(backgroundImageString)}")`
return htl.html`<div style="width: 256px; height: 128px;background-size: 100% 100%;background-image: ${backgroundImage};" />`
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
