Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="box-badge-olive">
	<div class="hexagon-draw">
		<div class="hexagon-construct-top"></div>
		<div class="hexagon-construct-middle"></div>
		<div class="hexagon-construct-bottom"></div>
		<div class="hexagon-picture">
			<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGZpbGw9IndoaXRlIiBkPSJNMzk1Ljk4NiwxNjYuNDM2bDIyLjIzOS0zNy4wNGwtMzYuMDg2%0D%0ALTIzLjcyNGwzLjk1My00Mi45OThsLTQyLjgwNy01LjY4OWwtMTUuMDkzLTQwLjUwN0wyODcuMTc3%0D%0ALDI5Ljk0TDI1Ni4wMDIsMCAgbC0zMS4xMjUsMjkuOTM5bC00MS4wNzEtMTMuNDYzbC0xNS4wNzIs%0D%0ANDAuNTA3bC00Mi44MjcsNS42OTFsMy45OTMsNDIuOTk4bC0zNi4xMjYsMjMuNzI0bDIyLjI2Miwz%0D%0ANy4wNGwtMjIuMjYyLDM3LjAwNCAgbDM2LjEyNiwyMy43MDFsLTMuOTkzLDQzLjAzNmw0Mi44Mjcs%0D%0ANS42NjlsMTUuMDcyLDQwLjQ3MWw0MS4wNzEtMTMuNDIxbDMxLjEyNSwyOS45MzhsMzEuMTc1LTI5%0D%0ALjkzOGw0MS4wMTgsMTMuNDIxbDE1LjA5MS00MC40NzEgIGw0Mi44MDctNS42NjlsLTMuOTUtNDMu%0D%0AMDM2bDM2LjA4NS0yMy43MDFMMzk1Ljk4NiwxNjYuNDM2eiBNMjk0Ljg3LDMzNi42NDZsLTE4LjI4%0D%0ANSwxNy42MDRsLTIwLjU4NCwxOS43ODdsLTIwLjU4OC0xOS43ODcgIGwtMTguMjY1LTE3LjYwNGwt%0D%0AMjQuMTEyLDcuOTFsLTI0LjI2OCw3Ljk0NFY1MTJsODUuNjUzLTUzLjgzM0wzNDMuMjQ1LDUxMlYz%0D%0ANTIuNTM5bC0yNC4yODYtNy45ODNMMjk0Ljg3LDMzNi42NDZ6Ii8+PC9zdmc+Cg==" alt="Title Badge">
		</div>
	</div>
	<div class="hexagon-draw">
		<div class="hexagon-construct-top"></div>
		<div class="hexagon-construct-middle"></div>
		<div class="hexagon-construct-bottom"></div>
		<div class="hexagon-picture">
			<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGZpbGw9IndoaXRlIiBkPSJNMjkwLjczMywyODYuMTA4Yy01LjA2OC00LjA1MS0xMy42OTYt%0D%0ANy43MTktMjUuOTE3LTExLjA1djU5LjU5NGMzLjcxLTAuNDE1LDcuNjA2LTEuMjUzLDExLjY1My0y%0D%0ALjY1MSAgYzQuMDUyLTEuMzE5LDcuNjQ1LTMuMjE0LDEwLjg1OC01Ljc1MmMzLjIxNi0yLjQyLDUu%0D%0AODY0LTUuNDgxLDcuOTExLTkuMTU3YzIuMDc3LTMuNTk0LDMuMTAzLTcuODYxLDMuMTAzLTEyLjg2%0D%0AMSAgQzI5OC4zMzksMjk2LjEzNSwyOTUuODAyLDI5MC4xMTYsMjkwLjczMywyODYuMTA4IE0yMjcu%0D%0AMjgyLDE4MS40ODZjLTIuNjg3LDIuMjAzLTQuODA3LDQuODg2LTYuMzU4LDguMTA0ICBjLTEuNTQ5%0D%0ALDMuMjE3LTIuMzEsNi45NjItMi4zMSwxMS4yNzZjMCw2Ljg0NywyLjEyMiwxMi4xNDYsNi40NzUs%0D%0AMTUuODkxYzQuMzUsMy42NjYsMTEuNTAxLDYuNjk2LDIxLjQxNSw5di01MC42MjMgIGMtMy41Miww%0D%0ALTYuOTI2LDAuNTMxLTEwLjIxNiwxLjU1NUMyMzIuOTU4LDE3Ny43NDEsMjMwLjAxLDE3OS4zMzEs%0D%0AMjI3LjI4MiwxODEuNDg2IE0yNTUuOTU5LDAuMDEgIEMxMTQuNjA2LDAuMDEsMC4wMDEsMTE0LjU5%0D%0ANywwLjAwMSwyNTUuOTljMCwxNDEuMzg3LDExNC42MDUsMjU2LDI1NS45NTgsMjU2YzE0MS4zOTYs%0D%0AMCwyNTYuMDQxLTExNC42MTMsMjU2LjA0MS0yNTYgIEM1MTIsMTE0LjU5OCwzOTcuMzU2LDAuMDEs%0D%0AMjU1Ljk1OSwwLjAxIE0yNTUuOTU5LDQ3NS4yODZjLTEyMC44ODQsMC0yMTkuMjU3LTk4LjQxMi0y%0D%0AMTkuMjU3LTIxOS4yOTUgIGMwLTEyMC45MjMsOTguMzczLTIxOS4yOTYsMjE5LjI1Ny0yMTkuMjk2%0D%0AYzEyMC45MjgsMCwyMTkuMzAyLDk4LjM3NCwyMTkuMzAyLDIxOS4yOTYgIEM0NzUuMjYxLDM3Ni44%0D%0ANzQsMzc2Ljg4NCw0NzUuMjg2LDI1NS45NTksNDc1LjI4NiBNMjU2LDc2LjUxNWMtOTkuMTMsMC0x%0D%0ANzkuNDU3LDgwLjM4MS0xNzkuNDU3LDE3OS40NzUgIFMxNTYuODY5LDQzNS40NDYsMjU2LDQzNS40%0D%0ANDZjOTkuMDkxLDAsMTc5LjQxNS04MC4zNjIsMTc5LjQxNS0xNzkuNDU3QzQzNS40MTQsMTU2Ljg5%0D%0ANiwzNTUuMDkzLDc2LjUxNSwyNTYsNzYuNTE1IE0zMzkuMDEzLDMyMy4zMzkgIGMtMi4yNzEsNi45%0D%0AMTktNi4zNTYsMTMuNjk2LTEyLjI2MiwyMC4zMTVjLTUuOTAyLDYuNjI4LTEzLjgxLDEyLjUyNS0y%0D%0AMy43NTksMTcuNzA0Yy05LjkxNCw1LjE1My0yMi42NjMsOC4yNS0zOC4xNzcsOS4yNzl2MjYuNDA4%0D%0AICBoLTE4LjMxMnYtMjYuNDA4Yy0yMy4xNTgtMS42MzQtNDEuMjQzLTguNzgxLTU0LjI5NS0yMS40%0D%0AMTVjLTEzLjAxOC0xMi42MDQtMjAuNTgxLTMxLjE0Ny0yMi42NjItNTUuNTA1aDQzLjc3NCAgYy0w%0D%0ALjIyNSwxMS43NTksMi44NzUsMjEuMDcxLDkuMzA2LDI3LjkyM2M2LjM5OCw2Ljg0MywxNC4zNzks%0D%0AMTEuMTU1LDIzLjg3OCwxMy4wMTN2LTY0LjgxNGMtMS4wMjEtMC40NTItMi40Mi0wLjk0MS00LjE2%0D%0AMi0xLjQwMSAgYy0xLjc0Mi0wLjU2OS0zLjY3Mi0wLjk4Mi01Ljc1Mi0xLjQzN2MtNy42NDQtMi4w%0D%0ANDEtMTUuMjEtNC41MDItMjIuNjYzLTcuM2MtNy40MTctMi44MDItMTQuMTE0LTYuNTQ2LTIwLjAx%0D%0ANi0xMS4xNjIgIGMtNS45MDEtNC42NjEtMTAuNTk1LTEwLjQ4MS0xNC4xNDktMTcuMzY4Yy0zLjQ4%0D%0AMi02Ljk2Ny01LjIyLTE1LjU1Mi01LjIyLTI1LjkyMWMwLTEwLjU1MiwyLjAwMy0xOS44NjMsNi4w%0D%0AMTYtMjcuOTYyICBjNC4wNDctOC4wNTYsOS4zODItMTQuNzk0LDE2LjAwMy0yMC4yNzZjNi42MjMt%0D%0ANS40ODksMTQuMjYzLTkuNzY0LDIyLjk2Ni0xMi43NTFjOC43MDItMi45OTIsMTcuNjctNC44MDUs%0D%0AMjYuOTc3LTUuNDQ2di0yMy44NzkgIGgxOC4zMTJ2MjMuODc5YzkuMzExLDEuMDkxLDE4LjA0Nywz%0D%0ALjA2MSwyNi4yMTgsNi4wNDdjOC4xNzYsMy4wMzMsMTUuMzY0LDcuMTU5LDIxLjYwNywxMi40NTIg%0D%0AIGM2LjE2NSw1LjI1NiwxMS4yNzQsMTEuODQyLDE1LjE3MywxOS42NzdjMy45MzIsNy44NzEsNi4y%0D%0AMDMsMTcuMjE0LDYuODQ3LDI3Ljk2M2gtNDQuMDc5Yy0wLjE4OS04LjI4OS0yLjc2Mi0xNS4zMjct%0D%0ANy43NTgtMjEuMTU1ICBjLTQuOTUzLTUuNzUzLTEwLjk3MS04LjY2Ni0xOC4wMDgtOC42NjZ2NTQu%0D%0AOTM4YzIuNDk3LDAuNjAyLDUuMDM0LDEuMjEsNy42MDQsMS44NTZjMi42MDksMC42NDEsNS4zMzMs%0D%0AMS4zNiw4LjI1LDIuMTk0ICBjMTUuMjg1LDQuMTI0LDI3LjA5LDkuMjY1LDM1LjM3NCwxNS4zNmM4%0D%0ALjI0Niw2LjA5NSwxNC4zNzcsMTIuNDQ5LDE4LjI3NSwxOS4wNzNjMy45MzcsNi42NTcsNi4yODIs%0D%0AMTMuMjM3LDYuOTk4LDE5Ljg2MiAgYzAuNzIxLDYuNjU4LDEuMDYzLDEyLjUyMSwxLjA2MywxNy42%0D%0AN0MzNDIuMzgsMzEwLjY2NCwzNDEuMjgxLDMxNi40MTMsMzM5LjAxMywzMjMuMzM5Ii8+PC9zdmc+%0D%0ACg==" alt="Title Dollar Symbol">
		</div>
	</div>
  <div class="hexagon-draw">
    <div class="hexagon-construct-top"></div>
    <div class="hexagon-construct-middle"></div>
    <div class="hexagon-construct-bottom"></div>
    <div class="hexagon-picture">
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGZpbGw9IndoaXRlIiBkPSJNMTc3LjA5MiwzNTMuMzIzYy0zLjI4MS0zLjU1NC00Ljg4Mi04%0D%0ALjMyMy00LjgwOS0xNC4zNWgtMjIuNDAyYzEuMDI3LDEyLjUyLDQuOTIxLDIxLjk4NCwxMS42LDI4%0D%0ALjUxMyAgYzYuNjgxLDYuNDQ3LDE1Ljk5NCwxMC4wNywyNy44NjIsMTAuOTUzdjEzLjU0N2g5LjM4%0D%0AOHYtMTMuNTQ3YzcuOTM5LTAuNTczLDE0LjQ2OC0yLjEzOSwxOS41OC00Ljc3MSAgYzUuMDc3LTIu%0D%0ANjc0LDkuMTYtNS42ODksMTIuMTc3LTkuMDg0YzMuMDE1LTMuMzk3LDUuMTEyLTYuODcyLDYuMjk3%0D%0ALTEwLjQxN2MxLjE0My0zLjUxMiwxLjc1NS02LjUyNywxLjc1NS04Ljg1OCAgYzAtMi42MjktMC4x%0D%0AOTItNS42ODgtMC42MTItOS4wODRjLTAuMzQzLTMuMzU5LTEuNTI0LTYuNzE4LTMuNTQ4LTEwLjEx%0D%0ANmMtMi4wMjItMy4zOTUtNS4xNS02LjY3Mi05LjM4OS05LjgwNiAgYy00LjIzOS0zLjEyOC0xMC4z%0D%0AMDItNS43NjQtMTguMTI1LTcuOTAxYy0xLjQ5LTAuNDU2LTIuOTA0LTAuODAyLTQuMjM4LTEuMTFj%0D%0ALTEuMzM4LTAuMzAxLTIuNjM4LTAuNjQ5LTMuODk2LTAuOTl2LTI4LjEyMyAgYzMuNTg4LDAsNi42%0D%0ANzksMS40ODMsOS4yMzgsNC40NjFjMi41NTksMi45NDEsMy44NTQsNi42MDUsMy45NzEsMTAuODA1%0D%0AaDIyLjU5NGMtMC4zMDgtNS41MzItMS40ODktMTAuMzA0LTMuNTExLTE0LjMxMyAgYy0xLjk4My00%0D%0ALjA0OS00LjU4Mi03LjQwOC03Ljc4Ny0xMC4xNTVjLTMuMTY5LTIuNjM1LTYuODcyLTQuNzcxLTEx%0D%0ALjA2Ni02LjI5NmMtNC4xNjItMS41NjQtOC42NjctMi41OTQtMTMuNDM4LTMuMDkzdi0xMi4zMjcg%0D%0AIGgtOS4zODh2MTIuMzI3Yy00Ljc3MSwwLjMwOS05LjQyMiwxLjIyMi0xMy44NTIsMi43ODdjLTQu%0D%0ANDI5LDEuNDg5LTguMzk5LDMuNjY4LTExLjc1NSw2LjQ5MmMtMy40MzUsMi44Mi02LjE0NSw2LjI5%0D%0AOC04LjIwOCwxMC40NTYgIGMtMi4wNjEsNC4xMTctMy4wOTMsOC44ODYtMy4wOTMsMTQuMzEyYzAs%0D%0ANS4yNjQsMC44ODEsOS42OSwyLjY3LDEzLjI0MWMxLjgzNCwzLjU0OCw0LjI0MSw2LjU2Myw3LjI1%0D%0AMyw4LjkzMSAgYzMuMDIsMi40MDQsNi40NTEsNC4yNzksMTAuMjY2LDUuNzI3YzMuODE5LDEuNDUz%0D%0ALDcuNzExLDIuNjc0LDExLjYwNCwzLjc0YzEuMDY4LDAuMTk0LDIuMDY0LDAuNSwyLjk3NiwwLjcy%0D%0AOSAgYzAuODc4LDAuMjY3LDEuNjA0LDAuNDksMi4xMzgsMC43MjF2MzMuMjQ0QzE4NC40NTgsMzU5%0D%0ALjAxNCwxODAuMzc0LDM1Ni44LDE3Ny4wOTIsMzUzLjMyMyBNMTk4LjczMSwzMjkuNDMyICBjNi4y%0D%0ANjEsMS42NzUsMTAuNjg4LDMuNTg4LDEzLjI4Niw1LjY0NmMyLjU5MywyLjA2MywzLjg5Miw1LjE5%0D%0ANSwzLjg5Miw5LjMxM2MwLDIuNTItMC41MzUsNC43MzYtMS41NjgsNi42MSAgYy0xLjA2OCwxLjgy%0D%0AOC0yLjQ0MSwzLjM5NC00LjA4Myw0LjY4N2MtMS42MzcsMS4yNjgtMy41MTMsMi4yNTctNS41Nywy%0D%0ALjk0MWMtMi4wNiwwLjY4OS00LjA0OCwxLjExLTUuOTU2LDEuMzM3VjMyOS40MzIgIEwxOTguNzMx%0D%0ALDMyOS40MzJ6IE0xNzguMzUsMjk5LjUwOWMtMi4yMTItMS45NDktMy4zMTgtNC42MTgtMy4zMTgt%0D%0AOC4xMjZjMC0yLjI1NSwwLjM4Mi00LjE2NCwxLjE4Mi01LjgwMyAgYzAuODA0LTEuNjQzLDEuODcz%0D%0ALTMuMDU0LDMuMjg0LTQuMTI1YzEuMzMzLTEuMTA0LDIuODk5LTEuOTQyLDQuNjE3LTIuNDc4YzEu%0D%0ANjc5LTAuNTM2LDMuNDM2LTAuOCw1LjIyOC0wLjh2MjUuOTUyICBDMTg0LjIzLDMwMi45ODIsMTgw%0D%0ALjYwNCwzMDEuMzgzLDE3OC4zNSwyOTkuNTA5IE0xMjQuOTk2LDg0LjcwN3YzMC4yMjZoMzUzLjc2%0D%0AM1YzMDEuOEg1MTJWODQuNzA3SDEyNC45OTZ6IE0wLDQyNy4yOTRoMzg3LjAxICBWMjEwLjE2Mkgw%0D%0AVjQyNy4yOTR6IE0xOTMuNTA0LDIzMS4zMDljMzcuMzY1LDAsNjcuNjMsMzguNTgzLDY3LjYzLDg2%0D%0ALjIxNWMwLDQ3LjU5Ny0zMC4yNjUsODYuMTc3LTY3LjYzLDg2LjE3NyAgYy0zNy4zNjMsMC02Ny42%0D%0AMzEtMzguNTgtNjcuNjMxLTg2LjE3N0MxMjUuODc1LDI2OS44OTIsMTU2LjE0MSwyMzEuMzA5LDE5%0D%0AMy41MDQsMjMxLjMwOSBNNjIuMzI1LDE3Ny42MDZoMzUzLjc2NnYxODYuODU4aDMzLjI0MyAgVjE0%0D%0ANy4zNzhINjIuMzI1VjE3Ny42MDZ6Ii8+PC9zdmc+Cg==" alt="Title Badge">
    </div>
  </div>
</div>

<div class="box-badge-red">
	<div class="hexagon-draw">
		<div class="hexagon-construct-top"></div>
		<div class="hexagon-construct-middle"></div>
		<div class="hexagon-construct-bottom"></div>
		<div class="hexagon-picture">
			<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGZpbGw9IndoaXRlIiBkPSJNMzk1Ljk4NiwxNjYuNDM2bDIyLjIzOS0zNy4wNGwtMzYuMDg2%0D%0ALTIzLjcyNGwzLjk1My00Mi45OThsLTQyLjgwNy01LjY4OWwtMTUuMDkzLTQwLjUwN0wyODcuMTc3%0D%0ALDI5Ljk0TDI1Ni4wMDIsMCAgbC0zMS4xMjUsMjkuOTM5bC00MS4wNzEtMTMuNDYzbC0xNS4wNzIs%0D%0ANDAuNTA3bC00Mi44MjcsNS42OTFsMy45OTMsNDIuOTk4bC0zNi4xMjYsMjMuNzI0bDIyLjI2Miwz%0D%0ANy4wNGwtMjIuMjYyLDM3LjAwNCAgbDM2LjEyNiwyMy43MDFsLTMuOTkzLDQzLjAzNmw0Mi44Mjcs%0D%0ANS42NjlsMTUuMDcyLDQwLjQ3MWw0MS4wNzEtMTMuNDIxbDMxLjEyNSwyOS45MzhsMzEuMTc1LTI5%0D%0ALjkzOGw0MS4wMTgsMTMuNDIxbDE1LjA5MS00MC40NzEgIGw0Mi44MDctNS42NjlsLTMuOTUtNDMu%0D%0AMDM2bDM2LjA4NS0yMy43MDFMMzk1Ljk4NiwxNjYuNDM2eiBNMjk0Ljg3LDMzNi42NDZsLTE4LjI4%0D%0ANSwxNy42MDRsLTIwLjU4NCwxOS43ODdsLTIwLjU4OC0xOS43ODcgIGwtMTguMjY1LTE3LjYwNGwt%0D%0AMjQuMTEyLDcuOTFsLTI0LjI2OCw3Ljk0NFY1MTJsODUuNjUzLTUzLjgzM0wzNDMuMjQ1LDUxMlYz%0D%0ANTIuNTM5bC0yNC4yODYtNy45ODNMMjk0Ljg3LDMzNi42NDZ6Ii8+PC9zdmc+Cg==" alt="Title Badge">
		</div>
	</div>
	<div class="hexagon-draw">
		<div class="hexagon-construct-top"></div>
		<div class="hexagon-construct-middle"></div>
		<div class="hexagon-construct-bottom"></div>
		<div class="hexagon-picture">
			<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGZpbGw9IndoaXRlIiBkPSJNMjkwLjczMywyODYuMTA4Yy01LjA2OC00LjA1MS0xMy42OTYt%0D%0ANy43MTktMjUuOTE3LTExLjA1djU5LjU5NGMzLjcxLTAuNDE1LDcuNjA2LTEuMjUzLDExLjY1My0y%0D%0ALjY1MSAgYzQuMDUyLTEuMzE5LDcuNjQ1LTMuMjE0LDEwLjg1OC01Ljc1MmMzLjIxNi0yLjQyLDUu%0D%0AODY0LTUuNDgxLDcuOTExLTkuMTU3YzIuMDc3LTMuNTk0LDMuMTAzLTcuODYxLDMuMTAzLTEyLjg2%0D%0AMSAgQzI5OC4zMzksMjk2LjEzNSwyOTUuODAyLDI5MC4xMTYsMjkwLjczMywyODYuMTA4IE0yMjcu%0D%0AMjgyLDE4MS40ODZjLTIuNjg3LDIuMjAzLTQuODA3LDQuODg2LTYuMzU4LDguMTA0ICBjLTEuNTQ5%0D%0ALDMuMjE3LTIuMzEsNi45NjItMi4zMSwxMS4yNzZjMCw2Ljg0NywyLjEyMiwxMi4xNDYsNi40NzUs%0D%0AMTUuODkxYzQuMzUsMy42NjYsMTEuNTAxLDYuNjk2LDIxLjQxNSw5di01MC42MjMgIGMtMy41Miww%0D%0ALTYuOTI2LDAuNTMxLTEwLjIxNiwxLjU1NUMyMzIuOTU4LDE3Ny43NDEsMjMwLjAxLDE3OS4zMzEs%0D%0AMjI3LjI4MiwxODEuNDg2IE0yNTUuOTU5LDAuMDEgIEMxMTQuNjA2LDAuMDEsMC4wMDEsMTE0LjU5%0D%0ANywwLjAwMSwyNTUuOTljMCwxNDEuMzg3LDExNC42MDUsMjU2LDI1NS45NTgsMjU2YzE0MS4zOTYs%0D%0AMCwyNTYuMDQxLTExNC42MTMsMjU2LjA0MS0yNTYgIEM1MTIsMTE0LjU5OCwzOTcuMzU2LDAuMDEs%0D%0AMjU1Ljk1OSwwLjAxIE0yNTUuOTU5LDQ3NS4yODZjLTEyMC44ODQsMC0yMTkuMjU3LTk4LjQxMi0y%0D%0AMTkuMjU3LTIxOS4yOTUgIGMwLTEyMC45MjMsOTguMzczLTIxOS4yOTYsMjE5LjI1Ny0yMTkuMjk2%0D%0AYzEyMC45MjgsMCwyMTkuMzAyLDk4LjM3NCwyMTkuMzAyLDIxOS4yOTYgIEM0NzUuMjYxLDM3Ni44%0D%0ANzQsMzc2Ljg4NCw0NzUuMjg2LDI1NS45NTksNDc1LjI4NiBNMjU2LDc2LjUxNWMtOTkuMTMsMC0x%0D%0ANzkuNDU3LDgwLjM4MS0xNzkuNDU3LDE3OS40NzUgIFMxNTYuODY5LDQzNS40NDYsMjU2LDQzNS40%0D%0ANDZjOTkuMDkxLDAsMTc5LjQxNS04MC4zNjIsMTc5LjQxNS0xNzkuNDU3QzQzNS40MTQsMTU2Ljg5%0D%0ANiwzNTUuMDkzLDc2LjUxNSwyNTYsNzYuNTE1IE0zMzkuMDEzLDMyMy4zMzkgIGMtMi4yNzEsNi45%0D%0AMTktNi4zNTYsMTMuNjk2LTEyLjI2MiwyMC4zMTVjLTUuOTAyLDYuNjI4LTEzLjgxLDEyLjUyNS0y%0D%0AMy43NTksMTcuNzA0Yy05LjkxNCw1LjE1My0yMi42NjMsOC4yNS0zOC4xNzcsOS4yNzl2MjYuNDA4%0D%0AICBoLTE4LjMxMnYtMjYuNDA4Yy0yMy4xNTgtMS42MzQtNDEuMjQzLTguNzgxLTU0LjI5NS0yMS40%0D%0AMTVjLTEzLjAxOC0xMi42MDQtMjAuNTgxLTMxLjE0Ny0yMi42NjItNTUuNTA1aDQzLjc3NCAgYy0w%0D%0ALjIyNSwxMS43NTksMi44NzUsMjEuMDcxLDkuMzA2LDI3LjkyM2M2LjM5OCw2Ljg0MywxNC4zNzks%0D%0AMTEuMTU1LDIzLjg3OCwxMy4wMTN2LTY0LjgxNGMtMS4wMjEtMC40NTItMi40Mi0wLjk0MS00LjE2%0D%0AMi0xLjQwMSAgYy0xLjc0Mi0wLjU2OS0zLjY3Mi0wLjk4Mi01Ljc1Mi0xLjQzN2MtNy42NDQtMi4w%0D%0ANDEtMTUuMjEtNC41MDItMjIuNjYzLTcuM2MtNy40MTctMi44MDItMTQuMTE0LTYuNTQ2LTIwLjAx%0D%0ANi0xMS4xNjIgIGMtNS45MDEtNC42NjEtMTAuNTk1LTEwLjQ4MS0xNC4xNDktMTcuMzY4Yy0zLjQ4%0D%0AMi02Ljk2Ny01LjIyLTE1LjU1Mi01LjIyLTI1LjkyMWMwLTEwLjU1MiwyLjAwMy0xOS44NjMsNi4w%0D%0AMTYtMjcuOTYyICBjNC4wNDctOC4wNTYsOS4zODItMTQuNzk0LDE2LjAwMy0yMC4yNzZjNi42MjMt%0D%0ANS40ODksMTQuMjYzLTkuNzY0LDIyLjk2Ni0xMi43NTFjOC43MDItMi45OTIsMTcuNjctNC44MDUs%0D%0AMjYuOTc3LTUuNDQ2di0yMy44NzkgIGgxOC4zMTJ2MjMuODc5YzkuMzExLDEuMDkxLDE4LjA0Nywz%0D%0ALjA2MSwyNi4yMTgsNi4wNDdjOC4xNzYsMy4wMzMsMTUuMzY0LDcuMTU5LDIxLjYwNywxMi40NTIg%0D%0AIGM2LjE2NSw1LjI1NiwxMS4yNzQsMTEuODQyLDE1LjE3MywxOS42NzdjMy45MzIsNy44NzEsNi4y%0D%0AMDMsMTcuMjE0LDYuODQ3LDI3Ljk2M2gtNDQuMDc5Yy0wLjE4OS04LjI4OS0yLjc2Mi0xNS4zMjct%0D%0ANy43NTgtMjEuMTU1ICBjLTQuOTUzLTUuNzUzLTEwLjk3MS04LjY2Ni0xOC4wMDgtOC42NjZ2NTQu%0D%0AOTM4YzIuNDk3LDAuNjAyLDUuMDM0LDEuMjEsNy42MDQsMS44NTZjMi42MDksMC42NDEsNS4zMzMs%0D%0AMS4zNiw4LjI1LDIuMTk0ICBjMTUuMjg1LDQuMTI0LDI3LjA5LDkuMjY1LDM1LjM3NCwxNS4zNmM4%0D%0ALjI0Niw2LjA5NSwxNC4zNzcsMTIuNDQ5LDE4LjI3NSwxOS4wNzNjMy45MzcsNi42NTcsNi4yODIs%0D%0AMTMuMjM3LDYuOTk4LDE5Ljg2MiAgYzAuNzIxLDYuNjU4LDEuMDYzLDEyLjUyMSwxLjA2MywxNy42%0D%0AN0MzNDIuMzgsMzEwLjY2NCwzNDEuMjgxLDMxNi40MTMsMzM5LjAxMywzMjMuMzM5Ii8+PC9zdmc+%0D%0ACg==" alt="Title Dollar Symbol">
		</div>
	</div>
  <div class="hexagon-draw">
    <div class="hexagon-construct-top"></div>
    <div class="hexagon-construct-middle"></div>
    <div class="hexagon-construct-bottom"></div>
    <div class="hexagon-picture">
      <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQg%0D%0AU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3Zn%0D%0AMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIGhlaWdodD0i%0D%0ANTEycHgiIGlkPSJMYXllcl8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB3%0D%0AaWR0aD0iNTEycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9y%0D%0AZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxw%0D%0AYXRoIGZpbGw9IndoaXRlIiBkPSJNMTc3LjA5MiwzNTMuMzIzYy0zLjI4MS0zLjU1NC00Ljg4Mi04%0D%0ALjMyMy00LjgwOS0xNC4zNWgtMjIuNDAyYzEuMDI3LDEyLjUyLDQuOTIxLDIxLjk4NCwxMS42LDI4%0D%0ALjUxMyAgYzYuNjgxLDYuNDQ3LDE1Ljk5NCwxMC4wNywyNy44NjIsMTAuOTUzdjEzLjU0N2g5LjM4%0D%0AOHYtMTMuNTQ3YzcuOTM5LTAuNTczLDE0LjQ2OC0yLjEzOSwxOS41OC00Ljc3MSAgYzUuMDc3LTIu%0D%0ANjc0LDkuMTYtNS42ODksMTIuMTc3LTkuMDg0YzMuMDE1LTMuMzk3LDUuMTEyLTYuODcyLDYuMjk3%0D%0ALTEwLjQxN2MxLjE0My0zLjUxMiwxLjc1NS02LjUyNywxLjc1NS04Ljg1OCAgYzAtMi42MjktMC4x%0D%0AOTItNS42ODgtMC42MTItOS4wODRjLTAuMzQzLTMuMzU5LTEuNTI0LTYuNzE4LTMuNTQ4LTEwLjEx%0D%0ANmMtMi4wMjItMy4zOTUtNS4xNS02LjY3Mi05LjM4OS05LjgwNiAgYy00LjIzOS0zLjEyOC0xMC4z%0D%0AMDItNS43NjQtMTguMTI1LTcuOTAxYy0xLjQ5LTAuNDU2LTIuOTA0LTAuODAyLTQuMjM4LTEuMTFj%0D%0ALTEuMzM4LTAuMzAxLTIuNjM4LTAuNjQ5LTMuODk2LTAuOTl2LTI4LjEyMyAgYzMuNTg4LDAsNi42%0D%0ANzksMS40ODMsOS4yMzgsNC40NjFjMi41NTksMi45NDEsMy44NTQsNi42MDUsMy45NzEsMTAuODA1%0D%0AaDIyLjU5NGMtMC4zMDgtNS41MzItMS40ODktMTAuMzA0LTMuNTExLTE0LjMxMyAgYy0xLjk4My00%0D%0ALjA0OS00LjU4Mi03LjQwOC03Ljc4Ny0xMC4xNTVjLTMuMTY5LTIuNjM1LTYuODcyLTQuNzcxLTEx%0D%0ALjA2Ni02LjI5NmMtNC4xNjItMS41NjQtOC42NjctMi41OTQtMTMuNDM4LTMuMDkzdi0xMi4zMjcg%0D%0AIGgtOS4zODh2MTIuMzI3Yy00Ljc3MSwwLjMwOS05LjQyMiwxLjIyMi0xMy44NTIsMi43ODdjLTQu%0D%0ANDI5LDEuNDg5LTguMzk5LDMuNjY4LTExLjc1NSw2LjQ5MmMtMy40MzUsMi44Mi02LjE0NSw2LjI5%0D%0AOC04LjIwOCwxMC40NTYgIGMtMi4wNjEsNC4xMTctMy4wOTMsOC44ODYtMy4wOTMsMTQuMzEyYzAs%0D%0ANS4yNjQsMC44ODEsOS42OSwyLjY3LDEzLjI0MWMxLjgzNCwzLjU0OCw0LjI0MSw2LjU2Myw3LjI1%0D%0AMyw4LjkzMSAgYzMuMDIsMi40MDQsNi40NTEsNC4yNzksMTAuMjY2LDUuNzI3YzMuODE5LDEuNDUz%0D%0ALDcuNzExLDIuNjc0LDExLjYwNCwzLjc0YzEuMDY4LDAuMTk0LDIuMDY0LDAuNSwyLjk3NiwwLjcy%0D%0AOSAgYzAuODc4LDAuMjY3LDEuNjA0LDAuNDksMi4xMzgsMC43MjF2MzMuMjQ0QzE4NC40NTgsMzU5%0D%0ALjAxNCwxODAuMzc0LDM1Ni44LDE3Ny4wOTIsMzUzLjMyMyBNMTk4LjczMSwzMjkuNDMyICBjNi4y%0D%0ANjEsMS42NzUsMTAuNjg4LDMuNTg4LDEzLjI4Niw1LjY0NmMyLjU5MywyLjA2MywzLjg5Miw1LjE5%0D%0ANSwzLjg5Miw5LjMxM2MwLDIuNTItMC41MzUsNC43MzYtMS41NjgsNi42MSAgYy0xLjA2OCwxLjgy%0D%0AOC0yLjQ0MSwzLjM5NC00LjA4Myw0LjY4N2MtMS42MzcsMS4yNjgtMy41MTMsMi4yNTctNS41Nywy%0D%0ALjk0MWMtMi4wNiwwLjY4OS00LjA0OCwxLjExLTUuOTU2LDEuMzM3VjMyOS40MzIgIEwxOTguNzMx%0D%0ALDMyOS40MzJ6IE0xNzguMzUsMjk5LjUwOWMtMi4yMTItMS45NDktMy4zMTgtNC42MTgtMy4zMTgt%0D%0AOC4xMjZjMC0yLjI1NSwwLjM4Mi00LjE2NCwxLjE4Mi01LjgwMyAgYzAuODA0LTEuNjQzLDEuODcz%0D%0ALTMuMDU0LDMuMjg0LTQuMTI1YzEuMzMzLTEuMTA0LDIuODk5LTEuOTQyLDQuNjE3LTIuNDc4YzEu%0D%0ANjc5LTAuNTM2LDMuNDM2LTAuOCw1LjIyOC0wLjh2MjUuOTUyICBDMTg0LjIzLDMwMi45ODIsMTgw%0D%0ALjYwNCwzMDEuMzgzLDE3OC4zNSwyOTkuNTA5IE0xMjQuOTk2LDg0LjcwN3YzMC4yMjZoMzUzLjc2%0D%0AM1YzMDEuOEg1MTJWODQuNzA3SDEyNC45OTZ6IE0wLDQyNy4yOTRoMzg3LjAxICBWMjEwLjE2Mkgw%0D%0AVjQyNy4yOTR6IE0xOTMuNTA0LDIzMS4zMDljMzcuMzY1LDAsNjcuNjMsMzguNTgzLDY3LjYzLDg2%0D%0ALjIxNWMwLDQ3LjU5Ny0zMC4yNjUsODYuMTc3LTY3LjYzLDg2LjE3NyAgYy0zNy4zNjMsMC02Ny42%0D%0AMzEtMzguNTgtNjcuNjMxLTg2LjE3N0MxMjUuODc1LDI2OS44OTIsMTU2LjE0MSwyMzEuMzA5LDE5%0D%0AMy41MDQsMjMxLjMwOSBNNjIuMzI1LDE3Ny42MDZoMzUzLjc2NnYxODYuODU4aDMzLjI0MyAgVjE0%0D%0ANy4zNzhINjIuMzI1VjE3Ny42MDZ6Ii8+PC9zdmc+Cg==" alt="Title Badge">
    </div>
  </div>
</div>

              
            
!

CSS

              
                @mixin badge-generator($width: 94, $color: #ff1744, $margin_top: 0) {
	$middle_width: $width/2;
	$height: ($width/2) * 1.154700538;
	$border_top: $height/2;

	text-align: center; //center image
	margin-top: unquote( $margin_top + 'px');

	.hexagon-draw {
		display: inline-block;
		margin-right: 10px;

		.hexagon-construct-top {
			width: 0;
			border-bottom: unquote( $border_top + 'px') solid $color;
			border-left: unquote( $middle_width + 'px') solid transparent;
			border-right: unquote( $middle_width + 'px') solid transparent;
		}
		.hexagon-construct-middle {
			width: unquote( ($width) + 'px');
			height: 54px;//width/2*1,154700538
			height: unquote( ( ($width/2) * 1.154700538 ) + 'px');
			background-color: $color;
		}
		.hexagon-construct-bottom {
			width: 0;
			border-top: unquote( $border_top + 'px') solid $color;
			border-left: unquote( $middle_width + 'px') solid transparent;
			border-right: unquote( $middle_width + 'px') solid transparent;
		}
		.hexagon-picture {
			position: relative;
			top: unquote( (-0.83 * $width) + 'px');
			height: 0;
			img {
				max-height: unquote( $middle_width + 'px');
			}
		}
	}
}
.box-badge-olive {
  @include badge-generator(90, olive, 50);
}
.box-badge-red {
  @include badge-generator(120, #ff1744, 0);
}
              
            
!

JS

              
                
              
            
!
999px

Console