<div class="demo">
<div class="demo__content">
<svg class="svg">
<symbol id="s-tile">
<g>
<rect width="275" height="275" fill="lightseagreen"></rect>
<rect width="250" height="250" fill="lightgreen"></rect>
<rect width="225" height="225" fill="gold"></rect>
<rect width="200" height="200" fill="sandybrown"></rect>
<rect width="175" height="175" fill="salmon"></rect>
<rect width="150" height="150" fill="lightseagreen"></rect>
<rect width="125" height="125" fill="lightgreen"></rect>
<rect width="100" height="100" fill="gold"></rect>
<rect width="75" height="75" fill="sandybrown"></rect>
<rect width="50" height="50" fill="salmon"></rect>
</g>
</symbol>
<pattern id="pattern"
patternUnits="userSpaceOnUse"
viewBox="0 0 275 175"
width="150" height="95">
<use xlink:href="#s-tile"></use>
<rect width="100%" height="100%"
fill="none" stroke="darkslategrey"
stroke-width="4"></rect>
</pattern>
<symbol id="s-coords">
<g stroke-dasharray="10 5">
<line x1="50%" y1="0" x2="50%" y2="100%" />
<line y1="50%" x1="0" y2="50%" x2="100%" />
</g>
</symbol>
<use xlink:href="#s-coords" stroke="#333"></use>
<g>
<rect width="80%" height="90%"
fill="steelblue" fill-opacity=".3"
stroke="steelblue" stroke-width="3"></rect>
<rect width="80%" height="90%"
fill="url(#pattern)" fill-opacity=".75"></rect>
<use xlink:href="#s-coords" width="80%" height="90%" stroke="steelblue"></use>
</g>
</svg>
</div>
</div>
/* Vars & Mixins
------------------------------ */
$svgW: 500px;
$svgH: 300px;
$controlH: 40px;
$space: 10px;
$colors: purple, crimson, orangered, yellowgreen, skyblue, steelblue, olive, teal, indigo;
@mixin outline( $counter: 1 ) {
outline: 2px solid nth( $colors, $counter );
}
@mixin valnMid {
&:before {
content: ' ';
display: inline-block;
height: 100%;
vertical-align: middle;
}
}
/* Base
------------------------------ */
HTML, BODY {
height: 100%;
}
BODY {
background: #FFF;
background-image:
linear-gradient( #EEE 1px, transparent 2px),
linear-gradient( to right, #EEE 1px, transparent 2px);
background-size: 1em 1em;
}
/* Layout
------------------------------ */
.demo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
white-space: nowrap;
font: 16px/1.4 Arial, sans-serif;
}
.demo__content {
position: relative;
width: $svgW;
height: $svgH;
&--svg-only {
/* default */
}
&--left-range {
width: $svgW + $controlH + $space;
}
&--top-range {
height: $svgH + $controlH + $space;
}
&--both-ranges {
width: $svgW + $controlH + $space;
height: $svgH + $controlH + $space;
}
}
/* SVG
------------------------------ */
.svg {
position: absolute;
right: 0;
bottom: 0;
width: $svgW;
height: $svgH;
box-sizing: border-box;
border: 2px solid #333;
}
/* Controls
------------------------------ */
.controls {
&__title {
display: inline-block;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
font-weight: bold;
font-size: 100%;
}
}
.controls--buttons {
@include valnMid;
height: $controlH;
margin-bottom: $space;
font-size: 1rem;
}
/* Buttons
------------------------------ */
.button {
margin-left: .5rem;
padding: .3rem .5rem;
vertical-align: middle;
border: 0;
background: #BBB;
cursor: pointer;
font-size: 1rem;
text-shadow: 0 0 1px rgba(0, 0, 0, .75);
color: #FFF;
&--current {
background: crimson;
}
}
/* Ranges
------------------------------ */
.controls--ranges {
position: absolute;
width: 100%;
}
.range {
position: absolute;
height: $controlH;
text-align: center;
&--hor {
right: 0;
width: $svgW;
}
&--vert {
top: $controlH + $space;
width: $svgH;
transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%);
}
&--vert .range__input {
transform: rotate(180deg);
}
}
.range__input {
width: 100%;
margin: auto;
cursor: pointer;
}
View Compiled
// Required
// 1. tinyLib:
// https://codepen.io/yoksel/pen/KMgMvw
// 2. demosBuilder:
// https://codepen.io/yoksel/pen/JKRKyy
console.clear();
var $ = tinyLib;
var config = {
demoContentLayout: 'both-ranges',
targetElem: $.get( '#pattern' ),
inputs: {
ranges: {
targetElem: $.get('#pattern'),
isTied: true,
keepViewBoxRatio: true,
// units: '%',
attrs: {
type: 'range',
min: 0,
max: 300,
step: 1,
value: 150,
},
list: [
{
id: 'hor',
valName: 'width'
},
{
id: 'vert',
valName: 'height'
}
]
}
}
};
demosBuilder.create();
This Pen doesn't use any external CSS resources.