jQuery+SVG 可改变参数的动态背景图案演示

SVG Pattern Play: Transparent Polkadots

jQuery, SVG

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4016
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    position: relative;
    padding: 0;
    margin: 0;
    font-family: "open sans", sans-serif;
    background-attachment: fixed;
    background-size: cover;
    background-image: url("/uploads/161201/blur.jpg");
}
#svg {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#controls {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.2);
    margin: 60px auto;
    max-width: 300px;
    padding: 30px;
    position: relative;
    width: 50%;
}
#controls h3 {
    text-align: center;
    border-bottom: 2px solid #eee;
    color: #aaa;
    font-size: 12px;
    letter-spacing: 1px;
    margin: -30px -30px 30px;
    padding: 20px;
    text-transform: uppercase;
}
.divider {
    background: none;
    border: 1px solid #eee;
    margin: 30px -30px
}
.range-label {
    display: block;
    margin-bottom: 30px;
}
.color-label {
    display: block;
    margin-bottom: 20px;
}
label:last-child {
    margin-bottom: 5px;
}
label em {
    color: #aaa;
    display: inline-block;
    font-size: 10px;
    font-style: normal;
    text-transform: uppercase;
    width: 20%;
}
.rangeslider {
    float: right;
    width: 80%;
}
.rangeslider__fill {
    background: #666;
}
.sp-replacer:hover,
.sp-replacer.sp-active {
    border-color: #aaa;
    color: #666;
}
.sp-replacer {
    background: #f7f7f7 none repeat scroll 0 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #aaa;
    margin: 0;
    padding: 10px;
    width: 110px;
}
.sp-preview {
    border: 1px solid #ccc;
    height: 20px;
    width: 90px;
}

HTML

<div id="controls">
    <h3>Customize Me!</h3>
    <label class="range-label"><em>Spacing</em>
        <input class="polkadots-spacing" type="range" min="10" max="200" value="50">
    </label>
    <label class="range-label"><em>Radius</em>
        <input class="polkadots-radius" type="range" min="1" max="400" value="15">
    </label>
    <label class="range-label"><em>Stroke</em>
        <input class="polkadots-stroke-width" type="range" min="0" value="8">
    </label>
    <hr class="divider" />
    <label class="color-label"><em>BG</em>
        <input class="bg-color" type='text' />
    </label>
    <label class="color-label"><em>Fill</em>
        <input class="fill1-color" type='text' />
    </label>
    <label class="color-label"><em>Stroke</em>
        <input class="stroke1-color" type='text' />
    </label>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="/uploads/161201/spectrum.min.js"></script>
<script src="/uploads/161201/rangeslider.js"></script>
<script>$('.bg-color').spectrum({
    move: function (color) {
        $('.bg').attr('fill', color.toHexString());
    },
    change: function (color) {
        $('.bg').attr('fill', color.toHexString());
    },
    showButtons: false,
    preferredFormat: 'hex',
    showInitial: true,
    showInput: true,
    color: $('.bg').attr('fill')
});
$('.fill1-color').spectrum({
    move: function (color) {
        $('.fill1').attr('fill', color);
    },
    change: function (color) {
        $('.fill1').attr('fill', color);
    },
    showButtons: false,
    showAlpha: true,
    preferredFormat: 'hex',
    showInitial: true,
    showInput: true,
    color: $('.fill1').attr('fill')
});
$('.fill2-color').spectrum({
    move: function (color) {
        $('.fill2').attr('fill', color);
    },
    change: function (color) {
        $('.fill2').attr('fill', color);
    },
    showButtons: false,
    showAlpha: true,
    preferredFormat: 'hex',
    showInitial: true,
    showInput: true,
    color: $('.fill2').attr('fill')
});
$('.stroke1-color').spectrum({
    move: function (color) {
        $('.stroke1').attr('stroke', color);
    },
    change: function (color) {
        $('.stroke1').attr('stroke', color);
    },
    showButtons: false,
    showAlpha: true,
    preferredFormat: 'hex',
    showInitial: true,
    showInput: true,
    color: $('.stroke1').attr('stroke')
});
$('.stroke2-color').spectrum({
    move: function (color) {
        $('.stroke2').attr('stroke', color);
    },
    change: function (color) {
        $('.stroke2').attr('stroke', color);
    },
    showButtons: false,
    showAlpha: true,
    preferredFormat: 'hex',
    showInitial: true,
    showInput: true,
    color: $('.stroke1').attr('stroke')
});
$('.polkadots-radius').rangeslider({
    polyfill: false,
    onSlide: function (position, value) {
        $('circle.shape1').attr('r', value / 2);
        $('circle.shape2').attr('r', value / 6);
    }
});
$('.polkadots-stroke-width').rangeslider({
    polyfill: false,
    onSlide: function (position, value) {
        $('circle.shape1').attr('stroke-width', value);
        $('circle.shape2').attr('stroke-width', value / 8);
    }
});
$('.polkadots-spacing').rangeslider({
    polyfill: false,
    onSlide: function (position, value) {
        $('.tile1').attr({
            width: value,
            height: value
        });
        $('circle.shape2').attr({
            cx: value / 2,
            cy: value / 2
        });
        $('circle.shape1:nth-child(2)').attr({
            cx: 0,
            cy: 0
        });
        $('circle.shape1:nth-child(3)').attr({
            cx: value,
            cy: 0
        });
        $('circle.shape1:nth-child(4)').attr({
            cx: 0,
            cy: value
        });
        $('circle.shape1:nth-child(5)').attr({
            cx: value,
            cy: value
        });
    }
});
//# sourceURL=pen.js
</script>

SVG Pattern Play: Transparent Polkadots

jQuery, SVG

编辑器支持Emmet

快捷键

SVG Pattern Play: Transparent Polkadots

jQuery, SVG

HTML5 SVG+jQuery.wavify.js 沙滩情侣动画

jQuery pep.js SVG 流动的六边形（鼠标点击触发）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：