test/public/svelte-range-slider-logo.svg

<?xml version="1.0" encoding="utf-8"?>

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">

  <title>Svelte RangeSlider Logo</title>

  <style>
    #range,
    #handle1,
    #handl1focus, 
    #handle2,
    #handle2focus {
      fill: #4A40D4;
    }
    #handle1focus, 
    #handle2focus {
      opacity: 0.25;
    }
    #s {
      fill: #ccc;
    }
		.pip {
			opacity: 0.5;
			fill: none;
			stroke: #000000;
			stroke-miterlimit: 10;
		}
  </style>

  <g id="Layer_1">
    <path id="s" fill="#B5B5B5" d="M391.87,106.64c-36.05-51.93-107.82-67.14-159.42-34.4l-90.96,58.21c-24.81,15.55-42,41.01-46.97,69.79
    c-4.3,24.14-0.66,48.95,10.91,70.45c-7.94,11.91-13.23,25.14-15.55,39.03c-5.29,29.44,1.65,59.87,18.85,84.01
    c36.38,51.93,107.82,67.14,159.42,34.4l90.96-57.88c24.81-15.55,42-41.01,46.97-69.79c4.3-24.14,0.66-48.95-10.91-70.45
    c7.94-11.91,13.23-25.14,15.55-39.03C416.34,161.21,409.4,130.79,391.87,106.64"/>
    <path opacity="0.8" fill="#FFFFFF" d="M223.52,398.69c-29.44,7.61-60.2-3.97-77.39-28.78c-10.58-14.55-14.55-32.74-11.58-50.6
    c0.66-2.98,1.32-5.62,1.98-8.6l1.65-5.29l4.63,3.31c10.91,7.94,22.82,13.89,35.72,17.86l3.31,0.99l-0.33,3.31
    c-0.33,4.63,0.99,9.59,3.64,13.56c5.29,7.61,14.55,11.25,23.48,8.93c1.98-0.66,3.97-1.32,5.62-2.32l90.62-57.88
    c4.63-2.98,7.61-7.28,8.6-12.57c0.99-5.29-0.33-10.91-3.31-15.21c-5.29-7.61-14.55-10.91-23.48-8.6c-1.98,0.66-3.97,1.32-5.62,2.32
    l-34.73,22.16c-5.62,3.64-11.91,6.28-18.52,7.94c-29.44,7.61-60.2-3.97-77.39-28.78c-10.25-14.55-14.55-32.74-11.25-50.6
    c2.98-17.2,13.56-32.74,28.44-42l90.96-57.88c5.62-3.64,11.91-6.28,18.52-8.27c29.44-7.61,60.2,3.97,77.39,28.78
    c10.58,14.55,14.55,32.74,11.58,50.6c-0.66,2.98-1.32,5.62-2.32,8.6l-1.65,5.29l-4.63-3.31c-10.91-7.94-22.82-13.89-35.72-17.86
    l-3.31-0.99l0.33-3.31c0.33-4.63-0.99-9.59-3.64-13.56c-5.29-7.61-14.55-10.91-23.48-8.6c-1.98,0.66-3.97,1.32-5.62,2.32
    l-90.62,57.88c-4.63,2.98-7.61,7.28-8.6,12.57c-0.99,5.29,0.33,10.91,3.31,15.21c5.29,7.61,14.55,10.91,23.48,8.6
    c1.98-0.66,3.97-1.32,5.62-2.32l34.73-22.16c5.62-3.64,11.91-6.28,18.52-8.27c29.44-7.61,60.2,3.97,77.39,28.78
    c10.58,14.55,14.55,32.74,11.58,50.6c-2.98,17.2-13.56,32.74-28.44,42l-90.96,57.88C236.42,394.06,230.13,396.71,223.52,398.69"/>
    <path id="range" fill="#4A40D4" d="M349.86,239.93c-17.2-24.81-47.96-36.38-77.39-28.78c-6.61,1.98-12.9,4.63-18.52,8.27l-34.73,22.16
    c-1.65,0.99-3.64,1.65-5.62,2.32c-8.93,2.32-18.19-0.99-23.48-8.6c-2.98-4.3-4.3-9.92-3.31-15.21c0.99-5.29,3.97-9.59,8.6-12.57
    l140.62-89.88c1.17-0.7-18.82-25.9-27.04-39.94c-0.14,0.09-141.37,90.13-141.37,90.13c-14.88,9.26-25.47,24.81-28.44,42
    c-3.31,17.86,0.99,36.05,11.25,50.6c17.2,24.81,47.96,36.38,77.39,28.78c6.61-1.65,12.9-4.3,18.52-7.94l34.73-22.16
    c1.65-0.99,3.64-1.65,5.62-2.32c8.93-2.32,18.19,0.99,23.48,8.6c2.98,4.3,4.3,9.92,3.31,15.21c-0.99,5.29-3.97,9.59-8.6,12.57
    l-140.11,89.73c13.16,10.22,25.64,21.7,37.42,33.32L333,332.54c14.88-9.26,25.47-24.81,28.44-42
    C364.42,272.68,360.45,254.49,349.86,239.93z"/>
    <circle id="handle1" fill="#4A40D4" cx="336" cy="88" r="43"/>
    <circle id="handle1focus" fill="#4A40D4" cx="336.43" cy="88.22" r="63.68"/>
    <circle id="handle2" fill="#4A40D4" cx="165" cy="411" r="43"/>
    <circle id="handle2focus" fill="#4A40D4" cx="165.32" cy="410.57" r="63.68"/>
  </g>
  <g id="Layer_2">
    <line class="pip" x1="261.21" y1="169.02" x2="266.22" y2="176.85"/>
    <line class="pip" x1="250.21" y1="176.02" x2="255.22" y2="183.85"/>
    <line class="pip" x1="239.21" y1="183.02" x2="244.22" y2="190.85"/>
    <line class="pip" x1="228.21" y1="190.02" x2="233.22" y2="197.85"/>
    <line class="pip" x1="217.21" y1="197.02" x2="222.22" y2="204.85"/>
    <line class="pip" x1="206.21" y1="204.02" x2="211.22" y2="211.85"/>
    <line class="pip" x1="195.21" y1="211.02" x2="200.22" y2="218.85"/>
    <line class="pip" x1="316.21" y1="134.02" x2="321.22" y2="141.85"/>
    <line class="pip" x1="305.21" y1="141.02" x2="310.22" y2="148.85"/>
    <line class="pip" x1="294.21" y1="148.02" x2="299.22" y2="155.85"/>
    <line class="pip" x1="283.21" y1="155.02" x2="288.22" y2="162.85"/>
    <line class="pip" x1="272.21" y1="162.02" x2="277.22" y2="169.85"/>
    <line class="pip" x1="280.21" y1="370.02" x2="285.22" y2="377.85"/>
    <line class="pip" x1="269.21" y1="377.02" x2="274.22" y2="384.85"/>
    <line class="pip" x1="258.21" y1="384.02" x2="263.22" y2="391.85"/>
    <line class="pip" x1="247.21" y1="391.02" x2="252.22" y2="398.85"/>
    <line class="pip" x1="236.21" y1="398.02" x2="241.22" y2="405.85"/>
    <line class="pip" x1="225.21" y1="405.02" x2="230.22" y2="412.85"/>
    <line class="pip" x1="214.21" y1="412.02" x2="219.22" y2="419.85"/>
    <line class="pip" x1="346.21" y1="328.02" x2="351.22" y2="335.85"/>
    <line class="pip" x1="335.21" y1="335.02" x2="340.22" y2="342.85"/>
    <line class="pip" x1="324.21" y1="342.02" x2="329.22" y2="349.85"/>
    <line class="pip" x1="313.21" y1="349.02" x2="318.22" y2="356.85"/>
    <line class="pip" x1="302.21" y1="356.02" x2="307.22" y2="363.85"/>
    <line class="pip" x1="291.21" y1="363.02" x2="296.22" y2="370.85"/>
  </g>
</svg>