• Image color extraction


    This article GitHub project: colorfull color My codepen link: image color extractionthe demo Original article, reprint please indicate Recently, I want to find a small project to practice so that I can be familiar with react, so I came up with the direction of “image color extraction”, which is also said to beImage theme color […]

  • The realization method of generating circular progress bar by HTML svg


    Previously, I met the requirement of a circular progress bar in the project, which requires that the progress can be updated in real time, and the scheme in CSS, SVG, and canvas will pop up in my mind in an instant. For the three schemes, I prefer SVG, which is simple to use, with little […]

  • Step by step to teach you to use HTML5 SVG to achieve animation effect


    Crazy technology houseOriginal: https://www.smashingmagazine The first WeChat public address is jingchengyideng.Welcome to pay attention and push you fresh front-end technical articles every day abstractIn this article, you will learn how the awwwards net implements animation. This article introduces the circle element in HTML5 SVG, its stroke attribute, and how to use CSS variables and animate […]

  • React SVG ring


    ReactringSemiCircle Code import React from “react”; class SemiCircle extends React.Component { constructor(props) { super(props); } polarToCartesian = (centerX, centerY, radius, angleInDegrees) => { var angleInRadians = ((angleInDegrees – 180) * Math.PI) / 180; return { x: centerX + radius * Math.cos(angleInRadians), y: centerY + radius * Math.sin(angleInRadians) }; }; describeArc = (x, y, radius, startAngle, […]

  • End of 2018 summary


    Professional articles Blog Before, the blog system always used ghost. However, the new version of ghost encountered many problems in VPS upgrade and migration. Later, I wrote one with nodejs, based on nextjs. translate an article Spent a week free time translating maintainable CSS, visit http://maintainable.wtser.com/ I haven’t translated the article for a long time. […]

  • A custom sector chart with lines and points nested inside


    Design draft: Finally, the effect picture is realized: Don’t say much, just code! <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <meta http-equiv=”X-UA-Compatible” content=”ie=edge”> <link rel=”stylesheet” href=”./css/bodyExam.css”> < title > body test report < / Title > </head> <body> <div class=”body_tu” id=”drawing”> </div> </body> <script></script> <script> Var text_l = [‘body weight ‘,’ […]

  • Svg + CSS3 to make a dynamic wave effect


    A vector wave <svg viewBox=”0 0 560 20″ class=”wave-animation__water-wave wave-animation__water-wave–front”> <use xlink:href=”#wave”></use> </svg> <svg id=”wave” width=”100%” height=”100%”> <path d=”M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z”></path> <path d=”M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z”></path> <path d=”M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z”></path> <path d=”M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z”></path> Full code: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no”> </head> <body> <div class=”circle-countdown circle-countdown–ended”> <div class=”circle-countdown__content-wrapper”> <div class=”circle-countdown__content wave-animation”> <div id=”water” class=”wave-animation__water”> <svg viewBox=”0 0 560 20″ class=”wave-animation__water-wave […]

  • Interviewer: “loading animation of Android system with CSS”


    Source code: https://github.com/any86/5a. C ios/android There are two kinds of loading icons commonly used on the web, one is the “Chrysanthemum” of IOS, the other is the “ring” of Android. Today, we use SVG to realize the “ring” animation of Android, and the next lesson realizes the “Chrysanthemum” of IOSBe careful: the reason for the […]

  • The beginning of sad road of visual development


    Preface: This series of articles will tell me that in the past year, I independently developed a project called data visualization, with a link [https://github.com/chuxiaoguo…]. Welcome to star. We can see similar projects in the market at this stage, Alibaba’s datav [https://data.aliyun.com/visua…] Baidu’s sugar [https://cloud.baidu.com/produ…] Of course, there are other ones. I’ll just introduce them […]

  • 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 […]