Skip to content

Instantly share code, notes, and snippets.

View defims's full-sized avatar

Wei Long defims

View GitHub Profile
@defims
defims / svg.jsx
Created April 2, 2018 07:18
scss svg mixin
//svg 的 `preserveAspectRatio` 和 `viewBox` 属性无法用 css 设定,下面是 `jsx`辅助
const svg = (
width: 100, $height: 100, // 元素区尺寸 w h
adaption: contain, // 适配方式 contain cover fill
src: src,
) => (
<svg preserveAspectRatio={{
"contain":"xMinYMin meet",
"cover":"xMinYMin slice",
"fill":"none",
@defims
defims / background.scss
Created April 2, 2018 07:17
scss background mixin
//background(0, 0, 100, 100, contain, 50%, 50%)
@mixin background(
$x: 0, $y: 0, // 元素区坐标 x y
$width: 100, $height: 100, // 元素区尺寸 w h
$adaption: contain, // 适配方式 contain cover fill
$horizontal: 50%, $vertical: 50% // 适配区对齐 m n
) {
$v: 1080; // 适配区宽 v
$g: 1920; // 适配区高 g
@defims
defims / img.scss
Last active April 2, 2018 07:17
scss <img> mixin
//img(0, 0, 100, 100, contain, 50%, 50%)
@mixin img(
$x: 0, $y: 0, // 元素区坐标 x y
$width: 100, $height: 100, // 元素区尺寸 w h
$adaption: contain, // 适配方式 contain cover fill
$horizontal: 50%, $vertical: 50% // 适配区对齐 m n
) {
$v: 1080; // 适配区宽 v
$g: 1920; // 适配区高 g
@defims
defims / selected-frames-svg-smil-path-data-generator.jsfl
Last active June 21, 2016 02:53
selected frames svg smil path data generator by Def (def@hai.li)
/*
MIT license
what:
selected frames svg smil path data generator by Def (def@hai.li)
why:
[Flash2Svg](https://github.com/TomByrne/Flash2Svg) and [SnapSVG-Animator](http://cjgammon.github.io/SnapSVG-Animator/) are awesome.
but both of them generate shape tween svg code in frame by frame way.
this script generate svg path code in the keyframe way flash used.
@defims
defims / PACKAGE.json
Created June 14, 2016 02:48 — forked from Golmote/LICENSE.txt
Draw polyline on canvas
{
"name": "Canvas Polyline",
"description": "Draw a polyline on a Canvas",
"keywords": [ "canvas", "line", "draw", "polyline" ],
"version": "0.1.0"
}
@defims
defims / PACKAGE.json
Last active June 14, 2016 02:46 — forked from nesk/LICENSE.txt
Detect CSS 3 transitions support
{
"name": "CSS 3 Transitions Detector",
"description": "Detects CSS 3 transitions support on many browsers",
"keywords": [ "CSS 3", "transitions", "detect", "crossbrowser", "animation" ],
"version": "0.1.0"
}
@defims
defims / PACKAGE.json
Last active June 14, 2016 02:44 — forked from maettig/LICENSE.txt
getElementsByClassName in 140byt.es
{
"name": "getElementsByClassName",
"description": "Prototype methods for Internet Explorer <9.0 and other old web browsers that do not support HTML5.",
"keywords": [ "class", "dom", "ie", "prototype" ],
"version": "0.1.0"
}
@defims
defims / PACKAGE.json
Last active June 14, 2016 02:39 — forked from xpansive/LICENSE.txt
HSV←→HSL
{
"name": "HSVHSLConverter",
"description": "Converts back and forth between HSV and HSL.",
"keywords": [ "color", "hsl" "hsv" ],
"version": "0.1.0"
}
@defims
defims / PACKAGE.json
Last active June 14, 2016 02:38 — forked from aemkei/LICENSE.txt
hsl2rgb - 140byt.es
{
"name": "hsl2rgb",
"description": "Converts hue-saturation-lightness to red-green-blue color value.",
"version": "0.1.0",
"contributors": [
{
"name" : "Martin Kleppe",
"url" : "https://github.com/aemkei"
},
@defims
defims / PACKAGE.json
Created June 14, 2016 02:36 — forked from xpansive/LICENSE.txt
HSV to RGB in 107 bytes
{
"name": "hsvToRgb",
"description": "Converts colors from HSV to RGB.",
"keywords": [ "color", "rgb", "hsv" ],
"version": "0.1.0"
}