I don't actually know how to program I just ask @FransAris
Published
Edited
Mar 11, 2020
1 star
{
let vector_attr = vector._attributes;
let ratio =
vector_attr['android:viewportWidth'] /
vector_attr['android:viewportHeight'];
let height = 300;
let width = height * ratio;
let svg_element = htl.svg`<svg
xmlns="http://www.w3.org/2000/svg"
width="${width}px"
height="${height}px"
viewBox=${`0 0 ${vector_attr['android:viewportWidth']} ${vector_attr['android:viewportHeight']}`}
>
${possibly_array(vector.path).map(map_path)}
${possibly_array(vector.group).map(map_group)}
</svg>`;
return htl.html`<div
class="checkerboard"
style="
padding: 20px;
display: inline-block
"
>${svg_element}</div>`;
}
map_gradient = gradient => {
let attrs = gradient._attributes;
let id = uuid();
let fragment = htl.svg.fragment`
<linearGradient
id=${id}
x1=${attrs['android:startX']}
y1=${attrs['android:startY']}
x2=${attrs['android:endX']}
y2=${attrs['android:endY']}
>
${gradient.item.map(
({ _attributes: attrs }) => htl.svg.fragment`
<stop
offset="${attrs['android:offset'] * 100}%"
stop-color=${transform_color(attrs['android:color'])}
/>
`
)}
</linearGradient>
`;
return {
fragment: fragment,
attributes: {
['android:fillColor']: `url('#${id}')`
}
};
}
map_aapt_attr = attr => {
return [...possibly_array(attr.gradient).map(map_gradient)];
}
map_group = group => {
let transforms = [];
if (group._attributes['android:rotation']) {
let rotation = group._attributes['android:rotation'];
// Important: This rotation is unitless, uses degree
transforms.push(`rotate(${rotation})`);
}
let transform_origin = `${group._attributes['android:pivotX'] || 0}px ${group
._attributes['android:pivotY'] || 0}px`;
return htl.svg.fragment`
<g
transform=${transforms.join(' ')}
transform-origin=${transform_origin}
>
${svg_title(group._attributes['android:name'])}
${possibly_array(group.path).map(map_path)}
</g>
`;
}
map_path = path => {
let complex_attrs = path['aapt:attr']
? map_aapt_attr(not_an_array(path['aapt:attr']))
: [];
let attrs = { ...path._attributes };
for (let complex_attr of complex_attrs) {
attrs = {
...attrs,
...complex_attr.attributes
};
}
return htl.svg.fragment`
${complex_attrs.map(x => x.fragment)}
<path
d=${attrs['android:pathData']}
fill=${transform_color(attrs['android:fillColor']) || `none`}
stroke-linejoin=${attrs['android:strokeLineJoin']}
stroke-linecap=${attrs['android:strokeLineCap']}
stroke-miterlimit=${attrs['android:strokeMiterLimit']}
stroke-width=${attrs['android:strokeWidth']}
stroke=${transform_color(attrs['android:strokeColor'])}
fill-rule=${attrs['android:fillType']}
opacity=${attrs['android:fillAlpha']}
>
${svg_title(path._attributes['android:name'])}
</path>
`;
}
svg_title = name => {
if (name == null) {
return null;
}
return htl.svg.fragment`<title>${name}</title>`;
}
EXAMPLES = ({
ANDROID_BASIC: `
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="24dp"
android:width="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group
android:name="rotationGroup"
android:pivotX="10.0"
android:pivotY="10.0"
android:rotation="15.0" >
<path
android:name="vect"
android:fillColor="#FF000000"
android:pathData="M15.67,4H14V2h-4v2H8.33C7.6,4 7,4.6 7,5.33V9h4.93L13,7v2h4V5.33C17,4.6 16.4,4 15.67,4z"
android:fillAlpha=".3"/>
<path
android:name="draw"
android:fillColor="#FF000000"
android:pathData="M13,12.5h2L11,20v-5.5H9L11.93,9H7v11.67C7,21.4 7.6,22 8.33,22h7.33c0.74,0 1.34,-0.6 1.34,-1.33V9h-4v3.5z"/>
</group>
</vector>
`,
LIMBIC_LOGO: `
<vector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:width="24dp"
android:height="25dp"
android:viewportWidth="24"
android:viewportHeight="25">
<path
android:pathData="M17.6689,20.6261C17.42,19.6161 16.8802,18.6583 16.0526,17.8724L11.8403,13.8719C11.0826,13.1523 11.0517,11.9548 11.7713,11.1971C11.7937,11.1735 11.8167,11.1505 11.8403,11.1281L16.0526,7.1276C16.6588,6.552 17.1106,5.8857 17.4067,5.1735C17.4789,5.0001 17.5662,4.7346 17.6689,4.377C17.9689,4.6619 18.194,4.8756 18.344,5.0181C19.0538,5.6922 20.1186,6.7034 21.5382,8.0517C24.121,10.5045 24.121,14.4955 21.5382,16.9514L17.6689,20.6261ZM9.481,24.1136L8.5112,23.1926C8.5015,23.1834 8.4921,23.1742 8.4818,23.1649C7.2473,21.9769 6.5681,20.4112 6.5681,18.7412C6.5681,17.4344 6.9854,16.1869 7.7616,15.1367C8.0231,14.7829 8.5219,14.7081 8.8756,14.9696C8.9019,14.989 8.927,15.01 8.9507,15.0325C8.981,15.0614 9.0092,15.0881 9.0352,15.1128C10.1378,16.1599 11.7916,17.7306 13.9968,19.8249C15.2413,21.0099 15.2413,22.9316 13.9968,24.1136C12.7493,25.2955 10.7255,25.2955 9.481,24.1136ZM8.5112,1.8105L9.481,0.8864C10.7255,-0.2955 12.7493,-0.2955 13.9968,0.8864C15.2413,2.0684 15.2413,3.9932 13.9968,5.1751C11.7497,7.3092 10.0644,8.9097 8.9409,9.9767C8.9301,9.987 8.9188,9.9977 8.9071,10.0089L8.9071,10.0088C8.6094,10.2915 8.139,10.2794 7.8563,9.9817C7.8372,9.9616 7.8193,9.9404 7.8025,9.9183C7,8.8575 6.5681,7.5909 6.5681,6.2588C6.5681,4.5919 7.2473,3.0231 8.4818,1.8381C8.4921,1.8289 8.5015,1.8197 8.5112,1.8105ZM1.9395,16.9514C-0.6465,14.4955 -0.6465,10.5045 1.9395,8.0517L3.6624,6.4154C3.6914,8.122 4.2165,9.7515 5.1721,11.1566C5.7266,11.9721 5.7229,13.0446 5.1625,13.8562C5.1623,13.8565 5.1621,13.8568 5.1619,13.8571C4.2116,15.2601 3.6913,16.8864 3.6624,18.5877L1.9395,16.9514Z"
android:strokeWidth="1"
android:fillType="nonZero"
android:strokeColor="#00000000">
<aapt:attr name="android:fillColor">
<gradient
android:startY="22.27875"
android:startX="5.803588"
android:endY="3.222051"
android:endX="18.52038"
android:type="linear">
<item android:offset="0" android:color="#FFFF6494"/>
<item android:offset="1" android:color="#FFFF7A7A"/>
</gradient>
</aapt:attr>
</path>
</vector>
`
})
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.
