• Introduction to SVG vector graphics drawing using HTML5


    VG represents scalable vector graphics, which is a language used to describe 2D graphics. Graphics applications are written in XML, and then XML is presented by SVG reader program. SVG is mainly used for vector charts, such as pie charts, two-dimensional charts in X and Y coordinate systems, etc. Svg became a W3C recommendation on […]

  • Examples explain the method of using SVG to make loading animation


    Today, I’d like to share with you a loading animation based on SVG images. Now mobile web pages are used more often. If you still use GIF to do loading images, the image quality may be affected. So SVG is a good way. The code in this exhibition is written by Aurer. The front-end staff […]

  • Svg + CSS or JS to make the animation effect of tick


    Before the boss let do a login can show a hook effect, baidu life and death search can’t see today in the B station to see a video actually has according to the demand to improve, nonsense, don’t say more, first see the effect! HTML code <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> < title […]

  • Example code of B station charging effect realized by CSS + svg


      difficulty Two mask making of SVG graphics Code first This is the pink box on the left There’s nothing to say about this <div id=”con”> <div id=”TA-con”> <div id=”text-con”> <div id=”linght”></div> < div id = “Ta” > charging for TA < / div > </div> </div> body { margin: 0; padding: 0; background-color: #eee; […]

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