#svg
SubscribeSVG stands for Scalable Vector Graphics. It is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. It is used to create images and diagrams on the web, often in combination with HTML, CSS and JavaScript. SVG images are resolution independent, meaning they look great on any screen size or resolution.
Hacking an e-Reader to Show My Tea Menu With JSXWatch video: Hacking an e-Reader to Show My Tea Menu With JSX
Hacking an e-Reader to Show My Tea Menu With JSX
React can be used to create custom menus for e-readers, and the process involves creating an image and e-book with React and loading them onto the e-reader. Writing an EPUB e-book for e-readers involves converting an SVG file into a PNG image and writing the e-book in EPUB format using HTML, CSS, and images. EPUB generators like Pandoc and Dino simplify the process of generating EPUBs from markdown and running JavaScript on the desktop, respectively.
The Language of Shapes: Understanding the SVG Path
React Summit 2020
React Summit 202032 min
The Language of Shapes: Understanding the SVG Path
This Talk introduces the SVG Path element, exploring its commands and potential. The speaker simplifies the language of shapes by grouping commands together and finding alternative ways to define arcs. They also present a path editing tool that allows for easy manipulation and visualization of path data. The Talk concludes with discussions on performance, limitations, recommended resources, SVG morphing, and the FlubberJS library for path interpolation.
SVGs to Make Your Blog Stand Out
SVGs to Make Your Blog Stand Out
Today's Talk is about using SVGs to enhance blog design, including transforming SVGs into JSX, animating elements, and using React Spring for interactivity. The speaker also demonstrates the use of SVGs in SharkUI and showcases an interactive love button. The benefits of using SVGs in React components are discussed, as well as implementing SVGs as responsive components. Performance considerations and the pros and cons of CSS vs SVG are also touched upon.
Graphics, as a Function of State / Graphic = fn(state)
Graphics, as a Function of State / Graphic = fn(state)
Anil Durman, engineer at the New York Times, discusses the role of graphics in the context of state. He highlights the work done by his team in helping people understand the news through new formats and pages. The team is hiring for various tech roles. By night, Anil is a creative coder exploring the intersection of creativity and code, and his latest project, Good Graphics, focuses on UI as a function of state, React components, and SVGs. He demonstrates how components can be updated based on state, allowing for declarative graphics. Anil also showcases how nested circles and grids can be used to create complex systems in React, enabling dynamic and reactive graphic designs.