<!--  
Author: By @jasonday 
From: https://jasonday.github.io/custom-product-demo/
-->
<div class="viewer">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="648px"
	height="648px" viewBox="0 0 648 648" enable-background="new 0 0 648 648" xml:space="preserve" id="main">
	<g id="front-panel">
		<g>
			<g>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M499,315c3.666,0,8.764-1.431,10.598,0.402
					C511.431,317.235,510,322.333,510,326c0,16,0,32,0,48c-2.599,10.493-7.634,20.129-9.796,30.617
					c-2.64-0.656-2.909-4.022-4.911-2.981c-1.825,0.949-0.594,3.354-0.38,5.097c0.692,5.62,0.729,11.297,1.097,16.927
					c0.558,8.527,4.01,16.927,1.494,25.635c-0.163,0.567-0.018,1.654,0.357,1.88c4.156,2.503,1.3,5.81,1.306,8.898
					c0.017,8.64-0.872,17.314,0.794,25.923c1.566,8.092-5.229,22.69-16.814,24.224c-8.693,1.15-16.754,4.662-25.459,6.145
					c-13.405,2.283-26.49,6.488-39.92,9.012c-12.258,2.303-24.852,2.906-36.82,6.543c-8.44,2.564-16.799,3.712-25.58,2.796
					c-6.469-0.675-13.295-0.685-19.305,1.298c-5.857,1.932-10.693,0.878-15.904-0.902c-3.801-1.3-5.643-3.793-5.286-7.941
					c0.938-10.908-0.841-21.991,1.888-32.772c2.193-8.665-0.545-17.577,1.597-26.216c4.799-19.351,3.727-39.176,2.513-58.605
					c-1.126-18.019-1.227-35.865-0.245-53.805c0.19-3.467,1.723-6.869,0.764-10.385c-1.431-5.242-0.399-10.243,1.232-15.202
					c2.22-6.746,4.499-8.271,11.715-8.422c5.047-0.105,9.902,1.762,14.863,1.599c20.61-0.679,41.209-0.526,61.811,0.207
					c3.32,0.118,11.092,5.067,12.073,7.906c3.59,10.379,6.335,20.984,8.651,31.718c0.444,2.062,0.083,2.106-1.836,2.726
					c-6.107,1.969-12.242,0.08-18.355,0.792c-12.822,1.492-25.699,2.549-38.571,3.564c-10.599,0.835-21.22,1.371-31.835,1.998
					c-2.329,0.138-3.798,0.995-3.85,3.563c-0.056,2.84,1.516,3.751,4.09,3.808c13.814,0.302,27.683,0.426,41.361-1.322
					c14.852-1.898,29.754-2.587,44.65-3.547c7.102-0.458,9.079,2.118,7.684,9.293c-0.451,2.319-0.924,4.576-0.484,6.903
					c0.529,2.815,2.404,4.749,4.788,6.015c1.205,0.64,2.126-0.754,2.796-1.629c1.799-2.348,2.88-4.948,1.475-7.884
					c-0.494-1.03-1.253-1.979-2.051-2.811c-2.061-2.148-3.205-4.833-3.416-7.622c-1.191-15.787-6.006-30.669-11.143-45.463
					c-0.916-2.636-0.779-3.555,2.238-3.546c3.363,0.009,6.82-0.095,7.082-4.968c0.099-1.838,2.162-1.934,3.582-2.059
					c10.61-0.937,21.1-2.859,31.768-3.449C480.818,317.049,490.007,316.942,499,315z M432.521,410.716
					c-1.436-0.023-2.451,0.915-3.621,1.53c-3.756,1.975-5.492,5.746-7.845,8.913c-4.956,6.67-10.899,12.551-15.434,19.557
					c-1.766,2.729-2.81,5.317-0.404,8.171c6.104,7.244,12.186,14.509,18.326,21.724c1.884,2.212,3.438,2.748,6.015,0.122
					c8.053-8.208,14.204-17.942,21.854-26.467c2.211-2.464,3.163-5.412,0.89-9.371c-4.742-8.255-11.534-14.883-16.689-22.755
					C434.961,411.146,433.723,410.825,432.521,410.716z M499.266,390.889c0.588-2.011,0.984-3.912,3.653-4.144
					c1.479-0.129,1.819-1.29,1.797-2.545c-0.116-6.452-0.182-12.862,0.791-19.314c0.606-4.022-2.733-6.222-6.044-3.954
					c-4.002,2.741-8.131,2.252-12.396,2.413c-8.465,0.319-16.931,0.698-25.386,1.22c-6.794,0.419-13.573,1.061-20.355,1.656
					c-1.904,0.168-3.193,1.125-2.823,3.257c0.314,1.808,0.768,4.246,3.029,3.886c5.5-0.877,11.1,0.882,16.363-0.224
					c12.287-2.582,24.684-2.195,37.068-2.653c3.365-0.124,4.392,1.356,4.332,4.44C499.191,380.246,499.266,385.567,499.266,390.889z"
					/>
				
			</g>
		</g>
	</g>
	<g id="front-side-panel">
		<g>
			<g>
				
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M468,297c3.172,2.668,8.652,1.979,10.248,7.084
					c0.137,0.438,1.827,0.368,2.789,0.571c7.979,1.68,15.689,4.281,23.434,6.779c2.466,0.796,3.721,2.342,4.494,4.812
					c5.777,18.441,2.715,36.868,0.078,55.302c-0.033,0.236-0.434,0.42-1.006,0.941c-0.386-6.389-0.891-12.49-1.093-18.602
					c-0.353-10.652-0.29-21.312-0.937-31.964c-0.261-4.307-1.668-6.192-5.988-5.623c-18.648,2.455-37.548,2.282-56.141,5.339
					c-8.358,1.374-14.393-1.736-18.298-9.258c-0.759-1.462-0.53-2.224,1.056-2.417c1.799-0.219,3.617-0.289,5.494-0.913
					c-6.162,0.015-11.773-2.924-17.955-2.8c-4.162,0.084-8.33-0.113-12.496-0.14c-0.98-0.007-2.192-0.044-2.541,1.105
					c-0.353,1.158,0.613,1.827,1.531,2.24c5.217,2.347,7.254,7.625,10.697,11.596c1.402,1.616,1.357,3.053-1.279,3.331
					c-1.983,0.21-4.037,0.936-5.932,0.631c-14.586-2.348-29.231-0.333-43.838-0.604c-9.326-0.172-18.592-1.068-27.902-1.261
					c-5.361-0.111-8.474,2.121-9.755,7.229c-1.052,4.192-1.934,8.284-1.53,12.765c1.002,11.104-1.244,22.131-1.439,33.24
					c-0.181,10.329-0.61,20.563,1.15,30.854c0.915,5.348-0.15,11.008,0.467,16.438c1.946,17.121-2.704,33.763-3.269,50.584
					c-0.607,18.07-4.497,35.964-2.811,54.124c0.18,1.935,0.338,3.899,2.273,4.627c5.18,1.947,10.239,5.255,16.116,1.967
					c2.088-1.168,4.458-1.237,6.813-1.229c7.332,0.023,14.665,0.056,21.995-0.008c2.656-0.023,5.479,0.224,7.939-0.556
					c18.832-5.966,38.659-6.757,57.752-11.291c9.718-2.307,19.271-5.67,29.107-6.996c8.113-1.094,15.686-3.836,23.576-5.496
					c6.213-1.307,12.102-3.818,14.258-10.981c0.775-2.577,2.34-4.916,3.857-8.003c1.816,6.56-0.619,14.031-4.979,17.064
					c-0.684,0.476-1.341,1.019-2.085,1.374c-7.374,3.519-11.838,8.224-7.838,17.094c0.971,2.151-0.037,4.271-3.418,4.919
					c1.031-5.575-1.119-9.452-6.463-10.947c-3.093-0.864-6.303,0.1-9.354,0.729c-16.251,3.352-32.342,7.809-48.738,10.009
					c-11.466,1.539-22.281,5.476-33.573,6.987c-11.978,1.604-24.069,2.983-36.237,2.687c-3.324-0.081-6.601,0.193-9.925,0.716
					c-15.665,2.463-28.853-3.859-41.272-12.346c-2.299-1.57-4.045-3.948-6.056-5.943c-5.235-5.196-9.304-10.876-8.372-18.851
					c0.147-1.262-0.388-2.604-0.607-3.909c0-19.667,0-39.333,0-59c0.291-1.457,0.573-2.917,0.874-4.372
					c2.067-10.009,0.464-20.231,1.802-30.296c0.832-6.254,2.096-12.636,1.616-18.841c-1.111-14.375,0.773-28.597,1.107-42.887
					c0.145-6.164,1.362-12.231,3.054-18.175c1.424-5.004,4.194-9.171,8.815-11.581c13.864-7.229,27.657-14.904,44.276-12.342
					c0.479,0.074,0.992-0.071,1.488-0.12c25.389-2.487,50.88-2.233,76.326-2.171c13.379,0.033,26.363-3.055,39.641-3.216
					C462,297,465,297,468,297z"/>
				
			</g>
		</g>
	</g>
	<g id="mid-panel">
		<g>
			<g>
				
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M479,301c-1.22,0.627-2.503,1.099-3.811,0.399
					c-10.846-5.795-22.225-2.313-33.349-1.651c-7.28,0.433-14.495,1.81-21.86,1.59c-22.318-0.665-44.607,0.854-66.914,1.189
					c-7.451,0.111-15.068-0.123-22.389,0.933c-12.939,1.865-25.037,6.759-35.733,14.427c-2.906,2.083-4.772,5.507-5.608,9.237
					c-1.712,7.641-2.827,15.307-3.164,23.182c-0.944,22.087-0.851,44.208-2.74,66.271c-0.707,8.255-0.692,16.584-2.016,24.803
					c-0.677,4.205,1.139,8.29,0.726,12.416c-1.047,10.458-0.988,20.935-0.911,31.414c0.055,7.484-0.107,14.969,0.708,22.451
					c0.357,3.282,1.159,6.124,3.145,8.725c7.105,9.305,15.322,17.024,27.063,20.174c4.859,1.303,9.577,3.131,14.218,5.546
					c-24.496,5.329-48.911,4.661-73.365,0.895c0-14,0-28,0-42c0.213-1.306,0.606-2.61,0.614-3.918
					c0.229-36.282,1.044-72.534,4.058-108.72c1.214-14.582,1.516-29.237,2.42-43.848c1.53-24.734,3.075-49.469,4.884-74.183
					c0.889-12.148,0.53-24.291,0.674-36.438c0.177-14.837,3.302-28.038,16.93-37.017c6.465-4.26,11.763-10.276,17.671-15.403
					c2.257-1.958,3.84-2.354,4.251,1.694c0.654,6.441,1.889,12.823,1.9,19.332c0.002,0.981,0.567,2.432,0.11,2.871
					c-5.667,5.444,0.359,8.043,2.788,11.326c1.936,2.616,3.572,1.995,5.098-0.892c1.152-2.178,0.388-3.732-0.307-5.622
					c-0.893-2.43-2.677-4.396-2.534-7.395c0.317-6.643,0-13.313,0.101-19.971c0.026-1.759-0.328-2.627-2.214-2.493
					c-1.12,0.079-2.573,0.394-2.648-1.355c-0.08-1.855,1.492-1.738,2.775-2.117c10.979-3.245,22.375-3.354,33.609-3.902
					c19.113-0.935,38.271-0.912,57.412-1.297c1.822-0.037,3.676,0.146,5.408-0.654c6,0,12,0,18,0
					c5.697,1.526,11.207,3.055,17.367,3.219c6.557,0.176,13.864,1.811,19.104,6.27c14.475,12.317,15.246,14.673,15.491,33.823
					c0.009,0.665-0.022,1.334,0.034,1.994c0.994,11.565,2,23.13,3.004,34.694C479,267.667,479,284.333,479,301z"/>
				
			</g>
		</g>
	</g>
	<g id="back-panel">
		<g>
			<g>
				
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M304.014,173.994c0.657,3.986-0.855,6.556-4.081,9.262
					c-9.31,7.81-18.013,16.338-27.164,24.344c-3.597,3.146-3.65,7.296-4.308,11.313c-1.671,10.203-2.452,20.469-2.138,30.832
					c0.725,23.859-2.047,47.537-3.813,71.271c-1.038,13.941-1.652,27.921-2.147,41.895c-0.672,18.975-2.525,37.859-3.809,56.787
					c-0.709,10.463-0.97,20.963-1.173,31.451c-0.53,27.481-0.915,54.966-1.366,82.449c-0.024,1.498-0.198,2.996-0.181,4.493
					c0.049,4.208-2.024,4.633-5.762,4.071c-16.181-2.434-31.788-6.739-46.995-12.784c-4.105-1.631-8.502-2.437-12.072-5.304
					c-1.479-1.188-3.146-2.305-2.274-4.468c2.572-6.377,0.549-11.95-2.673-17.424c-4.73-8.034-9.375-16.119-14.057-24.183
					c0-0.667,0-1.333,0-2c10.192-4.479,11.363-6.043,10.365-13.9c1.405,0.257,1.487,1.584,2.065,2.487
					c1.931,3.021,4.026,3.103,5.931,0.056c0.678-1.083,1.021-2.453,1.233-3.739c1.895-11.457,3.699-22.93,5.587-34.388
					c1.214-7.366,3.831-14.768,3.538-22.062c-0.758-18.875,2.865-37.439,2.757-56.256c-0.102-17.793,0.535-35.624,1.717-53.38
					c0.707-10.623-0.1-21.277,1.387-31.874c1.034-7.371,1.95-14.722,0.77-22.33c-3.003-19.362-0.111-38.06,7.516-56.117
					c1.652-3.913,5.099-6.767,6.318-10.562c2.11-6.569,8.858-8.765,11.944-14.21c4.773,0.972,6.035-4.729,10.038-5.299
					c0.844-0.12,1.395-0.97,1.135-1.916c-0.289-1.053-1.225-1.14-2.018-0.804c-6.873,2.913-14.247,0.238-21.234,1.932
					c-1.209,0.293-3.042,0.586-3.12-1.325c-0.06-1.477,1.619-1.435,2.736-1.479c5.485-0.22,10.929-0.931,16.416-1.232
					c10.48-0.575,20.808,2.136,31.385,0.595c4.798-0.699,6.154-2.202,5.501-6.498c1.768,2.131,2.526,5.052,6.883,3.313
					c4.93-1.967,11.518-1.254,9.967-9.66c-0.243-1.317-1.254-3.416,1.01-3.645c1.944-0.196,1.949,1.946,2.042,3.382
					c0.163,2.489,0.512,5.055,0.107,7.475c-0.838,5.021,1.636,5.604,5.588,4.797c8.104-1.657,16.43-1.207,24.604-2.976
					c4.452-0.964,6.17-2.508,6.49-6.565c0.125-1.588,0.347-3.168,0.666-6.005c1.694,3.185,2.465,5.619,4.021,7.347
					c3.15,3.497,3.602-1.264,5.934-2.511c0.678,6.403,5.024,5.363,9.541,5.518c23.217,0.791,45.956,5.041,68.366,10.902
					c5.005,1.309,9.442,4.29,13.649,7.868c6.975,5.932,15.879,8.889,24.109,12.821c7.69,3.674,13.604,9.086,18.233,17.849
					c-5.196-3.108-7.829-6.988-11.147-10.097c-6.305-5.905-14.172-7.5-22.356-7.989c-1.638-0.098-3.364,0.111-4.906-0.405
					c-12.671-4.237-25.649-2.909-38.595-2.27c-15.129,0.748-30.279,0.326-45.42,1.108c-14.236,0.735-28.464,1.257-42.555,3.584
					c-2.759,0.455-2.044-3.267-4.218-3.521c1.233-5.612-5.452-7.441-6.116-12.258c2.102-0.878,3.758,0.447,5.493,0.438
					c1.857-0.011-1.258,3.425,1.583,2.145c1.177-0.53,0.999-2.098,0.672-3.188c-1.4-4.678,1.873-5.058,4.922-5.144
					c4.372-0.123,8.961-1.036,12.572,2.855c1.118,1.206,3.106,1.019,4.783,0.904c1.149-0.077,2.501,0.003,3.073-1.229
					c0.709-1.528-0.504-2.502-1.461-3.365c-4.824-4.346-10.176-6.862-16.684-4.016c-4.562,1.997-9.041,4.191-13.509,6.395
					c-4.635,2.286-5.108,4.939-1.719,8.907C299.735,168.972,301.873,171.483,304.014,173.994z"/>
				
				
			</g>
		</g>
	</g>
	<g id="zippers">
		<g>
			<g>
				
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M499,396c-2.076-6.52-0.995-13.231-1.074-19.854
					c-0.043-3.691-1.287-5.093-4.995-4.815c-16.702,1.253-33.428,2.214-50.113,3.647c-5.418,0.466-4.871-3.529-5.533-6.357
					c-0.737-3.149,1.657-3.801,4.309-3.887c17.271-0.558,34.444-3.313,51.784-2.302c1.928,0.112,2.988-1.21,4.354-2.106
					c3.598-2.365,6.834-2.503,9.27,1.674c0,10-0.189,20.006,0.104,29.997c0.102,3.442-0.666,4.685-4.111,4.042
					C501.704,395.799,500.334,396,499,396z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M296,158c6.533-2.045,12.04-6.364,18.631-8.321
					c5.942-1.765,13.748,0.615,17.398,5.529c2.009,2.706,1.479,4.563-1.779,5.6c-2.576,0.819-5.184,0.476-7.119-1.134
					c-3.059-2.546-6.233-2.868-10.041-2.524c-3.578,0.324-6.47,0.168-5.074,5.173c0.541,1.938-1.047,3.114-2.836,3.41
					c-2.742,0.452-2.502-0.729-1.669-2.787c0.184-0.453-2.501-1.185-3.863-1.004c-1.241,0.165-1.042,1.384-0.71,2.427
					c0.274,0.862,1.357,1.61,0.479,2.733c-2.01,0.748-2.4-1.2-3.417-2.102C296,162.667,296,160.333,296,158z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M407.721,377.021c-8.918,0.22-16.705,1.73-24.549,2.453
					c-14.493,1.336-29.063,2.149-43.657,1.479c-3.564-0.164-3.737-2.471-3.765-5.179c-0.029-2.877,0.648-4.786,4.053-4.953
					c11.457-0.561,22.915-1.146,34.356-1.954c12.063-0.853,24.113-1.893,36.154-3.008c6.283-0.582,12.593,0.315,18.896-0.938
					c3.714-0.739,3.828,2.572,4.16,5.345c0.342,2.855,0.719,5.53-3.278,5.609C422.287,376.029,414.581,378.048,407.721,377.021z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M427.504,311.625c3.498,4.046,6.396,7.236,9.099,10.585
					c1.75,2.169,2.929,4.65,0.55,7.165c-2.531,2.673-5.188,1.615-7.591-0.185c-2.753-2.061-5.303-4.389-8.018-6.502
					c-1.002-0.78-2.325-1.964-3.526-0.743c-1.337,1.359,0.109,2.385,1.071,3.24c0.94,0.838,2.851,1.508,1.681,2.959
					c-1.084,1.344-2.896,0.266-4.065-0.496c-2.559-1.669-3.837-4.541-5.804-6.78c-3.35-3.813-5.377-8.9-10.622-10.903
					c-1.191-0.455-1.716-1.621-1.47-2.885c0.355-1.835,1.914-2.267,3.421-2.267c4.821,0.001,9.668-0.115,14.457,0.328
					c4.942,0.458,9.837,1.479,14.737,2.344c1.21,0.214,3.157-0.111,3.229,1.611c0.09,2.133-2.009,1.684-3.366,1.958
					C430.353,311.243,429.4,311.344,427.504,311.625z"/>
			</g>
		</g>
	</g>
	<g id="details">
		<g>
			<g>
				
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M137,321c4.566-23.823,8.813-47.713,13.802-71.447
					c3.828-18.212,8.116-36.365,14.554-53.889c4.017-10.937,9.603-21.15,15.403-31.214c3.102-5.383,8.393-7.511,14.324-8.726
					c16.962-3.474,34.04-5.925,51.371-4.955c8.055,0.451,16.056,1.475,24.192-0.36c-0.068,1.105-0.059,1.651-0.107,1.656
					c-7.206,0.755-12.795,6.363-21.046,5.249c-9.354-1.264-16.962,4.794-23.879,10.719c-2.633,2.256-4.751,5.091-8.32,6.146
					c-2.109,0.625-2.736,2.641-3.548,4.528c-3.927,9.125-7.933,18.217-12.03,27.267c-1.583,3.496-2.232,7.266-3.38,10.873
					c-8.23,25.873-13.436,52.463-17.941,79.193c-1.602,9.508-2.657,19.115-4.516,28.568c-1.52,7.725-6.852,13.961-9.334,21.396
					c-2.034,6.092-5.71,11.723-7.628,17.587c-2.465,7.539-1.882,16.191,2.375,23.713c1.666,2.941,1.85,5.711,1.166,9.039
					c-1.1,5.354-2.516,10.063-5.333,15.161c-6.031,10.917-8.153,23.276-1.758,35.507c2.719,5.199,4.04,11.032,4.383,16.775
					c0.644,10.769,5.497,20.061,9.179,29.79c2.055,5.429,4.114,10.854,6.186,16.276c0.41,1.072,0.626,2.387,1.384,3.124
					c1.603,1.557,2.759,4.644,5.234,3.989c2.306-0.609,1.539-3.691,1.999-5.719c0.437-1.923,0.301-3.998,1.707-6.002
					c2.565,2.595,4.428,4.971,4.176,9.027c-0.324,5.205,2.113,9.571,7.21,11.461c14.452,5.358,28.469,11.907,44.407,12.631
					c7.506,0.34,14.895,3.27,22.339,5.019c0.81,0.189,1.664,0.555,2.445,0.45c17.806-2.384,35.704,1.456,53.719-2.015
					c12.111-2.333,24.714-4.035,37.483-3.282c10.383,0.612,20.815-1.819,31.089-3.901c6.825-1.384,13.566-3.407,20.453-4.221
					c19.883-2.349,39.16-7.584,58.695-11.591c2.602-0.534,5.274-0.713,7.906-1.114c7.215-1.1,7.213-1.112,8.743,6.221
					c1.684,8.064,1.761,8.222-5.728,11.903c-20.662,10.155-42.537,16.799-65.355,18.996c-20.79,2.001-40.87,7.331-61.354,10.639
					c-25.115,4.057-50.295,7.72-75.775,8.701c-1.639,0.063-3.263,0.544-4.893,0.83c-10.333,0-20.667,0-31,0
					c-8.063-1.078-14.435-5.542-20.603-10.365c-2.219-1.736-4.092-4.102-6.914-4.776c-5.558-1.328-10.785-3.323-15.545-6.506
					c-0.823-0.55-1.89-1.391-2.731-0.698c-5.439,4.471-11.561,1.236-17.342,1.685c-3.18,0.246-4.983-1.302-5.698-4.349
					c-1.444-6.154-2.866-12.313-3.537-18.611c-1.087-10.211-1.359-20.622-6.362-29.967c-5.317-9.933-8.43-20.608-10.222-31.596
					c-1.865-11.429-2.962-22.984-4.322-34.493c-1.427-12.084-2.378-24.078,3.186-35.63c1.312-2.723,1.179-6.16,1.602-9.284
					c0.221-1.63,0.193-2.858-1.781-4.028c-5.605-3.323-9.065-12.318-7.503-18.646c1.31-5.309,5.793-10.418,0.696-15.993
					c-0.093-0.103-0.078-0.321-0.08-0.486c-0.124-10.116-3.819-19.52-5.845-29.256C137,321.667,137,321.333,137,321z"/>
				
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M508,408c-3.048,9.995-2.468,20.421-3.632,30.64
					c-0.244,2.146-0.435,4.297-0.599,6.45c-0.087,1.144-0.554,2.937-0.018,3.346c6.705,5.111,0.441,12.199,3.202,17.862
					c-3.156-1.699-1.325-5.118-3.201-7.779c-1.963,3.322,0.655,6.938-1.385,10.384c-2.302-3.106-1.48-6.295-1.681-9.234
					c-0.157-2.315,0.223-4.617-2.443-6.005c-1.65-0.86-1.9-2.811-1.637-4.45c1.864-11.598-2.074-22.686-3.021-34.029
					c-0.548-6.568-0.618-12.887,1.238-19.213c0.41-1.396,0.772-2.717,2.544-2.316c1.913,0.433,1.855,1.824,1.637,3.52
					c-1.936,15.013-0.904,29.939,1.55,44.807c0.064,0.393,0.564,0.713,0.829,1.028c1.162-0.329,1.237-1.181,1.221-2.009
					c-0.231-11.533,1.187-22.912,3.041-34.264c0.399-2.44,0.215-4.982,0.225-7.478c0.007-1.711,0.689-2.072,2.129-1.259
					C508,401.333,508,404.667,508,408z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M432.093,406.991c1.632,0.181,2.802,1.206,3.627,2.435
					c6.231,9.28,13.889,17.441,20.61,26.337c1.629,2.156,1.537,3.586-0.155,5.622c-8.72,10.495-17.33,21.082-25.919,31.686
					c-2.098,2.59-3.98,3.243-6.397,0.357c-7.263-8.674-14.597-17.289-21.948-25.889c-1.564-1.831-1.385-3.308-0.094-5.325
					c5.85-9.149,13.72-16.698,19.956-25.527c2.12-3.001,4.239-5.981,7.239-8.199C429.947,407.796,430.822,406.996,432.093,406.991z"
					/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M290.301,99.506c1.003,14.229,2.266,28.429,2.151,42.731
					c-0.042,5.229-1.607,6.867-6.779,6.996c-11.399,0.283-11.342,0.54-13.676-10.771c-3.375-16.354,2.278-30.652,10.197-44.354
					c1.405-2.432,3.908-5.771,6.624-4.956c2.174,0.651,1.188,4.766,1.466,7.363C290.39,97.501,290.301,98.509,290.301,99.506z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M433.619,387.969c-1.691-17.96-4.5-35.695-11.256-52.641
					c-0.428-1.072-0.726-2.214-0.939-3.35c-0.483-2.564-2.774-5.138-0.072-7.723c0.771-0.737,2.098-1.357,2.603-0.421
					c1.593,2.959,6.435,2.702,5.921,8.385c-0.492,5.45,2.424,11.232,3.959,16.837c2.664,9.726,5.717,19.363,6.453,29.505
					c0.17,2.337,1.432,3.891,3.006,5.505c3.893,3.99,3.214,10.764-1.157,14.108c-1.796,1.374-3.265,1.056-4.872-0.364
					C434.318,395.207,432.936,391.986,433.619,387.969z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M313.751,175.524c-1.082,9.578,0.845,18.506,0.426,27.495
					c-0.222,4.772,4.169,8.738,3.177,13.896c-0.299,1.558,0.528,3.527-1.487,4.356c-1.784,0.734-3.294-0.253-4.459-1.488
					c-6.641-7.045-9.375-8.782-5.177-16.39c0.571-1.035,0.332-2.617,0.203-3.92c-0.605-6.092-2.05-12.045-2.19-18.25
					c-0.11-4.873-1.699-9.622-5.552-13.321c-1.431-1.373-2.441-3.444-0.845-5.729c1.731-2.478,4.672-1.043,5.204-0.272
					c1.708,2.475,4.292,3.369,6.575,4.685C313.511,168.825,313.356,172.536,313.751,175.524z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M330.351,112.63c-0.216,1.239,0.274,2.728-1.269,3.044
					c-1.105,0.226-1.486-0.944-2.156-1.667c-5.102-5.504-8.399-12.381-14.79-17.033c-5.832-4.245-11.612-8.093-18.648-9.604
					c-2.862-0.614-3.092-1.569-2.073-4.029c3.087-7.458,9.28-10.229,15.329-5.264c10.469,8.598,19.342,18.758,23.271,32.261
					C330.243,111.122,330.258,111.969,330.351,112.63z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M171.91,480.414c-3.762-22.164-6.872-43.396-9.017-65.422
					c2.347,2.119,2.101,4.533,2.777,6.569c2.867,8.643,5.714,17.346,9.975,25.378c3.294,6.211,4.357,13.261,8.068,19.234
					c1.323,2.13-0.238,3.368-1.549,4.641C178.997,473.883,174.845,475.792,171.91,480.414z"/>
				<path class="svg" fill="#000" fill-opacity="0.75" mix-blend-mode="" fill-rule="evenodd" clip-rule="evenodd" d="M332.541,123.282c2.92,6.853,5.627,13.161,8.275,19.494
					c0.223,0.534-0.196,1.485,0.121,1.804c0.9,0.901,3.931,0.028,3.01,2.045c-1.021,2.241-3.51-0.771-5.382,0.077
					c-0.165,0.074-0.52-0.35-0.815-0.47c-8.014-3.24-8.006-3.237-7.125-12.712c0.244-2.634,0.375-5.278,0.666-7.906
					C331.356,125.025,331.875,124.487,332.541,123.282z"/>
			</g>
		</g>
	</g>
		<g xmlns="http://www.w3.org/2000/svg" id="text">
		<text class="svg" transform="matrix(0.9998 -0.0216 0.0216 0.9998 354.1504 260.0288)" fill="#FFFFFF" font-family="'Georgia'" font-size="24">L.L.Bean</text>
	</g>

	<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="2560" height="1440">
    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/camo-green.jpg" x="0" y="0" width="1280" height="720"></image>
  </pattern>
</defs>
</svg>
</div> <!-- end viewer -->

	<div class="attributes">

		<div class="swatch" data-svg="#text">
			<h4>Choose a Logo Color</h4>
			<a  data-color="#ffffff" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="White">White</a>
			<a  data-color="#000000" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#136730" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Light Green">Light Green</a>
			<a  data-color="#183628" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#DAC93D" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Yellow">Yellow</a>
			<a  data-color="#CF5300" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#0080C5" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Light Blue">Light Blue</a>
			<a  data-color="#00004D" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#9F703A" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Light Brown">Light Brown</a>
			<a  data-color="#654321" data-opacity="1" data-blend="normal" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
		</div>
		
		<div class="swatch" data-svg="#details">
			<h4>Choose a Detail Color:</h4>
			<a  data-color="#000000" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#183628" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#CF5300" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#00004D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#654321" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
		</div>
		
		<div class="swatch" data-svg="#zippers">
			<h4>Choose a Zipper Color:</h4>
			<a  data-color="#ffffff" data-opacity="0.75" data-blend="lighten" href="Javascript:void(0);" title="White">White</a>
			<a  data-color="#000000" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#183628" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#DAC93D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Yellow">Yellow</a>
			<a  data-color="#CF5300" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#0080C5" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Blue">Light Blue</a>
			<a  data-color="#00004D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#9F703A" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Brown">Light Brown</a>
			<a  data-color="#654321" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
		</div>
		
		<div class="swatch" data-svg="#back-panel">
			<h4>Choose a Back Panel Color:</h4>
			<a  data-color="#ffffff" data-opacity="0.75" data-blend="lighten" href="Javascript:void(0);" title="White">White</a>
			<a  data-color="#000000" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#136730" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Green">Light Green</a>
			<a  data-color="#183628" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#DAC93D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Yellow">Yellow</a>
			<a  data-color="#CF5300" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#0080C5" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Blue">Light Blue</a>
			<a  data-color="#00004D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#9F703A" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Brown">Light Brown</a>
			<a  data-color="#654321" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
			<a  data-color="url(#img1)" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Camouflage">Camouflage</a>
		</div>
		
		<div class="swatch" data-svg="#mid-panel">
			<h4>Choose a Mid-panel Color:</h4>
			<a  data-color="#ffffff" data-opacity="0.75" data-blend="lighten" href="Javascript:void(0);" title="White">White</a>
			<a  data-color="#000000" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#136730" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Green">Light Green</a>
			<a  data-color="#183628" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#DAC93D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Yellow">Yellow</a>
			<a  data-color="#CF5300" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#0080C5" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Blue">Light Blue</a>
			<a  data-color="#00004D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#9F703A" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Brown">Light Brown</a>
			<a  data-color="#654321" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
			<a  data-color="url(#img1)" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Camouflage">Camouflage</a>
		</div>
		
		<div class="swatch" data-svg="#front-side-panel">
			<h4>Choose a Front Side-panel Color:</h4>
			<a  data-color="#ffffff" data-opacity="0.75" data-blend="lighten" href="Javascript:void(0);" title="White">White</a>
			<a  data-color="#000000" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#136730" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Green">Light Green</a>
			<a  data-color="#183628" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#DAC93D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Yellow">Yellow</a>
			<a  data-color="#CF5300" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#0080C5" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Blue">Light Blue</a>
			<a  data-color="#00004D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#9F703A" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Brown">Light Brown</a>
			<a  data-color="#654321" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
			<a  data-color="url(#img1)" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Camouflage">Camouflage</a>
		</div>
		
		<div class="swatch" data-svg="#front-panel">
			<h4>Choose a Front Panel Color:</h4>
			<a  data-color="#ffffff" data-opacity="0.75" data-blend="lighten" href="Javascript:void(0);" title="White">White</a>
			<a  data-color="#000000" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Black">Black</a>
			<a  data-color="#136730" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Green">Light Green</a>
			<a  data-color="#183628" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Green">Dark Green</a>
			<a  data-color="#DAC93D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Yellow">Yellow</a>
			<a  data-color="#CF5300" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Orange">Orange</a>
			<a  data-color="#0080C5" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Blue">Light Blue</a>
			<a  data-color="#00004D" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Blue">Dark Blue</a>
			<a  data-color="#941B1E" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Red">Red</a>
			<a  data-color="#9F703A" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Light Brown">Light Brown</a>
			<a  data-color="#654321" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Dark Brown">Dark Brown</a>
			<a  data-color="url(#img1)" data-opacity="0.75" data-blend="multiply" href="Javascript:void(0);" title="Camouflage">Camouflage</a>
		</div>
	</div> <!-- end attributes -->
* {
  font-family: sans-serif;
}

body {
  background: #ebebeb;
  display: flex;
  width: 100vw;
  align-items: center;
}

 
 .viewer {
    background-image: url('https://www.w3cplus.com/sites/default/files/blogs/2019/1909/backpack_base.jpg');
    width: 648px;
    height: 648px;
}

.attributes {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  margin-left: 10px;
  
}

.attributes h4 {
 	margin-bottom: 5px;
 }

.swatch {
  display: flex;
  align-items: center;
}
.swatch a {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  border: 5px solid #e9e9e9;
  text-indent: -9999px;
  margin: 5px;
  box-shadow: 0 0 1px #888
}

.swatch a:hover {
  opacity: .6;
 }

 .swatch a.selected {
	  border-width: 3px;
    border-radius: 0px;
		padding: 2px;
		border-color: #444;
}

.tooltip {
  display:none;
	position:absolute;
	border:1px solid #333;
	background-color:#161616;
	border-radius:5px;
	padding:10px;
	color:#fff;
	font-size:12px Arial;
}
h4 {
  margin: 0 10px;
}

#text text {
  font-family: Georgia !important;
}

a[data-color="#ffffff"]{
  background-color: #ffffff;
}
a[data-color="#000000"]{
  background-color: #000000;
}
a[data-color="#136730"]{
  background-color: #136730;
}
a[data-color="#183628"]{
  background-color: #183628;
        	}
        	a[data-color="#DAC93D"]{
        		background-color: #DAC93D;
        	}
        	a[data-color="#CF5300"]{
        		background-color: #CF5300;
        	}
        	a[data-color="#0080C5"]{
        		background-color: #0080C5;
        	}
        	a[data-color="#00004D"]{
        		background-color: #00004D;
        	}
        	a[data-color="#941B1E"]{
        		background-color: #941B1E;
        	}
        	a[data-color="#9F703A"]{
        		background-color: #9F703A;
        	}
        	a[data-color="#654321"]{
        		background-color: #654321;
        	}
        	a[data-color="url(#img1)"]{
        		background-image: url('images/camo-green-swatch.jpg');
        	}
View Compiled
// swatch behavior
        	$('.swatch a').on("click", function() {
        		var $this = $(this);
        		var $parent = $this.parent();
        		var $svg = $parent.attr('data-svg');
        		var $path = $($svg).find('.svg');
        		var $color = $this.attr('data-color');
        		var $opacity = $this.attr('data-opacity');
        		var $blend = $this.attr('data-blend');

        		$parent.find('a').removeClass('selected');
        		$this.addClass('selected');
        		$path.attr('fill', $color);
        		$path.attr('fill-opacity', $opacity);
        		$path.attr('mix-blend-mode', $blend);
        	});

        	//tooltips
        	$('.swatch a').hover(function(){
		        // Hover over code
		        var title = $(this).attr('title');
		        $(this).data('tipText', title).removeAttr('title');
		        $('<p class="tooltip"></p>')
		        .text(title)
		        .appendTo('body')
		        .fadeIn('slow');
			}, function() {
		        // Hover out code
		        $(this).attr('title', $(this).data('tipText'));
		        $('.tooltip').remove();
			}).mousemove(function(e) {
		        var mousex = e.pageX + 20; //Get X coordinates
		        var mousey = e.pageY + 10; //Get Y coordinates
		        $('.tooltip')
		        .css({ top: mousey, left: mousex })
			});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js