{"id":342448,"date":"2021-06-21T07:32:45","date_gmt":"2021-06-21T14:32:45","guid":{"rendered":"https:\/\/css-tricks.com\/?p=342448"},"modified":"2021-06-21T07:32:48","modified_gmt":"2021-06-21T14:32:48","slug":"how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-create-css-charts-with-interesting-shapes-glyphs-and-emoji\/","title":{"rendered":"How to Create CSS Charts With Interesting Shapes, Glyphs and Emoji"},"content":{"rendered":"\n<p>Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover &#x1fa84;<\/p>\n\n\n\n<p>I\u2019ll show you how to create charts with interesting shapes using glyphs, CSS shapes, and emojis with minimal effort.<\/p>\n\n\n\n<p>Let\u2019s start with a simple example.<\/p>\n\n\n\n<!--more-->\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-glyphs\">Using glyphs<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jOBLpqj\" src=\"\/\/codepen.io\/anon\/embed\/jOBLpqj?height=500&amp;theme-id=1&amp;slug-hash=jOBLpqj&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jOBLpqj\" title=\"CodePen Embed jOBLpqj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div id=\"chart\">\n  &lt;div id=\"chart-shape\">\u2b20&lt;\/div>\n  &lt;div id=\"chart-value\">&lt;\/div> \n&lt;\/div><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#chart {\n  width: 300px; \n  height: 300px;\n  display: grid;\n  background: white;\n}\n#chart * {\n  height: inherit;\n  grid-area: 1 \/ 1;\n}<\/code><\/pre>\n\n\n\n<p>We first give the chart some dimensions and stack the two div inside it by assigning them to the same grid cell. They can be stacked up using any other way, too \u2014 with <code>position<\/code> property, for instance.<\/p>\n\n\n\n<p>Look at the HTML above one more time. One of the divs has a pentagon symbol\u2009\u2014\u2009the chart shape we want. I added that symbol using the \u201cEmoji and Symbols\u201d keyboard, though it can also be done with the HTML entity value for pentagon, <code>&amp;#x2B20;<\/code>, inside the div.<\/p>\n\n\n\n<p>The div with the symbol is then styled with CSS font properties as well as a desired chart color. It\u2019s large enough and centered.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#chart-shape {\n  font: 300px\/300px serif;\n  text-align: center; \n  color: limegreen;\n}<\/code><\/pre>\n\n\n\n<p>To the second div in the HTML contains a conic gradient background image. The percentage of the gradient represents the <strong>visual value<\/strong> of the chart. The same div also has <code>mix-blend-mode: screen;<\/code>.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"3\"><code markup=\"tt\">#chart-value {\n  background: conic-gradient(transparent 75%, darkseagreen 75%);\n  mix-blend-mode: screen;\n}<\/code><\/pre>\n\n\n\n<p>The <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/mix-blend-mode\/\"><code>mix-blend-mode<\/code><\/a> property blends colors inside an element with its backdrop. The <code>screen<\/code> blend mode value causes a lighter blend to come through. A lighter green shows through the portion where the <code>darkseagreen<\/code> colored part of the conic gradient overlaps with the <code>limegreen<\/code> colored pentagram, while the rest of the <code>darskseagreen<\/code> gradient disappears against the white backdrop of the chart.<\/p>\n\n\n\n<p>An alternative to adding the chart shape in the HTML is to add it as another background layer in CSS and use <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/background-blend-mode\/\">background-blend-mode<\/a><\/code> instead of <code>mix-blend-mode<\/code>. However, the code for a chart shape inside the CSS can be less legible for a quick glance. So it&#8217;s up to you to see where it&#8217;ll be easier for you to add the chart shape in: HTML or CSS. You&#8217;ve both options. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"10\"><code markup=\"tt\">#chart {\n  width: 300px; \n  height: 300px;\n  background:\n  url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>&lt;foreignObject width='300px' height='100%'>&lt;div xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='font:300px\/300px serif;color:limegreen;text-align: center;background:white'>\u2b20&lt;\/div>&lt;\/foreignObject>&lt;\/svg>\"),\n  conic-gradient(transparent 75%, darkseagreen 75%);\n  background-blend-mode: screen;\n}<\/code><\/pre>\n\n\n\n<p>The pentagon symbol is added as a background image in addition to the conic gradient. Then, finally, the property-value pair <code>background-blend-mode: screen;<\/code> kicks in and the result looks same as the previous demo.<\/p>\n\n\n\n<p>The pentagon background image is created by embedding the HTML with the pentagon symbol (<code>\u2b20<\/code>) into an SVG that is embedded into a data URL.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;!-- Unwrapped SVG code from the Data URL -->\n&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>\n  &lt;foreignObject width='300px' height='100%'>\n    &lt;div xmlns='http:\/\/www.w3.org\/1999\/xhtml' \n         style='\n          font:300px\/300px serif;\n          color:limegreen;\n          text-align: center;\n          background:white;'>\n          \u2b20\n    &lt;\/div>\n  &lt;\/foreignObject>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>Which becomes this in CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background: url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>&lt;foreignObject width='300px' height='100%'>&lt;div xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='font:300px\/300px serif;color:limegreen;text-align: center;background:white'>\u2b20&lt;\/div>&lt;\/foreignObject>&lt;\/svg>\");<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-css-shapes\">Using CSS shapes<\/h3>\n\n\n<p>Next, let\u2019s use CSS shapes in place of symbols. CSS shapes are primarily created with the use of border properties. We have <a href=\"https:\/\/css-tricks.com\/the-shapes-of-css\/\">a collection of CSS shapes<\/a> in our archive for your reference.<\/p>\n\n\n\n<p>Here\u2019s a set of properties that can create a simple triangle shape in an element we\u2019ll later add to the SVG, replacing the symbol:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">border: 150px solid white; \nborder-bottom: 300px solid lime; \nborder-top: unset;<\/code><\/pre>\n\n\n\n<p>When combined with the conic gradient and the background blend, the result is:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div id=\"chart\">&lt;\/div><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#chart {\n  width: 300px;\n  height: 300px;\n  background:\n  url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>&lt;foreignObject width='300px' height='100%'>&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'>&lt;div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'>&lt;\/div>&lt;div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'>&lt;\/div>&lt;\/html>&lt;\/foreignObject>&lt;\/svg>\"),\n  conic-gradient(transparent 75%, darkseagreen 75%);\n  background-blend-mode: screen;\n}<\/code><\/pre>\n\n\n\n<p>To restrict the design to the border, a smaller white triangle was added to the design.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;!-- Unwrapped SVG code from the Data URL -->\n&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>\n  &lt;foreignObject width='300px' height='100%'>\n   &lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'>\n    \/* green triangle *\/\n    &lt;div style='\n         border: 150px solid white; \n         border-bottom: 300px solid lime; \n         border-top: unset'>&lt;\/div>\n    \/* smaller white triangle *\/\n    &lt;div style='\n         border: 150px solid transparent; \n         border-bottom: 300px solid white; \n         border-top: unset; \n         transform: scale(0.8) translateY(-360px);'>&lt;\/div>\n   &lt;\/html>\n  &lt;\/foreignObject>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>Which, again, becomes this in CSS:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">background: url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>&lt;foreignObject width='300px' height='100%'>&lt;html xmlns='http:\/\/www.w3.org\/1999\/xhtml'>&lt;div style='border:150px solid white; border-bottom:300px solid lime; border-top:unset'>&lt;\/div>&lt;div style='border:150px solid transparent; border-bottom:300px solid white; border-top:unset; transform:scale(0.8) translateY(-360px);'>&lt;\/div>&lt;\/html>&lt;\/foreignObject>&lt;\/svg>\");<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOmzNZP\" src=\"\/\/codepen.io\/anon\/embed\/gOmzNZP?height=450&amp;theme-id=1&amp;slug-hash=gOmzNZP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOmzNZP\" title=\"CodePen Embed gOmzNZP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-emojis\">Using emojis<\/h3>\n\n\n<p>Will emojis work with this approach to charts? You bet it will! &#x1f973;<\/p>\n\n\n\n<p>A block-colored emoji is fed into the SVG image the same way the HTML symbols are. The block color of the emoji is created by giving it a transparent <code>color<\/code> value, followed by adding a desired color as <code>text-shadow<\/code>. I covered this technique <a href=\"https:\/\/css-tricks.com\/creating-css-shapes-with-emoji\/#now-lets-turn-this-into-a-css-shape\">in another post<\/a>.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;div id=\"chart\">&lt;\/div><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">#chart {\n  width: 300px; \n  height: 300px;\n  background: url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>&lt;foreignObject width='300px' height='300px'>&lt;body style='margin:0;text-align:center;color:transparent;' xmlns='http:\/\/www.w3.org\/1999\/xhtml'>&lt;div style='text-shadow: 0 0 limegreen;font:200px\/300px serif;background:white;'>&#x1f34f;&lt;\/div>&lt;div style='text-shadow:0 0 white;font:170px\/300px serif;position:relative;top:-300px;'>&#x1f34f;&lt;\/div>&lt;\/body>&lt;\/foreignObject>&lt;\/svg>\"),\n  conic-gradient(transparent 64%, darkseagreen 64%);\n  background-blend-mode: screen;\n}<\/code><\/pre>\n\n\n\n<p>Just as with the last demo, a smaller white apple shape is added at the center to create the border design.<\/p>\n\n\n\n<pre rel=\"SVG\" class=\"wp-block-csstricks-code-block language-svg\" data-line=\"\"><code markup=\"tt\">&lt;!-- Unwrapped SVG code from the Data URL -->\n&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>\n  &lt;foreignObject width='300px' height='300px'>\n    &lt;body xmlns='http:\/\/www.w3.org\/1999\/xhtml' style='\n          margin: 0;\n          text-align: center;\n          color:transparent;'>\n       \/* green apple shape *\/\n       &lt;div style='\n            text-shadow: 0 0 limegreen; \n            font-size: 200px; \n            background: white;'>&#x1f34f;&lt;\/div>\n       \/* smaller white apple shape *\/\n       &lt;div style='\n            text-shadow:0 0 white; \n            font-size: 170px; \n            position: relative; \n            top: -300px;'>&#x1f34f;&lt;\/div>\n    &lt;\/body>\n  &lt;\/foreignObject>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<p>I added the two divs inside the <code>&lt;body&gt;<\/code> element so the repeating style properties of the divs are declared only once in the body element. The divs will then automatically inherit those properties.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWpvBjY\" src=\"\/\/codepen.io\/anon\/embed\/MWpvBjY?height=450&amp;theme-id=1&amp;slug-hash=MWpvBjY&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWpvBjY\" title=\"CodePen Embed MWpvBjY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Chris had the idea to animate the conic gradient \u2014 its percent value to be specific \u2014 using the CSS <code><a href=\"https:\/\/css-tricks.com\/property\/\">@property<\/a><\/code> (supported in Chrome at the time of writing this article), and it just has the most beautiful effect on the design. <code>@property<\/code> is a CSS at-rule that explicitly defines a custom CSS property. In supported browsers, when a custom property is defined using <code>@property<\/code> it can be animated. <\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">@property --n {\n  syntax: '&lt;percentage>';\n  inherits: true;\n  initial-value: 30%;\n}\n#chart {\n  width: 300px; \n  height: 300px;\n  --n: 30%;  \/*declaration for browsers with no @property support *\/\n  background: \n    url(\"data:image\/svg+xml,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg'>&lt;foreignObject width='300px' height='300px'>&lt;body style='margin:0;text-align:center;color:transparent;' xmlns='http:\/\/www.w3.org\/1999\/xhtml'>&lt;div style='text-shadow: 0 0 limegreen;font:200px\/300px serif;background:white;'>&#x1f34f;&lt;\/div>&lt;div style='text-shadow:0 0 white;font:170px\/300px serif;position:relative;top:-300px;'>&#x1f34f;&lt;\/div>&lt;\/body>&lt;\/foreignObject>&lt;\/svg>\"),\n    conic-gradient(transparent var(--n), darkseagreen var(--n));\n  background-blend-mode: screen;\n  transition: --n 2s ease-in-out\t\n}\n#chart:hover { --n: 70%; }<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRWXPyg\" src=\"\/\/codepen.io\/anon\/embed\/GRWXPyg?height=450&amp;theme-id=1&amp;slug-hash=GRWXPyg&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRWXPyg\" title=\"CodePen Embed GRWXPyg\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The chart above will change its value on hover. In Chrome, the change will look animated. <\/p>\n\n\n\n<p>And although it won&#8217;t be as smooth as CSS animation, you can also try animating the gradient using JavaScript. The following JavaScript will cause a somewhat similar animating effect as the above when the cursor moves over the chart.  <\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const chart = document.querySelector('#chart')\nchart.onpointerover = ()=>{\n  var i = 30,\n      timer = setInterval(()=> {\n        if (i &lt; 70)\n          chart.style.setProperty('--n', i++ + '%')\n        else clearInterval(timer)\n      }, 10)\n}\nchart.onpointerout = ()=>{\n  var i = 70,\n      timer = setInterval(()=> {\n        if (i >= 30) \n          chart.style.setProperty('--n', i-- + '%')\n        else clearInterval(timer)\n      }, 10)\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvJERxo\" src=\"\/\/codepen.io\/anon\/embed\/wvJERxo?height=450&amp;theme-id=1&amp;slug-hash=wvJERxo&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvJERxo\" title=\"CodePen Embed wvJERxo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>When trying your own designs, keep in mind how the different blend modes work. I used the <code>screen<\/code> blend mode in all my demos just to keep things simple. But with different blend modes, and different backdrop colors, you\u2019ll get varying results. So, I recommend going <a href=\"https:\/\/css-tricks.com\/basics-css-blend-modes\/\">deeper into<\/a> <a href=\"https:\/\/css-tricks.com\/basics-css-blend-modes\/\">blend modes<\/a> if you haven\u2019t already.<\/p>\n\n\n\n<p>Also, if you want to exclude an element\u2019s color from the final result, try <code>isolation: isolate;<\/code> on the element\u2009\u2014\u2009the browser will ignore that backdrop color when applying the blend.<\/p>\n\n\n\n<p>And even though there are all kinds of unusual and quirky shapes we can use in any wild colors we want, always be mindful of the legibility by making the chart value large and clear enough to read.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoperVz\" src=\"\/\/codepen.io\/anon\/embed\/PoperVz?height=550&amp;theme-id=1&amp;slug-hash=PoperVz&amp;default-tab=result\" height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoperVz\" title=\"CodePen Embed PoperVz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let\u2019s forego the usual circles and bars we typically see used in charts for more eccentric shapes. With online presentations more and more common today, a quick way to spruce up your web slides and make them stand out is to give the charts a shapely makeover &#x1fa84; I\u2019ll show you how to create charts [&hellip;]<\/p>\n","protected":false},"author":250902,"featured_media":342453,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Here's @rpsthecoder with clever tricks for making charts a little more interesting.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[881,1550,1421,1062,469],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":282928,"url":"https:\/\/css-tricks.com\/css-triangles-multiple-ways\/","url_meta":{"origin":342448,"position":0},"title":"CSS Triangles, Multiple Ways","date":"March 4, 2019","format":false,"excerpt":"I like Adam Laki's Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done: with border and a collapsed element with clip-path: polygon() with transform: rotate() and overflow:\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/02\/quick-tip-css-triangles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":248261,"url":"https:\/\/css-tricks.com\/experimenting-color-fonts\/","url_meta":{"origin":342448,"position":1},"title":"Experimenting with Color Fonts","date":"November 29, 2016","format":false,"excerpt":"Over the past couple of weeks there\u2019s been a lot of excitement over color fonts. Adobe describes the technology like this: OpenType-SVG is a font format in which an OpenType font has all or just some of its glyphs represented as SVG (scalable vector graphics) artwork. This allows the display\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":299624,"url":"https:\/\/css-tricks.com\/techniques-for-rendering-text-with-webgl\/","url_meta":{"origin":342448,"position":2},"title":"Techniques for Rendering Text with WebGL","date":"December 6, 2019","format":false,"excerpt":"As is the rule in WebGL, anything that seems like it should be simple is actually quite complicated. Drawing lines, debugging shaders, text rendering\u2026 they are all damn hard to do well in WebGL. Isn\u2019t that weird? WebGL doesn't have a built-in function for rendering text. Although text seems like\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/webgl-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285697,"url":"https:\/\/css-tricks.com\/the-serif-tax\/","url_meta":{"origin":342448,"position":3},"title":"The Serif Tax","date":"April 9, 2019","format":false,"excerpt":"Fonts are vector. Vector art with more points makes for larger files than vector art with fewer points. Custom fonts are downloaded. So, fonts with less points in their vector art are smaller. That's the theory anyway. Shall we see if there is any merit to it? Open Sans (top)\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/font-vector-points.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362940,"url":"https:\/\/css-tricks.com\/css-slanted-containers\/","url_meta":{"origin":342448,"position":4},"title":"How to Make CSS Slanted Containers","date":"February 9, 2022","format":false,"excerpt":"I was updating my portfolio and wanted to use the forward slash (\/) as a visual element for the site\u2019s main layout. I hadn't attempted to create a slanted container in CSS before, but it seemed like it would be easy at first glance. As I began digging into it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/css-slanted-container-example.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":270743,"url":"https:\/\/css-tricks.com\/it-all-started-with-emoji-color-typography-on-the-web\/","url_meta":{"origin":342448,"position":5},"title":"It All Started With Emoji: Color Typography on the Web","date":"May 15, 2018","format":false,"excerpt":"\u201cTypography on the web is in single color: characters are either black or red, never black and red \u2026Then emoji hit the scene, became part of Unicode, and therefore could be expressed by characters \u2014 or \u201cglyphs\u201d in font terminology. The smiley, levitating businessman and the infamous pile of poo\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/emoji-trio.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/chart-shapes.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/342448"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/250902"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=342448"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/342448\/revisions"}],"predecessor-version":[{"id":342891,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/342448\/revisions\/342891"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/342453"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=342448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=342448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=342448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}