cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                <div id="hamburger-nav">
    <div class="center">
      <span><a href="#guitars" class="current">GUITARS</a></span>
      <span><a href="#bases">BASES</a></span>
      <span><a href="#amps">AMPS</a></span>
      <span><a href="#pedals">PEDALS</a></span>
      <span><a href="#others">OTHERS</a></span>
    </div>
  </div>

  <a id="toggle-nav">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="30px" height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
      <rect width="30" height="6"/>
      <rect y="12" width="30" height="6"/>
      <rect y="24" width="24" height="6"/>
    </svg>
  </a>

  <div id="loading">
	  
	  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="328.1465" height="421.6279" viewBox="0 0 328.1465 421.6279"><defs><radialGradient id="radial-gradient" cx="164.3761" cy="252.1279" r="100.9434" gradientTransform="translate(-87.7518 416.5041) rotate(-90)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#e8e8e8"/><stop offset="0.9404" stop-color="#cacbcd"/><stop offset="0.9603" stop-color="#c9cacc"/><stop offset="0.9658" stop-color="#e3e3e3"/></radialGradient></defs><g id="Labels"><path d="M77.0953,386.2389q-.0038-6.6727,3.1042-10.6528a8.1206,8.1206,0,0,1,13.49-.0078q3.1122,3.9767,3.1165,10.83.0039,6.8354-3.1041,10.8155a8.2752,8.2752,0,0,1-6.7249,3.6024,8.3711,8.3711,0,0,1-6.7652-3.5947Q77.1,393.2555,77.0953,386.2389Zm4.1411.0157a16.5405,16.5405,0,0,0,1.6138,7.7206q1.6115,3.0193,4.1066,3.0175,2.4777-.0014,4.1031-3.0223a18.4931,18.4931,0,0,0-.0087-15.1718q-1.6292-3.0005-4.1066-2.9994-2.459.0014-4.0851,3.0042A15.4141,15.4141,0,0,0,81.2364,386.2546Z" style="fill:#2d2d2d"/><path d="M8.3544,262.363H18.7523v3.96H0l9.6926-11.736q1.4282-1.7537,2.396-3.038a23.0775,23.0775,0,0,0,1.4738-2.1519,6.0477,6.0477,0,0,0,1.0307-3.0561,4.3566,4.3566,0,0,0-1.3743-3.2731,4.7185,4.7185,0,0,0-3.4-1.32q-4.2315,0-4.8463,5.009H.7776q1.013-8.8244,8.915-8.8246a9.0063,9.0063,0,0,1,6.4014,2.4231,7.8709,7.8709,0,0,1,2.604,6.0036,9.1222,9.1222,0,0,1-1.2116,4.4665,21.8645,21.8645,0,0,1-1.7993,2.7034q-1.1841,1.5644-2.9928,3.698Z" style="fill:#2d2d2d"/><path d="M94.73,122.1454l2.9656,0,0,3.8336-2.9656,0,0,3.96-4.2134,0,0-3.96-13.7071-.0011L94.7317,99.9392Zm-4.2134,0,.0008-9.349-6.4384,9.3485Z" style="fill:#2d2d2d"/><path d="M243.7074,103.0486l3.1493,2.2364-6.4431,9.2421q.5405-.0856.9192-.1316t.5957-.0511a7.8434,7.8434,0,0,1,5.94,2.4559,8.6216,8.6216,0,0,1,2.6135,6.1209,9.3539,9.3539,0,0,1-9.0766,9.5433,9.3965,9.3965,0,0,1-6.72-2.5268,8.5607,8.5607,0,0,1-2.962-6.3111,12.0176,12.0176,0,0,1,2.5539-7.0825Zm2.6781,20.2467a5.2942,5.2942,0,1,0-5.13,5.3382,5.28,5.28,0,0,0,5.13-5.3382Z" style="fill:#2d2d2d"/><path d="M314.3852,251.5764a6.8622,6.8622,0,0,1-3.0741-5.9132,7.6143,7.6143,0,0,1,2.3327-5.6781,8.0623,8.0623,0,0,1,5.8409-2.2785,7.917,7.917,0,0,1,5.7866,2.2785,7.6281,7.6281,0,0,1,2.3146,5.6962,7.0211,7.0211,0,0,1-3.0561,5.877,6.4782,6.4782,0,0,1,2.64,2.64,7.8277,7.8277,0,0,1,.9765,3.906,8.1269,8.1269,0,0,1-2.4231,6.0759,8.5016,8.5016,0,0,1-6.2025,2.3689,8.8975,8.8975,0,0,1-6.3834-2.387,7.9017,7.9017,0,0,1-2.5316-6.0036Q310.6058,253.4572,314.3852,251.5764Zm.3617,6.4376a4.6326,4.6326,0,0,0,1.3382,3.3273,4.6277,4.6277,0,0,0,6.5642.0181,4.6714,4.6714,0,0,0,0-6.5823,4.6294,4.6294,0,0,0-7.9024,3.2369Zm.5244-12.3689a4.1682,4.1682,0,0,0,4.1772,4.2315,4.1772,4.1772,0,1,0-2.9476-7.1248A3.9588,3.9588,0,0,0,315.2712,245.6451Z" style="fill:#2d2d2d"/><path d="M230.8344,375.7888l-4.8282,0,2.3143-3.9423,6.7269-.0006.0024,27.92-4.2134,0Z" style="fill:#2d2d2d"/><path d="M243.0052,385.625q-.0006-6.6727,3.1094-10.6513a8.1206,8.1206,0,0,1,13.49-.0012q3.11,3.9782,3.1112,10.8316.0006,6.8354-3.1094,10.814a8.2752,8.2752,0,0,1-6.7266,3.5991,8.3711,8.3711,0,0,1-6.7634-3.598Q243.0062,392.6416,243.0052,385.625Zm4.1411.0177a16.5405,16.5405,0,0,0,1.61,7.7214q1.61,3.02,4.1051,3.02,2.4777,0,4.1046-3.02a18.4931,18.4931,0,0,0-.0013-15.1718q-1.6277-3.0013-4.1051-3.0015-2.459,0-4.0865,3.0022A15.4141,15.4141,0,0,0,247.1463,385.6427Z" style="fill:#2d2d2d"/><path d="M43.3491,322.0029c-.3345-.5795-.6476-1.1681-.9475-1.7624L16.5848,335.1459l2,3.4641,25.8167-14.9053C44.0369,323.1478,43.6836,322.5824,43.3491,322.0029Z" style="fill:#2d2d2d"/><path d="M43.3491,182.2529c.3345-.5795.6878-1.1449,1.0525-1.7017L18.5848,165.6459l-2,3.4641,25.8167,14.9053C42.7015,183.4211,43.0145,182.8324,43.3491,182.2529Z" style="fill:#2d2d2d"/><path d="M285.4032,322.0029c-.3345.5795-.6878,1.1449-1.0525,1.7017L310.1674,338.61l2-3.4641-25.8167-14.9053C286.0508,320.8348,285.7377,321.4235,285.4032,322.0029Z" style="fill:#2d2d2d"/><path d="M164.3761,112.3779c.6691,0,1.3354.0233,2,.0606V82.6279h-4v29.8106C163.0407,112.4012,163.707,112.3779,164.3761,112.3779Z" style="fill:#2d2d2d"/><path d="M164.3761,391.8779c-.6691,0-1.3354-.0233-2-.0606v29.8106h4V391.8173C165.7115,391.8547,165.0452,391.8779,164.3761,391.8779Z" style="fill:#2d2d2d"/><path d="M285.4032,182.2529c.3345.5795.6476,1.1681.9475,1.7624L312.1674,169.11l-2-3.4641-25.8167,14.9053C284.7153,181.1081,285.0686,181.6735,285.4032,182.2529Z" style="fill:#2d2d2d"/><path d="M51.1847,2.666V36.3086H62.7121v5.5605H45.2687V2.666Z" style="fill:#2d2d2d"/><path d="M64.7687,22.09A19.2,19.2,0,0,1,70.8371,7.8711,19.9729,19.9729,0,0,1,85.3605,1.93,19.6028,19.6028,0,0,1,99.7316,7.9219a19.5907,19.5907,0,0,1,6.0176,14.3965,19.2777,19.2777,0,0,1-6.043,14.3457,20.7155,20.7155,0,0,1-28.2852.66A19.2615,19.2615,0,0,1,64.7687,22.09Zm5.9668.0762a14.1679,14.1679,0,0,0,4.3672,10.6895,14.4648,14.4648,0,0,0,20.4395-.0762,14.4375,14.4375,0,0,0,4.24-10.5117,14.3657,14.3657,0,0,0-4.1895-10.5117,14.62,14.62,0,0,0-20.6426,0A14.1428,14.1428,0,0,0,70.7355,22.166Z" style="fill:#2d2d2d"/><path d="M134.2375,32.3477H117.4543l-4.3672,9.5215h-6.373L126.1125.2031l18.7129,41.666h-6.4746Zm-2.4121-5.5605-5.8145-13.33-6.0937,13.33Z" style="fill:#2d2d2d"/><path d="M149.7257,41.8691V2.666h8.2266a29.9489,29.9489,0,0,1,9.3438,1.168,17.492,17.492,0,0,1,6.6777,3.8848q6.0681,5.5356,6.0684,14.5488a18.5834,18.5834,0,0,1-6.3223,14.625,18.457,18.457,0,0,1-6.6523,3.8848,30.2735,30.2735,0,0,1-9.2168,1.0918Zm5.916-5.5605h2.666a22.2486,22.2486,0,0,0,6.627-.8379,13.4564,13.4564,0,0,0,9.1406-13.2031,13.6227,13.6227,0,0,0-4.3164-10.4609q-3.8848-3.58-11.4512-3.58h-2.666Z" style="fill:#2d2d2d"/><path d="M193.3976,2.666V41.8691h-5.916V2.666Z" style="fill:#2d2d2d"/><path d="M202.8175,41.8691V0l28.59,29.91V2.666h5.916v41.59l-28.59-29.834V41.8691Z" style="fill:#2d2d2d"/><path d="M267.2843,21.4551h16.1992V22.75a26.7619,26.7619,0,0,1-1.041,7.82,16.6249,16.6249,0,0,1-3.4277,5.8906,17.7586,17.7586,0,0,1-13.8887,6.1445,19.0931,19.0931,0,0,1-14.0918-5.9414,19.7,19.7,0,0,1-5.8652-14.32,19.6527,19.6527,0,0,1,5.9668-14.4727,20.6171,20.6171,0,0,1,23.1055-4.0879,24.7638,24.7638,0,0,1,7.49,6.0938l-4.2148,4.0371Q272.6923,7.4907,265.7609,7.49a14.0444,14.0444,0,0,0-10.4355,4.291,14.3276,14.3276,0,0,0-4.2148,10.5625,13.8952,13.8952,0,0,0,4.6973,10.791,14.0124,14.0124,0,0,0,9.5215,3.9355,11.8208,11.8208,0,0,0,7.8457-2.9453,10.48,10.48,0,0,0,3.8848-7.1094h-9.7754Z" style="fill:#2d2d2d"/></g><g id="dial"><path d="M71.8965,200.3989q-1.4863,2.6557-2.7993,5.3594l-.9477-.4484-.4315.913q-.4362.9211-.857,1.8432l-.4169.9192.9363.4257c-.8189,1.853-1.57,3.7213-2.2745,5.5993l-.9816-.3549-.3432.9493q-.3476.9569-.6786,1.9166l-.328.9546.964.3317c-.6385,1.9217-1.2033,3.8558-1.7262,5.7956l-1-.2594-.2526.9777q-.2579.9849-.494,1.9754l-.2342.9814.9945.2381q-.6768,2.9577-1.1743,5.9325l-1.0112-.1607-.1587.9965q-.16,1.0053-.3019,2.0134L58.2409,238.3l1.0153.1417c-.26,2.0011-.4677,4.004-.6119,6.0077l-1.0223-.0618-.06,1.0077q-.0628,1.0138-.1066,2.0261l-.0446,1.0078,1.0315.0452c-.0679,2.0169-.0919,4.0323-.0447,6.0436l-1.016.0342.0327,1.008q.0344,1.017.0866,2.0306l.053,1.0084,1.0312-.0529c.124,2.0131.2867,4.0222.5244,6.0212L58.1,264.699l.13,1.0006q.1316,1.0082.28,2.0148l.1477.9981,1.0233-.1522c.3139,1.9924.6668,3.9777,1.0929,5.9474l-.99.2231.2213.9849q.2226.9925.4675,1.9819l.24.98L61.72,278.43c.5007,1.9538,1.04,3.8974,1.6511,5.82l-.9682.3181.3161.9588q.3181.9691.6531,1.9286l.331.9526.9794-.3413c.6825,1.8965,1.4041,3.7794,2.1942,5.6364l-.9325.4051.4011.9259q.4063.9346.8342,1.8635l.4224.9166.942-.4328c.8589,1.8233,1.7569,3.6292,2.7205,5.4047l-.8944.4975.49.8818q.4956.8923,1.007,1.7731l.5067.8731.8987-.5215c1.0277,1.7325,2.0944,3.4438,3.2238,5.1206l-.8459.5812.5715.8319q.5769.84,1.1742,1.6728l.5872.82.8472-.6068c1.1882,1.6262,2.416,3.2275,3.7023,4.7905l-.7882.6616.6483.7738q.6553.7813,1.3276,1.553l.6627.7605.7876-.6867q2.0036,2.2525,4.1407,4.4055l-.7268.7387.72.7083q.7249.7139,1.4654,1.4129l.7352.6942.7188-.7605q2.2073,2.0479,4.5449,3.9858l-.6567.81.7851.6354q.7909.641,1.5929,1.2669l.7979.6211.6436-.8262q2.3884,1.8252,4.9031,3.53l-.5791.8721.84.5592q.8467.5622,1.7078,1.1112l.85.5421.5618-.8811c1.0463.653,2.0862,1.3126,3.1626,1.9341.68.3923,1.3712.743,2.0557,1.1186l-.4956.9227.8886.4778q.9.482,1.8043.9461l.8985.4607.4714-.9193c1.8125.9077,3.6416,1.75,5.4823,2.5449l-.4046.959.93.3924q.9408.3963,1.8854.7721l.9381.3743.3778-.9484c1.8893.7318,3.7926,1.3917,5.7035,2.0084l-.3079.9882.9638.3q.9722.3035,1.9486.5878l.97.2821.285-.9783c1.9485.5475,3.9059,1.0287,5.8689,1.46l-.2115,1.0036.9874.2081q.9983.211,1.9978.4l.9926.1872.19-1.0077q2.98.5361,5.9708.9038l-.1128,1.0155,1.0034.1115q1.01.1116,2.0179.2055l1.0049.093.0951-1.0273c2.0113.1661,4.0227.289,6.0326.34l-.0161,1.0166,1.01.016c.6777.0111,1.3546.0137,2.0317.012l1.0094-.0035-.0035-1.0339c2.0168-.0261,4.0311-.0918,6.0382-.2323l.08,1.0127,1.0064-.0792q1.0157-.0795,2.027-.1809l1.0045-.1-.1021-1.03c2.0049-.2171,4.004-.4741,5.9906-.8042l.1757,1.0035.9945-.1748q1.0042-.1749,2.0026-.3713l.9908-.194-.1993-1.0179c1.9758-.4057,3.9426-.8515,5.8915-1.3684l.272.9851.9723-.2685q.9828-.2709,1.9587-.5595l.9676-.286-.2943-.996c1.9273-.59,3.8419-1.22,5.7338-1.9188l.3638.9565.9437-.3589q.9539-.3628,1.8981-.7424l.9368-.3766-.3877-.9646c1.863-.77,3.71-1.5791,5.5294-2.455l.4535.9187.9057-.4469q.9128-.4513,1.8191-.919l.897-.4633-.4774-.9243c1.7808-.9424,3.5419-1.9247,5.271-2.97l.54.8737.8595-.53q.8675-.5355,1.7246-1.0885l.8494-.5466-.5645-.8768c1.6828-1.1075,3.3421-2.2553,4.9654-3.4627l.622.8208.8046-.6089q.8149-.6189,1.6165-1.2522l.7923-.6251-.6472-.8193c1.5682-1.2627,3.1086-2.5661,4.61-3.9249l.703.761.7416-.6851q.7462-.6892,1.4824-1.3945l.7287-.6982-.7238-.7554q2.1546-2.1053,4.204-4.3437l.7749.6942.6736-.7528q.6794-.7568,1.344-1.5313l.6589-.7647-.7943-.6835q1.9416-2.2994,3.7674-4.7281l.8436.6205.5982-.8134q.6-.8179,1.1908-1.65l.5825-.8236-.8545-.6049q1.7121-2.47,3.299-5.0646l.9.54.5192-.8658c.3107-.5184.6181-1.041.9291-1.58l.6044-1.0488-.9-.52c.9941-1.7679,1.9254-3.5533,2.8077-5.3523l.9422.4509.4363-.9114q.44-.9209.8615-1.8452l.42-.9186-.9328-.4253c.8228-1.852,1.5761-3.72,2.285-5.5968l.9727.3571.3484-.9485q.3516-.958.6821-1.9169l.33-.9544-.9614-.3325c.6424-1.92,1.2148-3.8526,1.7417-5.7911l.9964.2605.2548-.9775q.2579-.9849.4957-1.9744l.2364-.9813-.997-.24q.6828-2.9564,1.1952-5.929l1.0094.1621.16-.9956q.1622-1.0025.3055-2.0137l.1394-.9986-1.02-.1439c.2639-2.0013.4845-4.0043.6327-6.0083l1.0149.0652.0649-1.0075q.0649-1.0143.1111-2.028l.0454-1.0073-1.0338-.0471c.0718-2.0163.1036-4.0313.06-6.0422l1.0167-.0324-.0322-1.0089q-.0318-1.0155-.0822-2.03l-.05-1.0077-1.035.051c-.12-2.0137-.2805-4.0228-.5142-6.0226l1.0107-.1263-.1262-1.0017q-.1261-1.0119-.2747-2.0163l-.145-.9989-1.0265.15c-.31-1.993-.6607-3.9784-1.0828-5.9491l.9965-.2229-.2208-.9858c-.1484-.6617-.303-1.3246-.464-1.9821l-.24-.9807-1.0077.2463c-.4967-1.9545-1.0343-3.8982-1.6412-5.8216l.9727-.3166-.3115-.9607q-.3156-.9676-.65-1.93l-.3314-.954-.9816.3413c-.6788-1.898-1.3982-3.7815-2.1846-5.64l.9393-.408-.4021-.9242q-.4063-.9346-.8289-1.8627l-.4192-.9182-.9462.4321c-.8555-1.8254-1.7516-3.633-2.7119-5.4107l.9-.5-.4911-.8823q-.4912-.888-1.0022-1.7715l-.504-.8738-.9013.5194c-1.0245-1.7351-2.09-3.4482-3.2159-5.1277l.8505-.5811-.5693-.8318q-.576-.8448-1.1687-1.6764l-.5867-.8213-.8505.6064c-1.1846-1.6281-2.41-3.2305-3.693-4.7957l.7939-.6664-.6488-.773q-.6553-.7813-1.3235-1.5541l-.6618-.7623-.7906.6857q-1.9991-2.2569-4.1337-4.4134l.73-.7448-.72-.707c-.4831-.4724-.9705-.9451-1.4618-1.4131l-.732-.6958-.7215.76q-2.2031-2.0525-4.5378-3.9938l.6593-.8151-.7851-.6354q-.79-.637-1.589-1.2657l-.7947-.6227-.6459.8243q-2.3855-1.8306-4.8985-3.54l.58-.87-.84-.56q-.8447-.5628-1.7033-1.1132l-.85-.5452-.562.8758c-1.1045-.6924-2.2062-1.3881-3.3444-2.0453-.6178-.3567-1.2469-.6741-1.8688-1.0169l.4963-.9274-.89-.4774c-.5965-.3193-1.1967-.6362-1.7973-.9444l-.8961-.4628-.4728.9155c-1.8117-.9119-3.64-1.7569-5.48-2.5557l.4039-.96-.93-.3915q-.9395-.3956-1.88-.7735l-.9366-.3769-.3794.943c-1.887-.7352-3.7884-1.3973-5.6971-2.0176l.3078-.9879-.9624-.3007q-.9755-.3037-1.9466-.5912l-.97-.2843-.2892.9837q-2.92-.8271-5.8635-1.481l.214-.9986-.9873-.21q-.9993-.215-1.9993-.4053l-.993-.1886-.1926,1.0114c-1.986-.3615-3.9755-.6789-5.9684-.9246l.1171-1.006-1.0026-.1167c-.6719-.0783-1.3453-.1461-2.02-.2122l-1.0039-.0947-.0987,1.0315c-2.011-.17-4.0222-.3-6.032-.3542l.0184-1.0168-1.0094-.0182q-1.0178-.0174-2.0306-.0159l-1.01-.0006.0007,1.038c-2.0169.0219-4.031.0856-6.0383.222l-.0772-1.0158-1.0071.0765q-1.0142.0769-2.0271.1751l-1.004.0987.1,1.0326c-2.0057.2131-4.0053.4679-5.9929.7941l-.1785-1.0111-.9936.1753c-.6669.1181-1.3331.2389-1.9988.3667l-.99.1932.1975,1.02c-1.9777.4019-3.9462.8459-5.8974,1.3592l-.2672-.9865-.9742.2639c-.6544.1754-1.3087.3622-1.9615.5544l-.9684.2855.2939.9974c-1.929.5864-3.845,1.2146-5.7388,1.91l-.369-.964-.9428.3594c-.632.243-1.265.4876-1.8931.74l-.9385.3756.3866.9653c-1.8644.7659-3.7121,1.5734-5.533,2.4455l-.4554-.9241-.9056.4447c-.609.3017-1.2164.6045-1.82.9163l-.8985.46.477.9285c-1.7825.9387-3.5445,1.9192-5.2755,2.9611l-.5432-.8794-.8585.5288c-.578.3584-1.1543.7177-1.7267,1.0862l-.85.5452.564.8791c-1.6843,1.1037-3.3441,2.249-4.9691,3.4525l-.622-.8255-.8058.607q-.82.6159-1.6208,1.25l-.7936.6254.6469.82q-2.3563,1.8894-4.6175,3.9172l-.702-.7646-.745.6831q-.7462.6892-1.4845,1.3922l-.7309.6981.7228.7558q-2.1591,2.1013-4.2122,4.337l-.774-.6973-.6766.75c-.4551.5044-.9017,1.0138-1.3469,1.5285l-.66.7642.7928.6846q-1.9471,2.2967-3.7776,4.7237l-.8393-.6224-.6015.8092c-.4037.5455-.8006,1.0949-1.1961,1.65l-.5847.8235.8524.6053q-1.716,2.4651-3.3061,5.0556l-.8939-.5408-.5235.8634q-.5266.8707-1.0364,1.7556l-.7181,1.2439Z" style="fill:#161616"/><circle cx="164.3761" cy="252.1279" r="100.9434" transform="translate(-136.1611 268.4179) rotate(-60)" style="fill:url(#radial-gradient)"/><rect x="132.3761" y="274.8159" width="4" height="58.5472" transform="translate(98.7045 634.6267) rotate(-150)" style="fill:#191919"/></g></svg>
	</div>
  <p class="credits">(Click the hamburger nav) Based on a <a href="https://dribbble.com/shots/4773637-3D-flip-menu" target="_blank">concept by Minh Pham</a>.</p>

            
          
!
            
              html, body{
  padding:0;
  margin:0;
  height:100%;
  overflow:hidden;
  background-color:#fff;
  font-family: 'Raleway', sans-serif;
}

*, *:before, *:after {
  box-sizing: border-box;
}

#toggle-nav{
  position:absolute;
  top:0;
  right:0;
  padding:10px;
  cursor:pointer;
  transition:0.25s all;
}

#hamburger-nav{
  position:absolute;
  top:0;
  left:-75%;
  width:75%;
  height:100%;
  transition: left 0.75s ease;
  display: flex;
  align-items: center;
}

#hamburger-nav.open{
  left:0;
}

#hamburger-nav .center{
  padding:20px;
}
#hamburger-nav .center span{
  width:100%;
  display:inline-block;
  margin:0.65rem 0;
}
#hamburger-nav a{
  font-size:30px;
  font-weight:700;
  transition:0.25s all;
  color:#333;
  text-decoration: none;
}

#toggle-nav:hover {
  fill:#712519;
}

.credits{
  position:absolute;
  display:inline-block;
  bottom:0;
  left:0;
  padding:5px;
  width:100%;
  font-weight:400;
  text-align:center;
  margin:0;
  font-size:12px;
  background-color:rgba(255, 255, 255, 0.75);
}


.credits a{
  text-decoration: none;
  color:#712519;
}

#loading{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  opacity:1;
  background-color:#e6bd73;
  display: flex;
  align-items: center;
  transition:0.25s all;
  justify-content: center;
}

#loading.loaded{
  top:-100vh;
}

#loading svg{
  padding:15px;
  width:100%;
  max-width:300px;
}

#dial{
  transition:0.25s all;
  transform-origin:50% 59.8%;
}

#hamburger-nav a.current, #hamburger-nav a:hover{
  color:#712519;
}
            
          
!
            
              var scene = new THREE.Scene();
var renderer, camera;
var width, height, aspectRatio, loader, textures;

// lights
var frontLight, leftLight, rightLight;

// geometry
var bodytextMaterial = new THREE.MeshPhongMaterial({
  emissive : 0x999999,
  shininess : 10
}); 
var lineThickness = 0.5;
var sceneContainer = new THREE.Object3D();
var cubeContainer = new THREE.Object3D();
var cubeSize = 100;
var cubeGeometry,cubeMesh,downArrowMesh;
var gibsonTextMesh,gibsonTextOriginalSize;
var lesPaulTextMesh,lesPaulTextOriginalSize = {};
var specTextMesh,specTextOriginalSize = {};
var guitarMesh, guitarMeshOriginalSize = {};
var assetsDir = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/67732/';
// var assetsDir = 'assets/';
var guitarIsLoaded = 0, fontsAreLoaded = 0;

var fontsData = [
  {
    name : 'RalewayBlack',
    filename : 'Raleway_Black_Regular'
  },
  {
    name : 'bodyCopy',
    filename : 'Raleway_ExtraBold_Regular'
  }
];
var fonts = [];
THREE.ImageUtils.crossOrigin = "";
var loadingProgressContainer = document.getElementById('loading');
// animation variables
var navIsOpen = false;
var animationDuration = 1000;



// nav
var hamburgerNav = document.getElementById('hamburger-nav');

var dial = document.getElementById('dial');

function init() {
  width = window.innerWidth, height = window.innerHeight, aspectRatio = width/height;
  console.log(width,height,aspectRatio);
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.setPixelRatio(1.5);
  renderer.setClearColor(0xada594);

  renderer.shadowMap.enabled = true; 
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  document.body.appendChild(renderer.domElement);
  window.addEventListener( 'resize', onWindowResize, false );

  scene.add( sceneContainer );

  addLights();

  // camera
  camera = new THREE.PerspectiveCamera(10, aspectRatio, 0.1, 200000);
  camera.position.set(0, 0, 580 );
  scene.add(camera);
  camera.lookAt(new THREE.Vector3(0,0,0));

  loadGeometry();
}


function addLights(){
  topLight = new THREE.SpotLight(0xffffff);
  frontLight = new THREE.SpotLight(0xffffff);
  rightLight = new THREE.SpotLight(0xffffff);
  
  const lights = [
    {
      light : frontLight,
      x : 0,
      y : 0,
      z : 450,
      intensity :0.5
    }
    ,{
      light : topLight,
      x : 0,
      y : 40,
      z : 10,
      intensity : 0.2
    }
    ,{
      light : rightLight,
      x : cubeSize * aspectRatio * 5,
      y : 0,
      z : 100,
      intensity : 0.2
    }
  ];


  lights.forEach(function (lightObj) {
    light = lightObj.light;
    light.intensity = lightObj.intensity
    light.position.set(lightObj.x,lightObj.y,lightObj.z);
    light.castShadow = true;   
    scene.add( light );
  });

}

function scaleScene(){  // Responsive functionality
  if(aspectRatio > 1.5){
    modifier = aspectRatio/3;
    modifier = 0.9;
    console.log(aspectRatio+"/"+modifier)
  }if(aspectRatio > 2.5){
    modifier = aspectRatio/3;
    modifier = 0.8;
    console.log(aspectRatio+"/"+modifier)
  }else{
    modifier = 1;
  }
  // Cube
  var cubeWidth = cubeSize * aspectRatio;
  var cubeHeight = cubeSize;
  var cubeDepth = cubeWidth * 0.75;

  cubeMesh.scale.x = cubeSize * aspectRatio; 
  cubeMesh.scale.y = cubeSize; 
  cubeMesh.scale.z = cubeWidth * 0.75; 
  cubeContainer.position.set(0, 0, cubeDepth * -0.2);
  if(fontsAreLoaded){
    // Gibson Text
    var gibsonTextScale = cubeHeight/gibsonTextOriginalSize * 0.5;
    gibsonTextMesh.scale.x = gibsonTextScale;
    gibsonTextMesh.scale.y = gibsonTextScale;
    gibsonTextMesh.scale.z = gibsonTextScale;
    gibsonTextBoundingBox = new THREE.Box3().setFromObject(gibsonTextMesh);
    gibsonTextSize = Math.abs(gibsonTextBoundingBox.max.y) + Math.abs(gibsonTextBoundingBox.min.y)
    gibsonTextMesh.position.set(cubeWidth * -0.45 * modifier, 0.9*cubeHeight-gibsonTextSize, cubeDepth * 0.5);

    // strat text
    var lesPaulTextScale = cubeWidth/lesPaulTextOriginalSize.width * 0.45;
    if(lesPaulTextScale > 0.07){
      lesPaulTextScale = 0.07;
    }
    lesPaulTextMesh.scale.x = lesPaulTextScale;
    lesPaulTextMesh.scale.y = lesPaulTextScale;
    lesPaulTextMesh.scale.z = lesPaulTextScale;
    lesPaulTextBoundingBox = new THREE.Box3().setFromObject(lesPaulTextMesh);
    lesPaulTextHeight = Math.abs(lesPaulTextBoundingBox.max.y - lesPaulTextBoundingBox.min.y);
    lesPaulTextMesh.position.set(cubeWidth * -0.45 * modifier, (cubeHeight*-0.45) + (lesPaulTextHeight * 0.86), cubeDepth * 0.66);

    // down arrow
    downArrowMesh.position.set(cubeWidth * 0.45 - lineThickness*4, (cubeHeight*-0.45) + lineThickness*5.5, cubeDepth * 0.7);
    
    // spec text
    specTextMesh.position.set(cubeWidth * 0.45 - (specTextOriginalSize.width + lineThickness*5), (cubeHeight*-0.45) + specTextOriginalSize.height, cubeDepth * 0.7);
  }

  // guitar
  if(guitarIsLoaded){
    var guitarMeshScale = cubeHeight / guitarMeshOriginalSize.height * 0.7;
    guitarMesh.scale.x = guitarMeshScale;
    guitarMesh.scale.y = guitarMeshScale;
    guitarMesh.scale.z = guitarMeshScale;
    guitarMeshBoundingBox = new THREE.Box3().setFromObject(guitarMesh);
    guitarMeshWidth = Math.abs(guitarMeshBoundingBox.max.x - guitarMeshBoundingBox.min.x);
    guitarMeshHeight = Math.abs(guitarMeshBoundingBox.max.y - guitarMeshBoundingBox.min.y);
    guitarMesh.position.set(guitarMeshWidth/1.5, 0 - guitarMeshHeight/8, cubeDepth * 0.55);
    frontLight.target = guitarMesh;
  }
}



function loadGeometry(){

  var material = new THREE.MeshPhongMaterial({
    color: 0xefdece, 
    shininess : 30,

    wireframe: false
  });
  /* load the background */
  cubeGeometry = new THREE.BoxGeometry( 1, 1, 1);
  cubeGeometry.receiveShadow = true;
  cubeGeometry.normalsNeedUpdate = true;
  cubeGeometry.computeFaceNormals();
  cubeMesh = new THREE.Mesh( cubeGeometry, material );
  cubeMesh.receiveShadow = true;   

  cubeContainer.add(cubeMesh);
  
  sceneContainer.add(cubeContainer);
  var loader = new THREE.FontLoader();
  var numOfLoadedFonts = 0;
  fontsData.forEach(function (fontData) {
    loader.load( assetsDir+fontData.filename+'.json', function ( font ) {
      fonts[fontData.name] = font;
      numOfLoadedFonts++;
      if(numOfLoadedFonts == fontsData.length){
        fontsAreLoaded = true;
        loadTextMeshes();
      }
    });
  });

  var x = 0, y = 0;

  var downArrowShape = new THREE.Shape();

  downArrowShape.lineTo( x+lineThickness, y );
  downArrowShape.lineTo( x+lineThickness*2, y-lineThickness );
  downArrowShape.lineTo( x+lineThickness*3, y );
  downArrowShape.lineTo( x+lineThickness*4, y );
  downArrowShape.lineTo( x+lineThickness*2, y-lineThickness*2 );
  downArrowShape.lineTo( x+lineThickness*2, y-lineThickness*2 );

  geometry = new THREE.ShapeGeometry( downArrowShape );
  downArrowMesh = new THREE.Mesh( geometry, bodytextMaterial ) ;
  cubeContainer.add( downArrowMesh );
  
  loadGuitar();
}

function updateLoadingProgress(amount){
 deg = amount*300;
 dial.style.transform = 'rotate('+deg+'deg)'; 
}

function loadGuitar(){
  var manager = new THREE.LoadingManager();
  var texture = new THREE.Texture();
  var lastPercent = 0;
  var onProgress = function ( xhr) {
    if ( xhr.lengthComputable ) {
		console.log(xhr.loaded / xhr.total);
      updateLoadingProgress(xhr.loaded / xhr.total);
      if(xhr.loaded == xhr.total){
      updateLoadingProgress(1);
			
        loadingProgressContainer.classList.add('loaded');
      }
    }
  };

  var mtlLoader = new THREE.MTLLoader();
  mtlLoader.setMaterialOptions( { side: THREE.DoubleSide } );
  mtlLoader.setPath( assetsDir );
  mtlLoader.crossOrigin = '';
  mtlLoader.load( 'guitar.mtl', function( materials ) {
    materials.preload();

    var objLoader = new THREE.OBJLoader();
    objLoader.setMaterials( materials );
    objLoader.setPath( 'https://s3.ca-central-1.amazonaws.com/kevinnewcombe/codepen/guitar/' );
    objLoader.load( 'guitar.obj', function ( object ) {
      object.rotation.set(0, 0,  THREE.Math.degToRad(85) );
      object.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          child.material.shininess = 0;
          child.castShadow = true;
          child.receiveShadow = false;
        }
      });

      guitarMesh = object;
      var guitarMeshBoundingBox = new THREE.Box3().setFromObject(guitarMesh);
      guitarMeshOriginalSize.width = Math.abs(guitarMeshBoundingBox.max.x - guitarMeshBoundingBox.min.x);
      guitarMeshOriginalSize.height = Math.abs(guitarMeshBoundingBox.max.y - guitarMeshBoundingBox.min.y);

      cubeContainer.add(guitarMesh);
      guitarIsLoaded = true;
      scaleScene();
      animate();
    }, onProgress);
  });
}

function loadTextMeshes(){
  /* ************** */
  /*     GIBSON     */
  /* ************** */
  let geometry = new THREE.TextGeometry( 'GIBSON', {
    font: fonts.RalewayBlack,
    height: 5
  });

  const gibsonTextMaterial = new THREE.MeshPhongMaterial({
    color: 0xc6bdb5, 
    shininess : 10
  }); 
  gibsonTextMesh = new THREE.Mesh(geometry, gibsonTextMaterial );
  gibsonTextMesh.rotation.set(0, 0, THREE.Math.degToRad(-90) );

  const gibsonTextBoundingBox = new THREE.Box3().setFromObject(gibsonTextMesh);
  gibsonTextOriginalSize = Math.abs(gibsonTextBoundingBox.max.y) + Math.abs(gibsonTextBoundingBox.min.y);
  cubeContainer.add(gibsonTextMesh);
  

  /* ****************************** */
  /*     Gibson Les Paul Custom     */
  /* ****************************** */
  geometry = new THREE.TextGeometry( 'GIBSON\nLES PAUL\nCUSTOM', {
    font: fonts.bodyCopy,
    height: 0
  });

  lesPaulTextMesh = new THREE.Mesh(geometry, bodytextMaterial );
  var lesPaulTextBoundingBox = new THREE.Box3().setFromObject(lesPaulTextMesh);
  lesPaulTextOriginalSize.width = Math.abs(lesPaulTextBoundingBox.max.x - lesPaulTextBoundingBox.min.x);
  lesPaulTextOriginalSize.height = Math.abs(lesPaulTextBoundingBox.max.y - lesPaulTextBoundingBox.min.y);
  cubeContainer.add(lesPaulTextMesh);


  /* ************ */
  /*     SPEC     */
  /* ************ */
  geometry = new THREE.TextGeometry( 'SPEC', {
    font: fonts.bodyCopy,
    height: 0,
    size: 1.5
  });

  specTextMesh = new THREE.Mesh(geometry, bodytextMaterial );

  var specTextBoundingBox = new THREE.Box3().setFromObject(specTextMesh);
  specTextOriginalSize.width = Math.abs(specTextBoundingBox.max.x - specTextBoundingBox.min.x);
  specTextOriginalSize.height = Math.abs(specTextBoundingBox.max.y - specTextBoundingBox.min.y);
  cubeContainer.add(specTextMesh);

  scaleScene();
  animate();
}

function onWindowResize( event ) {
  width = window.innerWidth;
  height  = window.innerHeight;

  aspectRatio = width / height;
  renderer.setSize( width, height );
  scaleScene();
  camera.aspect = aspectRatio;
  camera.updateProjectionMatrix();
}

// nav
document.getElementById('toggle-nav').addEventListener("click", function(){
  navIsAnimating = true;
  if(navIsOpen){ // close the nav
    hamburgerNav.classList.remove('open');
    TweenLite.to(sceneContainer.rotation, 0.5, { 
      y: THREE.Math.degToRad(0), 
      ease: Power1.easeInOut
    });
    navIsOpen = false;
  }else{ // open the nav
    hamburgerNav.classList.add('open');
    TweenLite.to(sceneContainer.rotation, 0.5, { 
      y: THREE.Math.degToRad(90), 
      ease: Power1.easeInOut
    });
    navIsOpen = true;
  }
});


function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}



init(); // light this candle

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console