Texas SVG

In this example below you will see how to do a Texas SVG with some HTML / CSS and Javascript

Messing with SVG's of the Great State of Texas

Thumbnail
This awesome code was written by Adam Moore, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Adam Moore ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Texas SVG</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html {
  background: #00897B;
}

body {
  width: 550px;
  margin: auto;
  margin-top: 20%;
  background: #00796B;
  color: #F36C60;
  text-shadow: 4px 4px 1px #004D40;
  padding: 1em;
  border: 5px solid #00695C;
}

#Texas-1 .shadow {
  fill: #004D40;
}

#Texas-1 .body {
  fill: #F36C60;
}

#Texas-2 .star {
  fill: #4DB6AC;
}

#Texas-2 .body {
  fill: none;
  stroke: #F36C60;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <h1>Texas SVG</h1>

<svg version="1.1" id="Texas-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve"><g id="Texas">
		<polyline class="shadow" points="179.182,230.45 172.939,213.018 177.084,189.266 201.399,177.985 214.783,165.506 
			236.591,154.065 238.492,143.659 238.049,138.408 241.108,128.751 234.865,116.235 230.388,110.708 228.146,80.508 
			222.146,74.508 210.19,73.793 204.738,73.384 195.364,79.184 165.893,78.888 160.883,73.001 146.422,73.001 140.76,67.256 
			136.315,69.918 126.705,64.099 125.48,26.519 119.48,20.519 73.871,114.636 12.303,110.379 12.303,114.555 31.199,134.776 
			44.663,142.855 50.854,167.402 70.323,175.327 75.709,169.941 79.294,156.002 96.856,155.368 113.737,169.429 133.031,198.365 
			138.307,216.222 144.307,222.222 167.264,232.649"/>
		<polyline class="body" points="173.182,224.45 166.939,207.018 171.084,183.266 195.399,171.985 208.783,159.506 
			230.591,148.065 232.492,137.659 232.049,132.408 235.108,122.751 228.865,110.235 224.388,104.708 222.146,74.508 
			215.327,74.012 204.19,67.793 198.738,67.384 189.364,73.184 159.893,72.888 154.883,67.001 140.422,67.001 134.76,61.256 
			130.315,63.918 120.705,58.099 119.48,20.519 72.808,19.356 67.871,108.636 6.303,104.379 6.303,108.555 25.199,128.776 
			38.663,136.855 50.067,163.307 64.323,169.327 69.709,163.941 73.294,150.002 90.856,149.368 107.737,163.429 127.031,192.365 
			130.896,195.901 138.307,216.222 161.264,226.649"/></g></svg>

<svg version="1.1" id="Texas-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="259.69px" height="250.775px" viewBox="0 0 259.69 250.775" enable-background="new 0 0 259.69 250.775" xml:space="preserve"> <path class="body" stroke-width="5" stroke-miterlimit="10" d="M188.147,213.762l-2.067,3.072
		c-0.919,0.037-1.52,0.055-1.802,0.055c-0.884,0-1.652-0.088-2.306-0.266c-0.654-0.176-1.387-0.266-2.199-0.266h-0.424
		c0.388,0.531,0.732,1.008,1.033,1.432c0.3,0.424,0.609,0.83,0.928,1.219c0.317,0.389,0.68,0.768,1.086,1.139
		s0.892,0.77,1.458,1.193c0.034,0.459,0.097,1.264,0.186,2.412c0.088,1.148,0.176,2.367,0.265,3.656
		c0.088,1.291,0.177,2.51,0.265,3.656c0.088,1.15,0.15,1.953,0.186,2.412c0.106,1.096,0.345,2.236,0.716,3.418
		c0.371,1.186,0.821,2.359,1.352,3.525s1.086,2.314,1.669,3.445s1.14,2.172,1.67,3.127v1.061c-3.357,0-6.704-0.062-10.044-0.186
		c-3.339-0.125-6.634-0.459-9.884-1.008c-3.251-0.547-6.422-1.379-9.514-2.49c-3.092-1.113-6.051-2.643-8.878-4.586
		c-0.105-0.105-0.256-0.238-0.45-0.396c-0.194-0.16-0.389-0.336-0.583-0.531c-0.194-0.193-0.362-0.371-0.504-0.529
		s-0.229-0.273-0.265-0.344l-10.812-24.752c-0.248-0.529-0.769-1.146-1.563-1.855c-0.795-0.705-1.679-1.447-2.65-2.225
		c-0.973-0.777-1.943-1.545-2.915-2.307c-0.972-0.76-1.74-1.492-2.306-2.199c-0.707-0.742-1.36-1.447-1.961-2.119
		s-1.175-1.344-1.723-2.014c-0.548-0.672-1.078-1.369-1.59-2.094c-0.513-0.725-1.016-1.492-1.511-2.307
		c-0.919-1.625-1.625-3.338-2.119-5.141c-0.496-1.803-1.132-3.55-1.908-5.246c-0.707-1.555-1.52-3.029-2.438-4.426
		c-0.919-1.396-1.908-2.765-2.968-4.107c-0.424-0.494-1.06-1.28-1.908-2.358c-0.848-1.077-1.731-2.19-2.649-3.339
		c-0.92-1.148-1.768-2.208-2.544-3.18c-0.778-0.971-1.272-1.616-1.484-1.935c-0.884-1.06-1.953-1.916-3.207-2.57
		c-1.254-0.653-2.579-1.166-3.975-1.537c-1.396-0.371-2.818-0.618-4.267-0.742c-1.449-0.124-2.809-0.186-4.081-0.186
		c-2.085,0-3.781,0.115-5.088,0.344c-1.308,0.23-2.465,0.654-3.472,1.272c-1.007,0.619-1.961,1.458-2.861,2.518
		c-0.901,1.06-1.971,2.403-3.207,4.028c-0.071,0.071-0.265,0.31-0.583,0.716c-0.317,0.407-0.654,0.84-1.007,1.298
		c-0.354,0.459-0.689,0.893-1.007,1.298c-0.318,0.407-0.513,0.663-0.583,0.768c-0.142,0.213-0.407,0.619-0.795,1.22
		c-0.39,0.601-0.795,1.245-1.219,1.935c-0.425,0.689-0.831,1.334-1.22,1.935s-0.654,1.007-0.795,1.219h-0.212h-0.265
		c-2.827-1.095-5.548-2.181-8.162-3.259c-2.615-1.078-5.08-2.297-7.394-3.658c-2.314-1.359-4.471-2.958-6.466-4.796
		c-1.997-1.837-3.808-4.099-5.433-6.784c-0.142-0.212-0.266-0.512-0.371-0.901c-0.106-0.388-0.186-0.795-0.238-1.219
		c-0.054-0.424-0.106-0.812-0.159-1.166c-0.053-0.353-0.098-0.6-0.133-0.742c-1.096-4.77-2.738-9.196-4.929-13.276
		c-2.191-4.081-5.212-7.623-9.063-10.626c-0.142-0.106-0.441-0.335-0.9-0.689c-0.46-0.353-0.999-0.768-1.617-1.245
		s-1.28-0.972-1.987-1.484c-0.707-0.512-1.369-0.998-1.987-1.458c-0.618-0.458-1.157-0.856-1.616-1.192
		c-0.46-0.335-0.761-0.556-0.901-0.663c-1.413-1.166-2.642-2.481-3.684-3.948c-1.042-1.466-2.022-2.985-2.941-4.558
		c-0.919-1.572-1.847-3.145-2.782-4.717c-0.937-1.572-2.006-3.029-3.207-4.373v-0.689h69.165V3.298h56.764v45.05l6.095,3.127h0.212
		h0.212l4.505-1.802h0.266c0.776,0,1.519,0.186,2.226,0.557c0.706,0.371,1.325,0.848,1.855,1.431
		c0.529,0.583,0.953,1.228,1.271,1.935c0.318,0.707,0.478,1.396,0.478,2.067h4.134c1.412,0,2.809,0.106,4.187,0.318
		c0.354,0.071,0.68,0.23,0.98,0.477c0.3,0.248,0.583,0.503,0.849,0.769c0.265,0.265,0.538,0.513,0.821,0.742
		c0.282,0.23,0.617,0.344,1.007,0.344c0.706,0,0.989-0.477,0.848-1.431c0.106-0.035,0.3-0.061,0.583-0.079
		c0.283-0.018,0.478-0.027,0.583-0.027c0.177,0,0.397,0.009,0.663,0.027c0.265,0.018,0.415,0.044,0.45,0.079
		c0.035,0,0.114,0.071,0.238,0.212c0.124,0.142,0.266,0.292,0.424,0.45c0.159,0.159,0.3,0.31,0.425,0.451
		c0.123,0.142,0.202,0.23,0.238,0.265c0.105,0.035,0.238,0.035,0.397,0s0.335-0.08,0.53-0.133c0.193-0.053,0.371-0.106,0.529-0.159
		c0.159-0.053,0.273-0.08,0.345-0.08v-1.696c0.53,0,0.972,0.177,1.325,0.53c0.353,0.354,0.645,0.795,0.874,1.325
		c0.229,0.53,0.415,1.096,0.557,1.696c0.141,0.601,0.292,1.166,0.451,1.696c0.158,0.53,0.335,0.972,0.529,1.325
		c0.194,0.354,0.451,0.53,0.769,0.53c0.247,0,0.406-0.035,0.478-0.106l3.127-2.703c0.176-0.035,0.3-0.053,0.371-0.053
		c0.317,0,0.724,0.106,1.219,0.318c0.494,0.212,1.007,0.459,1.537,0.742c0.53,0.283,1.007,0.583,1.431,0.901
		s0.706,0.583,0.848,0.795c0.106,0.177,0.044,0.397-0.185,0.663c-0.23,0.265-0.345,0.486-0.345,0.663
		c0.034,0,0.149,0.036,0.345,0.106c0.193,0.071,0.397,0.142,0.609,0.212c0.212,0.071,0.415,0.124,0.609,0.159
		c0.193,0.036,0.309,0.036,0.345,0c0.388-0.318,0.662-0.663,0.821-1.034s0.326-0.715,0.503-1.034
		c0.177-0.318,0.425-0.591,0.742-0.821c0.318-0.229,0.83-0.345,1.537-0.345v3.233h0.424c0.247-0.283,0.538-0.636,0.875-1.06
		c0.335-0.424,0.706-0.822,1.112-1.192c0.406-0.371,0.839-0.689,1.299-0.954c0.459-0.265,0.954-0.397,1.484-0.397
		c0.458,0,0.769,0.115,0.927,0.344c0.159,0.23,0.283,0.495,0.371,0.795c0.088,0.301,0.186,0.566,0.292,0.795
		c0.105,0.23,0.317,0.344,0.636,0.344c0.564,0,1.051-0.159,1.458-0.477c0.405-0.318,0.909-0.477,1.51-0.477
		c0.742,0,1.254,0.168,1.537,0.503c0.282,0.336,0.557,0.689,0.821,1.06c0.266,0.371,0.637,0.698,1.113,0.98
		c0.478,0.283,1.263,0.354,2.358,0.212c0,0.106,0.054,0.336,0.159,0.689c0.106,0.354,0.194,0.565,0.265,0.636
		c0,0.036,0.035,0.062,0.106,0.08c0.07,0.018,0.123,0.026,0.159,0.026c0.07,0,0.141-0.035,0.212-0.106
		c0.742-0.848,1.386-1.466,1.935-1.855c0.547-0.388,1.095-0.671,1.643-0.848c0.548-0.176,1.175-0.3,1.882-0.371
		c0.706-0.071,1.59-0.247,2.65-0.53c0.176-0.035,0.468-0.15,0.874-0.344c0.406-0.194,0.839-0.397,1.299-0.61
		c0.458-0.212,0.918-0.406,1.378-0.583c0.459-0.176,0.848-0.265,1.166-0.265c0.459,0,0.848,0.159,1.166,0.477
		c0.317,0.318,0.742,0.477,1.271,0.477c0.424,0,0.812-0.07,1.166-0.212c0.353-0.141,0.697-0.309,1.034-0.503
		c0.335-0.194,0.67-0.362,1.007-0.503c0.335-0.141,0.697-0.212,1.086-0.212h0.53c0.177,0,0.291,0.036,0.345,0.106
		c0.053,0.071,0.291,0.194,0.715,0.371c2.19,0.919,4.373,1.669,6.546,2.252s4.354,1.334,6.546,2.252
		c0.636,0.283,1.121,0.575,1.457,0.875c0.336,0.301,0.662,0.592,0.98,0.875c0.318,0.283,0.689,0.513,1.113,0.689
		c0.424,0.177,1.042,0.265,1.854,0.265c0.742,0,1.466-0.15,2.174-0.451c0.706-0.3,1.412-0.451,2.119-0.451h0.212
		c0.177,0.071,0.406,0.159,0.689,0.265c0.282,0.106,0.424,0.177,0.424,0.212v34.662c0.53,0.248,1.077,0.778,1.644,1.59
		c0.564,0.813,1.121,1.785,1.669,2.915c0.548,1.131,1.077,2.359,1.59,3.684c0.512,1.325,1.008,2.615,1.484,3.869
		c0.477,1.254,0.918,2.412,1.325,3.471c0.405,1.06,0.769,1.891,1.086,2.491c0.106,0.283,0.31,0.565,0.609,0.848
		c0.3,0.283,0.61,0.565,0.928,0.848c0.318,0.283,0.601,0.566,0.849,0.848c0.246,0.283,0.37,0.53,0.37,0.742
		c0,0.071-0.009,0.212-0.026,0.424s-0.026,0.336-0.026,0.371c0,0.071-0.026,0.257-0.079,0.557c-0.053,0.3-0.106,0.627-0.159,0.98
		c-0.053,0.354-0.106,0.689-0.159,1.007s-0.079,0.513-0.079,0.583l-0.901,15.794c-0.071,1.237-0.265,2.474-0.583,3.71
		c-0.317,1.237-0.628,2.465-0.928,3.684c-0.3,1.219-0.539,2.447-0.715,3.684c-0.178,1.237-0.178,2.491,0,3.763l-0.901,0.901
		c-2.014,0.919-3.993,1.855-5.936,2.809c-1.944,0.954-3.869,1.979-5.777,3.074c-0.354,0.212-0.698,0.459-1.033,0.742
		c-0.337,0.283-0.672,0.548-1.007,0.795c-0.337,0.248-0.689,0.459-1.061,0.636c-0.371,0.177-0.787,0.265-1.245,0.265
		c0-0.494,0.105-0.927,0.317-1.298s0.441-0.733,0.689-1.086c0.247-0.353,0.477-0.707,0.688-1.06
		c0.212-0.353,0.318-0.759,0.318-1.219c-0.602,0-1.192,0.08-1.775,0.239c-0.583,0.159-1.211,0.238-1.882,0.238
		c0-0.565,0.106-1.13,0.318-1.696c0.212-0.565,0.441-1.078,0.688-1.537c-0.071,0-0.177-0.008-0.317-0.026
		c-0.142-0.018-0.248-0.027-0.318-0.027c-0.636,0-1.184,0.071-1.643,0.212c-0.46,0.142-1.043,0.389-1.749,0.742
		c0,0.071-0.01,0.186-0.026,0.345c-0.019,0.159-0.027,0.274-0.027,0.344c0,0.813,0.168,1.537,0.504,2.173
		c0.335,0.636,0.706,1.175,1.113,1.616c0.405,0.442,0.776,0.795,1.112,1.06s0.504,0.433,0.504,0.503c0,0.53-0.389,1.175-1.166,1.935
		c-0.777,0.76-1.661,1.546-2.65,2.358c-0.989,0.813-1.952,1.626-2.888,2.438c-0.937,0.812-1.563,1.52-1.882,2.119
		c-0.283,0.496-0.495,0.928-0.636,1.299c-0.142,0.371-0.292,0.707-0.451,1.008c-0.158,0.3-0.354,0.582-0.583,0.848
		c-0.229,0.265-0.574,0.557-1.033,0.874c-0.142,0.071-0.477,0.283-1.007,0.636c-0.53,0.354-1.104,0.734-1.723,1.141
		s-1.192,0.786-1.723,1.139c-0.529,0.354-0.848,0.583-0.954,0.689c-0.354,0.247-0.937,0.688-1.749,1.324
		c-0.812,0.637-1.678,1.309-2.597,2.015c-0.919,0.707-1.775,1.387-2.57,2.039c-0.795,0.654-1.352,1.123-1.67,1.404
		c-0.459,0.248-0.866,0.391-1.219,0.424c-0.354,0.037-0.777,0.055-1.271,0.055c-0.283,0-0.619-0.018-1.008-0.055
		c-0.389-0.033-0.583-0.264-0.583-0.688c0-0.035,0.009-0.07,0.027-0.107c0.017-0.033,0.026-0.07,0.026-0.105
		c0.176-0.105,0.503-0.326,0.98-0.662c0.477-0.336,0.98-0.697,1.51-1.086c0.53-0.388,1.024-0.759,1.484-1.112
		c0.459-0.354,0.776-0.602,0.954-0.742l0.901-0.901c-0.778,0.39-1.396,0.646-1.855,0.769c-0.46,0.124-1.043,0.186-1.749,0.186
		c-0.105,0-0.274-0.008-0.504-0.027c-0.229-0.017-0.362-0.025-0.397-0.025c-0.07-0.035-0.3-0.115-0.688-0.238
		c-0.39-0.124-0.813-0.266-1.272-0.425s-0.893-0.3-1.298-0.424c-0.407-0.124-0.663-0.203-0.769-0.238h-0.212h-0.266
		c0.106,0.424,0.256,0.839,0.451,1.245c0.193,0.406,0.388,0.805,0.583,1.193c0.193,0.389,0.371,0.794,0.529,1.218
		c0.159,0.424,0.239,0.848,0.239,1.271c0,0.496-0.159,0.963-0.478,1.404c-0.318,0.443-0.707,0.832-1.166,1.166
		c-0.459,0.336-0.945,0.602-1.457,0.795c-0.513,0.195-0.98,0.293-1.405,0.293c-0.317,0-0.574-0.062-0.768-0.186
		c-0.195-0.125-0.381-0.381-0.557-0.77c0.034,0.105,0.044,0.318,0.026,0.637c-0.019,0.318-0.053,0.645-0.106,0.98
		c-0.053,0.336-0.115,0.654-0.186,0.953c-0.071,0.301-0.142,0.504-0.212,0.609c-0.105,0.213-0.283,0.469-0.53,0.77
		s-0.521,0.592-0.821,0.873c-0.301,0.283-0.574,0.531-0.821,0.742c-0.247,0.213-0.424,0.318-0.53,0.318h-4.505
		c-0.247,0-0.389,0.105-0.424,0.318s-0.053,0.406-0.053,0.584c0,0.07,0.008,0.15,0.026,0.238c0.018,0.088,0.026,0.15,0.026,0.186
		c0.035,0.035,0.114,0.186,0.238,0.449c0.124,0.266,0.266,0.557,0.424,0.875c0.159,0.318,0.3,0.619,0.425,0.9
		c0.123,0.283,0.202,0.443,0.238,0.479c0.034,0.105,0.053,0.176,0.053,0.211c0,0.072-0.221,0.238-0.662,0.504
		c-0.442,0.266-0.954,0.574-1.537,0.928s-1.148,0.707-1.696,1.059c-0.548,0.355-0.91,0.654-1.086,0.902
		c0.246,0.564,0.706,0.936,1.378,1.113c0.67,0.176,1.253,0.264,1.749,0.264v1.803 M188.359,212.754
		c-0.142-0.035-0.212,0.035-0.212,0.213c0,0.211,0.07,0.291,0.212,0.238c0.141-0.055,0.212-0.133,0.212-0.238
		C188.571,212.859,188.5,212.789,188.359,212.754z M189.26,210.527c-0.142-0.035-0.212,0.035-0.212,0.213s0.07,0.238,0.212,0.186
		s0.213-0.115,0.213-0.186C189.473,210.6,189.401,210.527,189.26,210.527z"/> <path class="star" d="M181.525,139.923c0,0.28-0.12,0.44-0.2,0.561c-0.1,0.12-0.22,0.2-0.32,0.28l-3.681,2.42
		c-0.06,0.02-0.18,0.22-0.16,0.34c0,0.04,0,0.06,0,0.08l1.621,4.741c0.06,0.16,0.08,0.3,0.08,0.46c0,0.14-0.021,0.32-0.141,0.5
		c-0.14,0.2-0.4,0.32-0.6,0.32h-0.021c-0.38-0.02-0.52-0.16-0.72-0.3l-3.801-3.101c-0.04-0.04-0.101-0.06-0.2-0.06
		c-0.08,0-0.16,0.02-0.181,0.06l-3.62,3.081c-0.181,0.14-0.34,0.28-0.721,0.3c-0.199,0.02-0.5-0.1-0.62-0.3
		c-0.14-0.2-0.16-0.38-0.16-0.52c0-0.16,0.04-0.28,0.08-0.42l1.44-4.721c0-0.02,0-0.04,0-0.08c0.021-0.14-0.1-0.34-0.16-0.36
		l-3.7-2.44c-0.12-0.08-0.221-0.16-0.32-0.28c-0.1-0.12-0.22-0.28-0.22-0.561c0-0.16,0.06-0.36,0.16-0.48
		c0.12-0.12,0.22-0.2,0.319-0.24c0.2-0.08,0.36-0.1,0.54-0.1h4.602c0.04,0,0.14-0.02,0.22-0.08s0.141-0.16,0.141-0.2l1.34-4.781
		c0.04-0.14,0.08-0.28,0.18-0.42c0.101-0.14,0.301-0.36,0.66-0.38c0.36,0.02,0.561,0.24,0.66,0.38c0.101,0.14,0.141,0.28,0.2,0.42
		l1.32,4.781c0,0.04,0.061,0.14,0.141,0.2c0.079,0.06,0.18,0.08,0.22,0.08h4.601c0.141,0,0.261,0.02,0.4,0.06s0.3,0.1,0.46,0.28
		C181.466,139.563,181.545,139.764,181.525,139.923z"/></svg>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/adamaoc/texas-svg-EHIjy */
html {
  background: #00897B;
}

body {
  width: 550px;
  margin: auto;
  margin-top: 20%;
  background: #00796B;
  color: #F36C60;
  text-shadow: 4px 4px 1px #004D40;
  padding: 1em;
  border: 5px solid #00695C;
}

#Texas-1 .shadow {
  fill: #004D40;
}

#Texas-1 .body {
  fill: #F36C60;
}

#Texas-2 .star {
  fill: #4DB6AC;
}

#Texas-2 .body {
  fill: none;
  stroke: #F36C60;
}

Comments