• Using SVG to realize the function of prompt box


    NO.1 preface Tooltips are often referred to asPrompt box (or information prompt box)The prompt box can provide users with corresponding prompt information with strong interactivity and degree of freedom. Today we’re not going to talk about how to achieve powerful interaction, but to see how to restore their visual effects in the best way, and […]

  • Introduction to SVG path tracing animation using CSS3


    Do not rely on JavaScript, directly use pure CSS implementationsvgDraw the animation effect of the stroke, the effect shows the animation. Basic knowledge: There is an important attribute branch in SVGstroke, which is called “edge tracing” in Chinese software. The properties related to stroke are as follows: 1、 strokeIndicates the stroke color. The name of […]

  • Using SVG symbols to build a complete guide to icon system


    From the initial use of img pictures to the later use of CSS sprite to reduce server requests, to the popular graphic Font Icon iconcont. Now, a new way of using icons has become popular – SVG symbols. Working principle How SVG symbols work: the symbol element is used to define a graphic template object, […]

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