KNOWLEDGECODE knowledgecode
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| 'use strict'; | |
| // easeOutBounceはVelocity.jsに実装がないので独自に追加しています | |
| // see: https://github.com/danro/easing-js | |
| Velocity.Easings.easeOutBounce = function (pos) { | |
| if ((pos) < (1 / 2.75)) { | |
| return (7.5625 * pos * pos); | |
| } else if (pos < (2 / 2.75)) { | |
| return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/normalize/3.0.3/normalize.min.css"> | |
| <style> | |
| body { | |
| color: #333; | |
| font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; | |
| font-size: 15px; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var path = document.querySelectorAll('svg path'); | |
| Velocity(path[0], { | |
| tween: 180.096 | |
| }, { | |
| duration: 6000, | |
| easing: 'easeOutBounce', | |
| progress: function (el, c, r, s, t) { | |
| el[0].setAttribute('d', d(150, 170, 150, t, 0, 1)); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 円弧専用 d属性出力関数 2 | |
| * @param {number} cx - 中心のx座標 | |
| * @param {number} cy - 中心のy座標 | |
| * @param {number} r - 半径 | |
| * @param {number} a - 角度 (0 <= a < 360) | |
| * @param {number} s - 傾き (0 <= s) | |
| * @param {number} f - 1: 時計回り、0: 反時計回り | |
| * @returns {string} d属性 | |
| */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| arc(document.querySelector('svg'), 150, 150, 150, [ | |
| // Internet Explorer | |
| { | |
| value: 50.86, | |
| fill: '#0153d8' | |
| }, | |
| // Chrome | |
| { | |
| value: 31.12, | |
| fill: '#00c121' |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * パイチャート描画関数 | |
| * @param {Object} svg - SVG要素 | |
| * @param {number} cx - 中心のx座標 | |
| * @param {number} cy - 中心のy座標 | |
| * @param {number} r - 半径 | |
| * @param {Array.<Object>} list - 円弧のリスト | |
| * @returns {void} なし | |
| */ | |
| var arc = function (svg, cx, cy, r, list) { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 円弧専用 d属性出力関数 | |
| * @param {number} cx - 中心のx座標 | |
| * @param {number} cy - 中心のy座標 | |
| * @param {number} r - 半径 | |
| * @param {number} a - 角度 (0 <= a < 360) | |
| * @param {number} s - 傾き (0 <= s) | |
| * @returns {string} d属性 | |
| * | |
| * usage |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300"> | |
| <path d="M 150,0 A 150,150 0 1,1 141.8986347236027,299.7810664959306 L 150,150 Z" fill="#0153d8" stroke="#fff"></path> | |
| <text x="170" y="150" fill="#fff" font-size="14">Internet Explorer</text> | |
| <text x="170" y="170" fill="#fff" font-size="14">50.86%</text> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300""> | |
| <circle cx="150" cy="150" r="150" fill="#0153d8"></circle> | |
| <text x="150" y="157" text-anchor="middle" fill="#fff" font-size="14">Internet Explorer 100%</text> | |
| </svg> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/sh -eu | |
| if [ $# -eq 3 ] && [ ! `echo $1$2$3 | sed -e "s/[0-9]//g"` ]; then | |
| printf '#%.2x%.2x%.2x\n' $1 $2 $3 | |
| else | |
| echo "usage:" | |
| echo " rgb R G B\n" | |
| echo "example:" | |
| echo " $ rgb 165 227 249" | |
| echo " #a5e3f9" |