• Frame selection of sour road in visual development


    Framework Research In order to help you avoid detours, I have summarized the following projects that can be used for reference. If you like, you can do secondary development based on their foundation: Draw.io prototype design editor [https://github.com/jgraph/drawio] Method draw SVG drawing editor [https://github.com/methodofac…] Fabric.js canvas graphic editor [https://github.com/fabric JS / F…] Why don’t I […]

  • The story of a flying line – svg


    Author: ued team A map without a flying line is as mundane as a middle-aged man whose hairline moves up ——Fat by Every year, the statistics of Spring Festival and double 11 are more eye-catching because of the flying line action effect. Today, we need to bring you a beautiful flying line with what posture […]

  • Use CSS mixed mode and SVG to dynamically change the color of product pictures


    I saw an example written by @ Kyle wetton in codepen two days ago, which uses CSS mixed mode and SVG to change the color of sofa. A very interesting case. This reminds me of the application in some practical business scenarios, such as some beauty applications, there are similar scenarios. I wonder if you […]

  • An example of using SVG in CSS to display 0.5px frame on some Android computers


    I believe that when you opened a 404 search engine yesterday, you should see this picture. It has to be said that future generations will commemorate their predecessors in such a way, and it is a great company, which is very moving. Preface During the development of H5 page, it was found that the native […]

  • Image 2D Drawing Using Canvas and SVG


    Author: Heart LeafTime: 2019-05-29 22:31 This document is not the latest version, there will be update delay. If you want to get the latest version, please visit the API of the interface document directly. I. Introduction First, let’s understand what the main problem of a library is, how to use it and the basic information […]

  • Knots and data manipulation in clay tutorial 1


    Author: Heart LeafTime: 2018-11-06 14:19 Github address of clay project: https://github.com/yelloxing/… If you like this project, you can give it to star on github. Clay itself provides some basic DOM operations, such as node CSS string lookup, event binding and attribute editing. However, her goal is to draw, so these methods only provide a very […]

  • First Understanding of Bessel Curve


    Bessel curve in CSS animation and canvas, SVG drawing is a more important thing! So I’ll make a good summary of some things about it. What is Bessel Curve The Bessel Curve was widely published in 1962 by Pierre B zier, a French engineer, who used the Bessel Curve to design the main body of […]

  • Use of clay tutorial 2 layout


    Author: Heart LeafTime: 2018-11-06 14:47 Github address of clay project: https://github.com/yelloxing/… If you like this project, you can give it to star on github. When drawing some common graphics, such as relational graphs, single node or connection is not difficult, the trouble is the calculation of location, etc. Unlike graphics module, layout is a module […]

  • Clay of data visualization: design idea and original intention


    Author: Heart LeafTime: 2018-05-01 19:28 Github address of clay project: https://github.com/yelloxing/… Project Background With the development of big data and the increasing value of data itself in daily life, it is more and more important to present data to users in a more friendly way. Among them, interactive graphs seem to be a good choice […]

  • Realize an HTML 2 canvas by hand


    Preface Yesterday, I wrote four ways to implement novice guided animation.It’s used inside.html2canvasSo I know the way to realize it. Maybe it’s using it.svgOfforeignObjectLabel, embedded dom, and finally draw SVG using canvas to achieve the ultimate goal. Let’s see the effect first. MDN example var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); var data = […]

  • Vue2 Learning Tour 5: Adding Data Visualization Support


    Author: Heart LeafTime: 2019-01-01 09:33 install npm install clay-core –save First, install the data visualization library clay. JS through npm, and you can consult the documents through the specific api: https://yelloxing.github.io/c… This is a non-embedded library (this is the core library of drawing, for 2D or 3d, then import the corresponding library). Initialization New file […]

  • SVG Button Example Code Based on CSS Animation


    The specific code is as follows: <a href=”#”> <svg> <rect></rect> </svg>Button </a> body { margin: 0; padding: 0; background: #000; } a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; line-height: 60px; text-align: center; font-family: sans-serif; text-transform: uppercase; font-size: 24px; letter-spacing: 4px; color: #fff; text-decoration: none; } a svg, […]