CodemySite_Web development

Official website   Github Install  With Git clone direct to the location your project is and clone in the file Then there will be a file named ikonate If you'd like to customize the icon border ,size,style and color. Check the content in the website and export the icon you need. Also a dark version icon's choice. After exporting the zip file, unzip for three files which are three ways to apply. Here I tried all of them: There are three ways to import this plugin.  1. With <img> Link the svg to the image.Customize the size with css 2.With inline svg Copy the svg from the file named inline . 3.With svg sprite external Link the spritesheet with <use> And don't forget to style svg with css for 2nd and 3rd method: The demo code resources Download

D3.js is a Javascript library for visualizing data with different charts.I think it's useful to business data analysis. The most frequent used charts are three types:bar chart, pie chart and line chart. First, Bar chart . Remember to link the d3.js library in html. JS Code:  Data displayed in Array. Set the svg size and add the svg in the html. After built the svg, it's an order to select the rectangular and data,through enter() to add it. Then there is the same to set attributes to rect. The bar filled color is calculated with the number of array. When mouseover the bar which will change the background color displayed separately. Next step is to add label to each bar. The same processing with select rect as text here. Add the text content which derived from array and give it attributes. Try to scale the chart acoording to the svg size, there is a way to scale it with scaleLinear(). See the Pen d3.js simple bar chart by Yifang Di ( @diyifang...

An experimental slideshow that shows an animated SVG frame when transitioning between slides. Author Mary Lou Github here I tried the first demo here, and more demos please check github Step1: link anime.js and imagesloaded. (when you need loading styles) Step2: html Inside the sildeshow, there are slides and slidenav html Inside the slides, there are four slide div with detail info. html Step3: css complete css ,please check codepen. The most important css is shape class name styles. css Step4: js js slides and shape have different durations,and frameFill is color white. css initialize the DOM variables. css The function creats frame with svg and set attributes. update frame when resize. with anime.js, the slides eases smoothly. More anime.js document here See the Pen Animated SVG Frame Slideshow by Yifang Di ( @diyifang ) on CodePen .

The anolog clock is combination of css3 and javascript with svg. html svg contains four parts: the face,hour,minute and second. Draw the clock with svg and stylish the stroke attributes. css The transform-origin fixed the center point which can be rotated around. The transition is a way to animate the arm smoothly. js Analysis: 1.Select three arms with querySelector. Or you can use document.getElementById("id name"). 2.Fetch the computer time with Date() and pick up hour,minute and second seperately. 3.Math the degree when each arm move in each time. secPosition: one circle is 360 deg and 60 seconds for a circle.So each second is 6 deg. minPosition: the same as sec and when second is moving, the min arm should be moving 1/60 of a min. hrPosition:one circle is 360 deg and contains 12 hours. And when minute is moving, the hour arm should be moving the 1/12 of a hour. 4.After calculating the degree of each arm, the selectors should be rotated own degr...